@hestia-earth/ui-components 0.40.3 → 0.40.5

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

@@ -5,7 +5,7 @@ import * as i1 from '@angular/forms';
 import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl } from '@angular/forms';
 import { NgTemplateOutlet, NgClass, DecimalPipe, KeyValuePipe, DOCUMENT, PlatformLocation, NgStyle, UpperCasePipe, JsonPipe, DatePipe, AsyncPipe, formatDate as formatDate$1 } from '@angular/common';
 import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbActiveModal, NgbHighlight, NgbTooltip, NgbDropdownModule, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbModal, NgbTooltipModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbActiveModal, NgbHighlight, NgbModal, NgbTooltip, NgbDropdown, NgbDropdownMenu, NgbDropdownToggle, NgbDropdownItem, NgbTypeahead, NgbPopover, NgbTooltipModule, NgbDropdownModule, NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
 import { catchError, of, map, debounceTime, distinctUntilChanged, tap, switchMap, zip, fromEvent, startWith, ReplaySubject, mergeMap, shareReplay, delay, timer, take, first, Subject, combineLatest, filter, pipe, merge as merge$1, skip, EMPTY, throttleTime, animationFrameScheduler, skipUntil, lastValueFrom, forkJoin, from, reduce, firstValueFrom, mergeAll, toArray, distinct, groupBy } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import get from 'lodash.get';
@@ -1222,21 +1222,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { chartConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartConfiguration", required: false }] }], chartContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartContainer", required: false }] }] } });
 
+var ChartExportFormat;
+(function (ChartExportFormat) {
+    ChartExportFormat["png"] = "Image";
+    ChartExportFormat["svg"] = "Vector image";
+})(ChartExportFormat || (ChartExportFormat = {}));
+const exportFormats = Object.entries(ChartExportFormat).map(([extension, label]) => ({ extension, label }));
 class ChartExportButtonComponent {
     constructor() {
-        this.chart = input.required(...(ngDevMode ? [{ debugName: "chart" }] : []));
+        this.modalService = inject(NgbModal);
+        this.modal = viewChild('modal', ...(ngDevMode ? [{ debugName: "modal" }] : []));
+        this.buttonClass = input('button is-small is-ghost is-p-2', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
+        this.chart = input(...(ngDevMode ? [undefined, { debugName: "chart" }] : []));
         this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.exportFormats = input(exportFormats, ...(ngDevMode ? [{ debugName: "exportFormats" }] : []));
+        this.chartExportFn = input(...(ngDevMode ? [undefined, { debugName: "chartExportFn" }] : []));
+        this.exportFormat = signal(undefined, ...(ngDevMode ? [{ debugName: "exportFormat" }] : []));
+    }
+    async defaultDownload(format) {
+        return format === 'svg' ? await this.chart().exportAsSvg(this.config()) : this.chart().exportAsPng();
+    }
+    async download() {
+        const downloadFn = this.chartExportFn() || this.defaultDownload.bind(this);
+        await downloadFn(this.exportFormat(), this.chart());
+        this.close();
     }
-    export(format) {
-        return format === 'svg' ? this.chart().exportAsSvg(this.config()) : this.chart().exportAsPng();
+    open() {
+        this.modalService.open(this.modal());
+    }
+    close() {
+        this.exportFormat.set(undefined);
+        this.modalService.dismissAll();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div ngbDropdown #displayDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-start\">\n  <button\n    ngbDropdownToggle\n    class=\"button is-small is-ghost is-p-2\"\n    type=\"button\"\n    id=\"download-menu\"\n    [ngbTooltip]=\"displayDd.isOpen() || chart().exporting() ? '' : 'Download'\"\n    [disableTooltip]=\"displayDd.isOpen()\"\n    placement=\"bottom\">\n    @if (chart().exporting()) {\n      <he-svg-icon name=\"loading\" animation=\"spin\" />\n    } @else {\n      <he-svg-icon name=\"download\" />\n    }\n  </button>\n  <div ngbDropdownMenu aria-labelledby=\"display-menu\">\n    <div class=\"dropdown-content\">\n      <a ngbDropdownItem (click)=\"export('png')\">\n        <he-svg-icon name=\"image\" />\n        <span class=\"is-pl-2\">Download Image (.png)</span>\n      </a>\n\n      <a ngbDropdownItem (click)=\"export('svg')\">\n        <he-svg-icon name=\"image\" />\n        <span class=\"is-pl-2\">Download Image (.svg)</span>\n      </a>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, chartExportFn: { classPropertyName: "chartExportFn", publicName: "chartExportFn", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <div class=\"modal is-active\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip, NgbDropdownModule], template: "<div ngbDropdown #displayDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-start\">\n  <button\n    ngbDropdownToggle\n    class=\"button is-small is-ghost is-p-2\"\n    type=\"button\"\n    id=\"download-menu\"\n    [ngbTooltip]=\"displayDd.isOpen() || chart().exporting() ? '' : 'Download'\"\n    [disableTooltip]=\"displayDd.isOpen()\"\n    placement=\"bottom\">\n    @if (chart().exporting()) {\n      <he-svg-icon name=\"loading\" animation=\"spin\" />\n    } @else {\n      <he-svg-icon name=\"download\" />\n    }\n  </button>\n  <div ngbDropdownMenu aria-labelledby=\"display-menu\">\n    <div class=\"dropdown-content\">\n      <a ngbDropdownItem (click)=\"export('png')\">\n        <he-svg-icon name=\"image\" />\n        <span class=\"is-pl-2\">Download Image (.png)</span>\n      </a>\n\n      <a ngbDropdownItem (click)=\"export('svg')\">\n        <he-svg-icon name=\"image\" />\n        <span class=\"is-pl-2\">Download Image (.svg)</span>\n      </a>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+            args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip], template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <div class=\"modal is-active\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-medium\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], chartExportFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartExportFn", required: false }] }] } });
 
 const defaultSettings$3 = Object.freeze({
     options: {
@@ -1279,11 +1303,11 @@ class ChartComponent {
         this.exporting.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true, isSignal: true }], exportAs: ["chart"], ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <div class=\"is-absolute | download\">\n      <he-chart-export-button [chart]=\"this\" />\n    </div>\n  }\n\n  <ng-content />\n\n  <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{bottom:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true, isSignal: true }], exportAs: ["chart"], ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <div class=\"is-absolute | download\">\n      <he-chart-export-button [chart]=\"this\" />\n    </div>\n  }\n\n  <ng-content />\n\n  <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, ChartExportButtonComponent], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <div class=\"is-absolute | download\">\n      <he-chart-export-button [chart]=\"this\" />\n    </div>\n  }\n\n  <ng-content />\n\n  <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{bottom:-12px;right:-10px}\n"] }]
+            args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, ChartExportButtonComponent], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <div class=\"is-absolute | download\">\n      <he-chart-export-button [chart]=\"this\" />\n    </div>\n  }\n\n  <ng-content />\n\n  <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"] }]
         }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], chartRef: [{ type: i0.ViewChild, args: ['chartRef', { isSignal: true }] }] } });
 
 var Breakpoint;
@@ -8365,7 +8389,7 @@ class CyclesEmissionsChartComponent {
         this.selectedTerm.set(term);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [labels]=\"labels()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: CyclesEmissionsChartComponent, isStandalone: true, selector: "he-cycles-emissions-chart", inputs: { cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms().length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [labels]=\"labels()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsChartComponent, decorators: [{
             type: Component$1,
@@ -9264,6 +9288,7 @@ const icons = [
     'save',
     'schema',
     'search',
+    'search-with-minus',
     'search-with-plus',
     'settings',
     'share',
@@ -9945,21 +9970,21 @@ class EngineModelsStageDeepComponent {
         this.service.focusedNode.set(node);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EngineModelsStageDeepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: EngineModelsStageDeepComponent, isStandalone: true, selector: "he-engine-models-stage-deep", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandedNode: { classPropertyName: "expandedNode", publicName: "expandedNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "@if (expandedNode()) {\n  <svg\n    class=\"is-absolute | related-node-icon\"\n    [class.has-errors]=\"hasError()\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"81\"\n    viewBox=\"0 0 15 81\"\n    fill=\"none\">\n    <path d=\"M0.5 0V71C0.5 75.9706 4.52944 80 9.5 80H14.5\" stroke=\"#B5B5B5\" />\n  </svg>\n}\n\n<div class=\"is-flex is-flex-direction-column is-gap-8\">\n  <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center\">\n    <div\n      class=\"is-flex is-align-items-flex-start is-align-self-stretch is-justify-content-space-between is-gap-8 is-p-1 | engine-models-stage--container is-type-{{\n        type()\n      }}\"\n      [class.has-errors]=\"hasError()\">\n      <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-gap-4\">\n        <div class=\"is-flex is-align-items-center is-gap-4\">\n          <he-node-icon [type]=\"type()\" size=\"20\" />\n          <span>{{ type() }}</span>\n        </div>\n\n        <div class=\"is-flex is-align-items-center is-gap-4 is-align-self-stretch\">\n          <span class=\"is-size-7\">ID:</span>\n          <he-node-link [node]=\"node()\">\n            <span class=\"has-text-link is-size-7\">{{ id() }}</span>\n          </he-node-link>\n        </div>\n      </div>\n\n      <div class=\"divider\"></div>\n\n      <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-gap-4\">\n        <span>\n          @if (inProgress()) {\n            <he-svg-icon name=\"loading-circle-filled\" size=\"24\" animation=\"spin\" class=\"has-text-info\" />\n          } @else if (recalculatedAt()) {\n            <he-svg-icon name=\"checkmark-circle-filled\" size=\"24\" class=\"has-text-success\" />\n          } @else {\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n          }\n        </span>\n        <span class=\"is-size-7\">\n          @if (inProgress()) {\n            stage {{ stage() }} / {{ maxStage() }}\n          } @else if (recalculatedAt()) {\n            <span\n              class=\"trigger-popover\"\n              [ngbPopover]=\"popoverDetails\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              placement=\"left auto\"\n              container=\"body\">\n              <span>Complete</span>\n            </span>\n          } @else {\n            Failed\n          }\n        </span>\n      </div>\n\n      @if (canExpand()) {\n        <a (click)=\"expanded.set(!expanded())\" class=\"has-text-secondary\">\n          <he-svg-icon [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\" />\n        </a>\n      }\n    </div>\n\n    @if (hasError()) {\n      <div\n        class=\"is-flex is-justify-content-center is-align-items-center is-gap-4 is-align-self-stretch is-pl-1 is-pr-2 is-py-2 | error-container is-type-{{\n          type()\n        }}\">\n        <div class=\"is-flex-grow-1 is-gap-4\">\n          <he-svg-icon name=\"exclamation-triangle-filled\" size=\"20\" class=\"has-text-danger\" />\n          <span class=\"is-size-7 has-text-weight-semibold\">Validation Error</span>\n        </div>\n\n        <button class=\"button is-primary is-light is-small\" (click)=\"openError(node())\">View</button>\n      </div>\n    }\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-column is-gap-8 is-overflow-hidden\">\n      @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n        <div class=\"is-relative is-pl-4\">\n          <he-engine-models-stage-deep\n            class=\"is-flex-grow-1\"\n            [node]=\"relatedNode\"\n            [expanded]=\"false\"\n            [expandedNode]=\"expandedNode() || node()\" />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".engine-models-stage--container{border:1px solid transparent;border-radius:6px}.engine-models-stage--container.has-errors{border-bottom-left-radius:0;border-bottom-right-radius:0}.divider{border-left:1px solid #4c7194;height:52px}.is-type-Cycle{border:1px solid #4c7194}.is-type-Site{border:1px solid #349b3e}.is-type-ImpactAssessment{border:1px solid #b4a988}.is-type-Source{border:1px solid #f5f5f5}.is-type-Cycle{background-color:#ecf1ff}.is-type-Site{background-color:#d5f3d8}.is-type-ImpactAssessment{background-color:#e7e0cb}.is-type-Source{background-color:#f5f5f5}.error-container{background-color:#fefaef;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top:0}.related-node-icon{top:-49px;left:8px}.related-node-icon.has-errors{top:-19px}\n"], dependencies: [{ kind: "component", type: EngineModelsStageDeepComponent, selector: "he-engine-models-stage-deep", inputs: ["node", "expanded", "expandedNode"], outputs: ["expandedChange"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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: "ngmodule", type: NgbTooltipModule }, { kind: "component", type: EngineModelsVersionLinkComponent, selector: "he-engine-models-version-link", inputs: ["node"] }, { kind: "component", type: SkeletonTextComponent, selector: "he-skeleton-text", inputs: ["animated", "width", "height"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "component", type: NodeIconComponent, selector: "he-node-icon", inputs: ["type", "size"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TimesPipe, name: "times" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: EngineModelsStageDeepComponent, isStandalone: true, selector: "he-engine-models-stage-deep", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, expandedNode: { classPropertyName: "expandedNode", publicName: "expandedNode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, ngImport: i0, template: "<div class=\"is-flex is-flex-direction-column is-gap-8\">\n  <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center\">\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch is-justify-content-space-between is-gap-4 is-radius-3 | is-type-{{\n        type()\n      }}-border\">\n      <div\n        class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-self-start is-align-self-stretch is-px-1 | is-type-{{\n          type()\n        }}-background\">\n        <span>{{ type() | keyToLabel }}</span>\n\n        <div class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\">\n          <span class=\"is-size-7\">ID:</span>\n          <he-node-link [node]=\"node()\">\n            <span class=\"has-text-link is-size-7\">{{ id() }}</span>\n          </he-node-link>\n        </div>\n      </div>\n\n      <div class=\"is-px-1 is-pb-1 w-100\">\n        @if (hasError()) {\n          <div class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\">\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n\n            <span class=\"is-size-7 is-flex-grow-1\">Validation Error</span>\n\n            <a class=\"has-text-secondary\" (click)=\"openError(node())\">\n              <he-svg-icon name=\"chevron-right\" />\n            </a>\n          </div>\n        }\n\n        <div\n          class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\"\n          [class.is-clickable]=\"canExpand()\"\n          (click)=\"canExpand() && expanded.set(!expanded())\">\n          @if (inProgress()) {\n            <he-svg-icon name=\"loading-circle-filled\" size=\"24\" animation=\"spin\" class=\"has-text-info\" />\n          } @else if (recalculatedAt()) {\n            <he-svg-icon name=\"checkmark-circle-filled\" size=\"24\" class=\"has-text-success\" />\n          } @else {\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n          }\n\n          <span class=\"is-size-7 is-flex-grow-1\">\n            @if (inProgress()) {\n              Stage {{ stage() }} / {{ maxStage() }}\n            } @else if (recalculatedAt()) {\n              <span\n                class=\"trigger-popover\"\n                [ngbPopover]=\"popoverDetails\"\n                autoClose=\"outside\"\n                popoverClass=\"is-narrow\"\n                placement=\"left auto\"\n                container=\"body\"\n                (click)=\"$event.stopPropagation()\">\n                <span>Complete</span>\n              </span>\n            } @else {\n              Failed\n            }\n          </span>\n\n          @if (canExpand()) {\n            <he-svg-icon [name]=\"expanded() ? 'chevron-down' : 'chevron-right'\" class=\"has-text-secondary\" />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-column is-gap-8 is-overflow-hidden is-pl-2 | related-stage\">\n      @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n        <he-engine-models-stage-deep\n          class=\"is-flex-grow-1\"\n          [node]=\"relatedNode\"\n          [expanded]=\"false\"\n          [expandedNode]=\"expandedNode() || node()\" />\n      }\n    </div>\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".is-type-Cycle-border{border:1px solid #ecf1ff}.is-type-Cycle-background{background-color:#ecf1ff}.is-type-Site-border{border:1px solid #d5f3d8}.is-type-Site-background{background-color:#d5f3d8}.is-type-ImpactAssessment-border{border:1px solid #e7e0cb}.is-type-ImpactAssessment-background{background-color:#e7e0cb}.is-type-Source-border{border:1px solid #f5f5f5}.is-type-Source-background{background-color:#f5f5f5}.related-stage{border-left:1px solid #4c7194}\n"], dependencies: [{ kind: "component", type: EngineModelsStageDeepComponent, selector: "he-engine-models-stage-deep", inputs: ["node", "expanded", "expandedNode"], outputs: ["expandedChange"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { 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: "ngmodule", type: NgbTooltipModule }, { kind: "component", type: EngineModelsVersionLinkComponent, selector: "he-engine-models-version-link", inputs: ["node"] }, { kind: "component", type: SkeletonTextComponent, selector: "he-skeleton-text", inputs: ["animated", "width", "height"] }, { kind: "component", type: NodeLinkComponent, selector: "he-node-link", inputs: ["node", "dataState", "showExternalLink", "linkClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: KeyToLabelPipe, name: "keyToLabel" }, { kind: "pipe", type: TimesPipe, name: "times" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: EngineModelsStageDeepComponent, decorators: [{
             type: Component$1,
             args: [{ selector: 'he-engine-models-stage-deep', imports: [
                         DatePipe,
+                        KeyToLabelPipe,
                         HESvgIconComponent,
                         NgbPopoverModule,
                         NgbTooltipModule,
                         EngineModelsVersionLinkComponent,
                         SkeletonTextComponent,
                         TimesPipe,
-                        NodeLinkComponent,
-                        NodeIconComponent
-                    ], template: "@if (expandedNode()) {\n  <svg\n    class=\"is-absolute | related-node-icon\"\n    [class.has-errors]=\"hasError()\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"81\"\n    viewBox=\"0 0 15 81\"\n    fill=\"none\">\n    <path d=\"M0.5 0V71C0.5 75.9706 4.52944 80 9.5 80H14.5\" stroke=\"#B5B5B5\" />\n  </svg>\n}\n\n<div class=\"is-flex is-flex-direction-column is-gap-8\">\n  <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center\">\n    <div\n      class=\"is-flex is-align-items-flex-start is-align-self-stretch is-justify-content-space-between is-gap-8 is-p-1 | engine-models-stage--container is-type-{{\n        type()\n      }}\"\n      [class.has-errors]=\"hasError()\">\n      <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-gap-4\">\n        <div class=\"is-flex is-align-items-center is-gap-4\">\n          <he-node-icon [type]=\"type()\" size=\"20\" />\n          <span>{{ type() }}</span>\n        </div>\n\n        <div class=\"is-flex is-align-items-center is-gap-4 is-align-self-stretch\">\n          <span class=\"is-size-7\">ID:</span>\n          <he-node-link [node]=\"node()\">\n            <span class=\"has-text-link is-size-7\">{{ id() }}</span>\n          </he-node-link>\n        </div>\n      </div>\n\n      <div class=\"divider\"></div>\n\n      <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center is-gap-4\">\n        <span>\n          @if (inProgress()) {\n            <he-svg-icon name=\"loading-circle-filled\" size=\"24\" animation=\"spin\" class=\"has-text-info\" />\n          } @else if (recalculatedAt()) {\n            <he-svg-icon name=\"checkmark-circle-filled\" size=\"24\" class=\"has-text-success\" />\n          } @else {\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n          }\n        </span>\n        <span class=\"is-size-7\">\n          @if (inProgress()) {\n            stage {{ stage() }} / {{ maxStage() }}\n          } @else if (recalculatedAt()) {\n            <span\n              class=\"trigger-popover\"\n              [ngbPopover]=\"popoverDetails\"\n              autoClose=\"outside\"\n              popoverClass=\"is-narrow\"\n              placement=\"left auto\"\n              container=\"body\">\n              <span>Complete</span>\n            </span>\n          } @else {\n            Failed\n          }\n        </span>\n      </div>\n\n      @if (canExpand()) {\n        <a (click)=\"expanded.set(!expanded())\" class=\"has-text-secondary\">\n          <he-svg-icon [name]=\"expanded() ? 'chevron-up' : 'chevron-down'\" />\n        </a>\n      }\n    </div>\n\n    @if (hasError()) {\n      <div\n        class=\"is-flex is-justify-content-center is-align-items-center is-gap-4 is-align-self-stretch is-pl-1 is-pr-2 is-py-2 | error-container is-type-{{\n          type()\n        }}\">\n        <div class=\"is-flex-grow-1 is-gap-4\">\n          <he-svg-icon name=\"exclamation-triangle-filled\" size=\"20\" class=\"has-text-danger\" />\n          <span class=\"is-size-7 has-text-weight-semibold\">Validation Error</span>\n        </div>\n\n        <button class=\"button is-primary is-light is-small\" (click)=\"openError(node())\">View</button>\n      </div>\n    }\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-column is-gap-8 is-overflow-hidden\">\n      @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n        <div class=\"is-relative is-pl-4\">\n          <he-engine-models-stage-deep\n            class=\"is-flex-grow-1\"\n            [node]=\"relatedNode\"\n            [expanded]=\"false\"\n            [expandedNode]=\"expandedNode() || node()\" />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".engine-models-stage--container{border:1px solid transparent;border-radius:6px}.engine-models-stage--container.has-errors{border-bottom-left-radius:0;border-bottom-right-radius:0}.divider{border-left:1px solid #4c7194;height:52px}.is-type-Cycle{border:1px solid #4c7194}.is-type-Site{border:1px solid #349b3e}.is-type-ImpactAssessment{border:1px solid #b4a988}.is-type-Source{border:1px solid #f5f5f5}.is-type-Cycle{background-color:#ecf1ff}.is-type-Site{background-color:#d5f3d8}.is-type-ImpactAssessment{background-color:#e7e0cb}.is-type-Source{background-color:#f5f5f5}.error-container{background-color:#fefaef;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-top:0}.related-node-icon{top:-49px;left:8px}.related-node-icon.has-errors{top:-19px}\n"] }]
+                        NodeLinkComponent
+                    ], template: "<div class=\"is-flex is-flex-direction-column is-gap-8\">\n  <div class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-center\">\n    <div\n      class=\"is-flex is-flex-direction-column is-align-items-flex-start is-align-self-stretch is-justify-content-space-between is-gap-4 is-radius-3 | is-type-{{\n        type()\n      }}-border\">\n      <div\n        class=\"is-flex is-flex-direction-column is-justify-content-center is-align-items-self-start is-align-self-stretch is-px-1 | is-type-{{\n          type()\n        }}-background\">\n        <span>{{ type() | keyToLabel }}</span>\n\n        <div class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\">\n          <span class=\"is-size-7\">ID:</span>\n          <he-node-link [node]=\"node()\">\n            <span class=\"has-text-link is-size-7\">{{ id() }}</span>\n          </he-node-link>\n        </div>\n      </div>\n\n      <div class=\"is-px-1 is-pb-1 w-100\">\n        @if (hasError()) {\n          <div class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\">\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n\n            <span class=\"is-size-7 is-flex-grow-1\">Validation Error</span>\n\n            <a class=\"has-text-secondary\" (click)=\"openError(node())\">\n              <he-svg-icon name=\"chevron-right\" />\n            </a>\n          </div>\n        }\n\n        <div\n          class=\"is-flex is-align-items-center is-align-self-stretch is-gap-4\"\n          [class.is-clickable]=\"canExpand()\"\n          (click)=\"canExpand() && expanded.set(!expanded())\">\n          @if (inProgress()) {\n            <he-svg-icon name=\"loading-circle-filled\" size=\"24\" animation=\"spin\" class=\"has-text-info\" />\n          } @else if (recalculatedAt()) {\n            <he-svg-icon name=\"checkmark-circle-filled\" size=\"24\" class=\"has-text-success\" />\n          } @else {\n            <he-svg-icon name=\"exclamation-triangle-filled\" size=\"24\" class=\"has-text-danger\" />\n          }\n\n          <span class=\"is-size-7 is-flex-grow-1\">\n            @if (inProgress()) {\n              Stage {{ stage() }} / {{ maxStage() }}\n            } @else if (recalculatedAt()) {\n              <span\n                class=\"trigger-popover\"\n                [ngbPopover]=\"popoverDetails\"\n                autoClose=\"outside\"\n                popoverClass=\"is-narrow\"\n                placement=\"left auto\"\n                container=\"body\"\n                (click)=\"$event.stopPropagation()\">\n                <span>Complete</span>\n              </span>\n            } @else {\n              Failed\n            }\n          </span>\n\n          @if (canExpand()) {\n            <he-svg-icon [name]=\"expanded() ? 'chevron-down' : 'chevron-right'\" class=\"has-text-secondary\" />\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n\n  @if (expanded()) {\n    @if (loading() && nodesLength() > 0) {\n      @for (node of nodesLength() | times; track $index) {\n        <he-skeleton-text [width]=\"60\" />\n      }\n    }\n\n    <div class=\"is-flex is-flex-direction-column is-gap-8 is-overflow-hidden is-pl-2 | related-stage\">\n      @for (relatedNode of expandableNodes(); track trackNode(relatedNode)) {\n        <he-engine-models-stage-deep\n          class=\"is-flex-grow-1\"\n          [node]=\"relatedNode\"\n          [expanded]=\"false\"\n          [expandedNode]=\"expandedNode() || node()\" />\n      }\n    </div>\n  }\n</div>\n\n<ng-template #popoverDetails>\n  <div class=\"is-flex is-flex-direction-column is-gap-4 has-text-white w-100\">\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Date:</span>\n      <span>{{ recalculatedAt() | date: (recalculatedAt().length === 10 ? 'mediumDate' : 'medium') }}</span>\n    </div>\n    <div class=\"is-flex is-align-items-center is-gap-8 w-100\">\n      <span class=\"has-text-weight-bold\">Calculated Version:</span>\n      <he-engine-models-version-link [node]=\"node()\" />\n    </div>\n  </div>\n</ng-template>\n", styles: [".is-type-Cycle-border{border:1px solid #ecf1ff}.is-type-Cycle-background{background-color:#ecf1ff}.is-type-Site-border{border:1px solid #d5f3d8}.is-type-Site-background{background-color:#d5f3d8}.is-type-ImpactAssessment-border{border:1px solid #e7e0cb}.is-type-ImpactAssessment-background{background-color:#e7e0cb}.is-type-Source-border{border:1px solid #f5f5f5}.is-type-Source-background{background-color:#f5f5f5}.related-stage{border-left:1px solid #4c7194}\n"] }]
         }], propDecorators: { node: [{ type: i0.Input, args: [{ isSignal: true, alias: "node", required: true }] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], expandedNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedNode", required: false }] }] } });
 
 const gitUrl = `${gitHome}/${Repository.orchestrator}/-/blob/${gitBranch()}`;
@@ -12789,7 +12814,6 @@ const toCsv = (data, terms) => {
 };
 class HierarchyChartComponent {
     constructor() {
-        this.domSanitizer = inject(DomSanitizer);
         this.chart = viewChild.required('chart');
         this.zoomContainer = viewChild.required('zoomContainer');
         this.chartContainer = viewChild.required('chartContainer');
@@ -12843,7 +12867,21 @@ class HierarchyChartComponent {
             : null, ...(ngDevMode ? [{ debugName: "otherEndpoint" }] : []));
         this.endpoints = computed(() => this.linkedIndicators().filter(indicator => indicator.type === ChartNodeType.endpoint), ...(ngDevMode ? [{ debugName: "endpoints" }] : []));
         this.chartChildren = computed(() => this.endpoints().length ? [...this.endpoints(), this.otherEndpoint()].filter(Boolean) : this.linkedIndicators(), ...(ngDevMode ? [{ debugName: "chartChildren" }] : []));
-        this.exportCSV = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(toCsv(this.data(), this.terms()))}`), ...(ngDevMode ? [{ debugName: "exportCSV" }] : []));
+        this.csvContent = computed(() => `data:text/html;charset=utf-8,${encodeURIComponent(toCsv(this.data(), this.terms()))}`, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
+        this.exportFormats = [
+            ...exportFormats,
+            {
+                extension: 'csv',
+                label: 'Data'
+            }
+        ];
+        this.chartExportFn = async (format, chart) => {
+            return {
+                png: () => this.downloadPng(),
+                svg: () => this.downloadSvg(),
+                csv: () => downloadFile(this.csvContent(), 'chart.csv')
+            }[format]();
+        };
         effect(() => {
             if ([!isEmpty(this.data()), !isEmpty(this.terms()), this.chart()?.nativeElement].every(Boolean)) {
                 this.init();
@@ -13072,11 +13110,11 @@ class HierarchyChartComponent {
         return downloadPng(this.chart().nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HierarchyChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "zoomContainer", first: true, predicate: ["zoomContainer"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart>\n      <g #zoomContainer>\n        <g #chartContainer></g>\n      </g>\n    </svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | chart-controls\">\n      <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n        <button class=\"button is-small shadow-1\" (click)=\"zoomIn()\">\n          <he-svg-icon name=\"plus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small shadow-1\" (click)=\"zoomOut()\">\n          <he-svg-icon name=\"minus\" size=\"20\" />\n        </button>\n        <div\n          class=\"is-inline-flex is-justify-content-flex-end is-align-items-center is-gap-8 | download-button\"\n          [class.is-expanded]=\"expandDownload()\">\n          @if (expandDownload()) {\n            <div class=\"is-flex is-flex-direction-column is-gap-4 is-justify-content-center is-align-items-flex-start\">\n              <a class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\" (click)=\"downloadPng()\">\n                <he-svg-icon name=\"image\" size=\"20\" />\n                <span class=\"is-size-7\">Download Image (.png)</span>\n              </a>\n\n              <a class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\" (click)=\"downloadSvg()\">\n                <he-svg-icon name=\"image\" size=\"20\" />\n                <span class=\"is-size-7\">Download Image (.svg)</span>\n              </a>\n\n              <a\n                class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\"\n                [href]=\"exportCSV()\"\n                download=\"chart.csv\">\n                <he-svg-icon name=\"csv-file\" size=\"20\" />\n                <span class=\"is-size-7\">Download Data (.csv)</span>\n              </a>\n            </div>\n          }\n          <button class=\"button is-small\" (click)=\"expandDownload.set(!expandDownload())\">\n            <he-svg-icon name=\"download\" size=\"20\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    <span class=\"is-pr-1\">:</span>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n    <span class=\"is-pr-1\">:</span>\n    @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n      @if (!lastTerm) {\n        <span class=\"is-px-1\">;</span>\n      }\n    }\n  </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width:1216px){.is-legend-item{min-width:130px}}.chart-controls{bottom:0;right:0}.chart-controls .button,.chart-controls .download-button.is-expanded{width:50px;height:50px;border-radius:90px;border:1px solid #dbe3ea;background:#f5f7f9}.chart-controls .download-button.is-expanded{width:auto;height:auto;padding-left:24px;padding-top:2px;padding-bottom:2px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: HierarchyChartComponent, isStandalone: true, selector: "he-hierarchy-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, terms: { classPropertyName: "terms", publicName: "terms", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { chartError: "chartError" }, viewQueries: [{ propertyName: "chart", first: true, predicate: ["chart"], descendants: true, isSignal: true }, { propertyName: "zoomContainer", first: true, predicate: ["zoomContainer"], descendants: true, isSignal: true }, { propertyName: "chartContainer", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }, { propertyName: "tooltipOperator", first: true, predicate: ["t"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart>\n      <g #zoomContainer>\n        <g #chartContainer></g>\n      </g>\n    </svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | chart-controls\">\n      <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n        <button class=\"button is-small\" (click)=\"zoomIn()\">\n          <he-svg-icon name=\"search-with-plus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small\" (click)=\"zoomOut()\">\n          <he-svg-icon name=\"search-with-minus\" size=\"20\" />\n        </button>\n        <he-chart-export-button\n          buttonClass=\"button is-small\"\n          [chartExportFn]=\"chartExportFn\"\n          [exportFormats]=\"exportFormats\" />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    <span class=\"is-pr-1\">:</span>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n    <span class=\"is-pr-1\">:</span>\n    @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n      @if (!lastTerm) {\n        <span class=\"is-px-1\">;</span>\n      }\n    }\n  </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width:1216px){.is-legend-item{min-width:130px}}.chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"], dependencies: [{ kind: "directive", type: NgbPopover, selector: "[ngbPopover]", inputs: ["animation", "autoClose", "ngbPopover", "popoverTitle", "placement", "popperOptions", "triggers", "positionTarget", "container", "disablePopover", "popoverClass", "popoverContext", "openDelay", "closeDelay"], outputs: ["shown", "hidden"], exportAs: ["ngbPopover"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: HierarchyChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent], template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart>\n      <g #zoomContainer>\n        <g #chartContainer></g>\n      </g>\n    </svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | chart-controls\">\n      <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n        <button class=\"button is-small shadow-1\" (click)=\"zoomIn()\">\n          <he-svg-icon name=\"plus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small shadow-1\" (click)=\"zoomOut()\">\n          <he-svg-icon name=\"minus\" size=\"20\" />\n        </button>\n        <div\n          class=\"is-inline-flex is-justify-content-flex-end is-align-items-center is-gap-8 | download-button\"\n          [class.is-expanded]=\"expandDownload()\">\n          @if (expandDownload()) {\n            <div class=\"is-flex is-flex-direction-column is-gap-4 is-justify-content-center is-align-items-flex-start\">\n              <a class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\" (click)=\"downloadPng()\">\n                <he-svg-icon name=\"image\" size=\"20\" />\n                <span class=\"is-size-7\">Download Image (.png)</span>\n              </a>\n\n              <a class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\" (click)=\"downloadSvg()\">\n                <he-svg-icon name=\"image\" size=\"20\" />\n                <span class=\"is-size-7\">Download Image (.svg)</span>\n              </a>\n\n              <a\n                class=\"is-flex is-gap-4 is-align-items-center has-text-grey-dark\"\n                [href]=\"exportCSV()\"\n                download=\"chart.csv\">\n                <he-svg-icon name=\"csv-file\" size=\"20\" />\n                <span class=\"is-size-7\">Download Data (.csv)</span>\n              </a>\n            </div>\n          }\n          <button class=\"button is-small\" (click)=\"expandDownload.set(!expandDownload())\">\n            <he-svg-icon name=\"download\" size=\"20\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    <span class=\"is-pr-1\">:</span>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n    <span class=\"is-pr-1\">:</span>\n    @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n      @if (!lastTerm) {\n        <span class=\"is-px-1\">;</span>\n      }\n    }\n  </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width:1216px){.is-legend-item{min-width:130px}}.chart-controls{bottom:0;right:0}.chart-controls .button,.chart-controls .download-button.is-expanded{width:50px;height:50px;border-radius:90px;border:1px solid #dbe3ea;background:#f5f7f9}.chart-controls .download-button.is-expanded{width:auto;height:auto;padding-left:24px;padding-top:2px;padding-bottom:2px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"] }]
+            args: [{ selector: 'he-hierarchy-chart', imports: [NgbPopover, HESvgIconComponent, ChartExportButtonComponent], template: "<div class=\"chart-area-border\">\n  <div\n    class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 chart-area-border is-legend\">\n    @for (legendItem of legend(); track legendItem.type) {\n      <div class=\"is-flex is-align-items-center is-gap-8 | is-legend-item\">\n        <span\n          class=\"is-inline-block-tablet is-align-middle | key-colour\"\n          [style.backgroundColor]=\"nodeColours[legendItem.type]\"\n          [style.borderColor]=\"nodeBorderColours[legendItem.type]\"></span>\n        <span class=\"is-size-7\">{{ legendItem.text }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"chart-container is-relative w-100 is-mt-2\">\n    <svg class=\"w-100 h-100\" #chart>\n      <g #zoomContainer>\n        <g #chartContainer></g>\n      </g>\n    </svg>\n\n    <span\n      class=\"is-hidden\"\n      [ngbPopover]=\"tipContent\"\n      triggers=\"manual\"\n      placement=\"right left auto\"\n      container=\"body\"\n      #t=\"ngbPopover\"\n      positionTarget=\".tip-target\"\n      popoverClass=\"is-narrow driver-chart-tooltip\"\n      [animation]=\"true\"></span>\n\n    <div class=\"is-absolute | chart-controls\">\n      <div class=\"is-flex is-flex-direction-column is-align-items-flex-end is-gap-4\">\n        <button class=\"button is-small\" (click)=\"zoomIn()\">\n          <he-svg-icon name=\"search-with-plus\" size=\"20\" />\n        </button>\n        <button class=\"button is-small\" (click)=\"zoomOut()\">\n          <he-svg-icon name=\"search-with-minus\" size=\"20\" />\n        </button>\n        <he-chart-export-button\n          buttonClass=\"button is-small\"\n          [chartExportFn]=\"chartExportFn\"\n          [exportFormats]=\"exportFormats\" />\n      </div>\n    </div>\n  </div>\n</div>\n\n<ng-template #tipContent let-tipData=\"tipData\">\n  @if (tipData.hasWeightedValue) {\n    <p>contribution: {{ tipData.weightedValueText }}</p>\n  }\n  @if (tipData.valueValueText) {\n    <p>\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.valueKeyHref\">value</a>\n      <span class=\"is-pr-1\">:</span>\n      <span>{{ tipData.valueValueText }}</span>\n      @if (tipData.hasValue) {\n        <a class=\"is-dark is-ml-2\" [href]=\"tipData.modelDocsHref\" target=\"_blank\">\n          <span>Docs</span>\n          <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n        </a>\n      }\n    </p>\n  }\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelKeyHref\">methodModel</a>\n    <span class=\"is-pr-1\">:</span>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.modelValueHref\">{{ tipData.modelValue }}</a>\n  </p>\n  <p>\n    <a class=\"is-dark\" target=\"_blank\" [href]=\"tipData.termKeyHref\">terms</a>\n    <span class=\"is-pr-1\">:</span>\n    @for (term of tipData.terms; track term.text; let lastTerm = $last) {\n      <a class=\"is-dark\" target=\"_blank\" [href]=\"term.href\">{{ term.text }}</a>\n      @if (!lastTerm) {\n        <span class=\"is-px-1\">;</span>\n      }\n    }\n  </p>\n</ng-template>\n", styles: [".chart-container{height:500px}@media screen and (min-width:1216px){.is-legend-item{min-width:130px}}.chart-controls{top:0;right:0}.chart-controls .button,.chart-controls he-chart-export-button ::ng-deep>.button{width:36px;height:36px}.key-colour{border-radius:3px;border:1px solid transparent;height:20px;width:20px}svg{pointer-events:none}:host ::ng-deep .node-box{fill-opacity:.3;stroke-opacity:.3;pointer-events:auto}:host ::ng-deep .node-openable:not(.mask-openable){cursor:pointer;stroke-opacity:1;fill-opacity:1}:host ::ng-deep .group-button,:host ::ng-deep .group-button-text{display:inline!important;cursor:pointer}:host ::ng-deep .node-label tspan{alignment-baseline:inherit}:host ::ng-deep .sibling-mask{pointer-events:none}:host ::ng-deep .mask-openable:hover{fill:none;stroke:none}:host ::ng-deep .mask-openable{cursor:pointer;pointer-events:all}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chart: [{ type: i0.ViewChild, args: ['chart', { isSignal: true }] }], zoomContainer: [{ type: i0.ViewChild, args: ['zoomContainer', { isSignal: true }] }], chartContainer: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }], tooltipOperator: [{ type: i0.ViewChild, args: ['t', { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], terms: [{ type: i0.Input, args: [{ isSignal: true, alias: "terms", required: false }] }], chartError: [{ type: i0.Output, args: ["chartError"] }] } });
 
 const filterTermTypes$1 = [
@@ -13301,7 +13339,6 @@ const logToCsv = (logs, impact) => [
 ].join('\n');
 class ImpactAssessmentsIndicatorBreakdownChartComponent {
     constructor() {
-        this.domSanitizer = inject(DomSanitizer);
         this.searchService = inject(HeSearchService);
         this.nodeService = inject(HeNodeService);
         this.responsiveService = inject(ResponsiveService);
@@ -13381,7 +13418,6 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
             name: this.emissions()?.find(v => v['@id'] === value.blankNodeTermId)?.name || value.blankNodeTermId,
             color: listColor(value, index)
         })), ...(ngDevMode ? [{ debugName: "values" }] : []));
-        this.csvContent = computed(() => this.domSanitizer.bypassSecurityTrustResourceUrl(`data:text/html;charset=utf-8,${encodeURIComponent(logToCsv(this.logs(), this.impactAssessment()))}`), ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
         this.id = computed(() => this.impactAssessment()?.['@id'] || this.impactAssessment()?.id, ...(ngDevMode ? [{ debugName: "id" }] : []));
         this.downloadFilename = computed(() => `${this.id()}-logs.csv`, ...(ngDevMode ? [{ debugName: "downloadFilename" }] : []));
         this.displayValue = signal(false, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
@@ -13404,6 +13440,21 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
                 textFn: ({ label, data }, index) => (index === this.maximumValues() ? `${label} at ${data}` : `${data}`)
             }
             : { textFn: ({ data }) => `${valueRatio(data, this.total())}%` }), ...(ngDevMode ? [{ debugName: "afterBarDrawSettings" }] : []));
+        this.exportFormats = [
+            ...exportFormats,
+            {
+                extension: 'csv',
+                label: 'Data'
+            }
+        ];
+        this.csvContent = computed(() => `data:text/html;charset=utf-8,${encodeURIComponent(logToCsv(this.logs(), this.impactAssessment()))}`, ...(ngDevMode ? [{ debugName: "csvContent" }] : []));
+        this.chartExportFn = async (format, chart) => {
+            return {
+                png: () => chart.exportAsPng(),
+                svg: () => chart.exportAsSvg({ lollipopConfig: {} }),
+                csv: () => downloadFile(this.csvContent(), 'chart.csv')
+            }[format]();
+        };
         // make sure selected term exists
         effect(() => {
             const terms = this.terms();
@@ -13429,11 +13480,11 @@ class ImpactAssessmentsIndicatorBreakdownChartComponent {
         return [blankNodeTermId, modelId, impactTermId].join('-');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n    <button\n      ngbDropdownToggle\n      class=\"button is-small is-ghost is-p-2\"\n      type=\"button\"\n      aria-haspopup=\"true\"\n      aria-controls=\"download-menu\"\n      [ngbTooltip]=\"optionDd.isOpen() ? '' : 'Download'\"\n      [disableTooltip]=\"optionDd.isOpen()\">\n      <he-svg-icon name=\"download\" aria-hidden=\"true\" />\n    </button>\n    <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n      <div class=\"dropdown-content\">\n        <a ngbDropdownItem (click)=\"chart.exportAsPng()\">\n          <he-svg-icon size=\"20\" name=\"image\" />\n          <span class=\"is-pl-2 is-size-7\">Chart Image (.png)</span>\n        </a>\n\n        <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n          <he-svg-icon size=\"20\" name=\"image\" />\n          <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n        </a>\n\n        <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n          <he-svg-icon size=\"20\" name=\"table\" />\n          <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorBreakdownChartComponent, isStandalone: true, selector: "he-impact-assessments-indicator-breakdown-chart", inputs: { impactAssessment: { classPropertyName: "impactAssessment", publicName: "impactAssessment", isSignal: true, isRequired: true, transformFunction: null }, indicators: { classPropertyName: "indicators", publicName: "indicators", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorBreakdownChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, NgbDropdownModule, NgbTooltip, HorizontalBarChartComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <div ngbDropdown #optionDd=\"ngbDropdown\" container=\"body\" placement=\"bottom-end\">\n    <button\n      ngbDropdownToggle\n      class=\"button is-small is-ghost is-p-2\"\n      type=\"button\"\n      aria-haspopup=\"true\"\n      aria-controls=\"download-menu\"\n      [ngbTooltip]=\"optionDd.isOpen() ? '' : 'Download'\"\n      [disableTooltip]=\"optionDd.isOpen()\">\n      <he-svg-icon name=\"download\" aria-hidden=\"true\" />\n    </button>\n    <div ngbDropdownMenu id=\"download-menu\" role=\"menu\">\n      <div class=\"dropdown-content\">\n        <a ngbDropdownItem (click)=\"chart.exportAsPng()\">\n          <he-svg-icon size=\"20\" name=\"image\" />\n          <span class=\"is-pl-2 is-size-7\">Chart Image (.png)</span>\n        </a>\n\n        <a ngbDropdownItem (click)=\"chart.exportAsSvg({ lollipopConfig: {} })\">\n          <he-svg-icon size=\"20\" name=\"image\" />\n          <span class=\"is-pl-2 is-size-7\">Chart Image (.svg)</span>\n        </a>\n\n        <a ngbDropdownItem [href]=\"csvContent()\" [download]=\"downloadFilename()\">\n          <he-svg-icon size=\"20\" name=\"table\" />\n          <span class=\"is-pl-2 is-size-7\">Chart Data (.csv)</span>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
+            args: [{ selector: 'he-impact-assessments-indicator-breakdown-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, FormsModule, HorizontalBarChartComponent, ChartExportButtonComponent], template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats\" />\n\n  <ng-content />\n</div>\n\n@if (logsResource.isLoading()) {\n  <div class=\"has-text-center py-3\">\n    <he-svg-icon name=\"loading\" animation=\"spin\" size=\"40\" />\n  </div>\n} @else if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-gap-12 is-mb-2 | breakdown-actions-table\">\n    @if (terms()?.length) {\n      <div class=\"control is-expanded is-flex-grow-1\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedTermId\" name=\"selectedTermId\">\n            @for (term of terms(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n    @if (methods()?.length) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedMethodId\" name=\"selectedMethodId\">\n            @for (term of methods(); track term['@id']) {\n              <option [value]=\"term['@id']\">{{ term.name }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n\n    <div class=\"is-flex is-justify-content-space-between\">\n      <div class=\"field is-relative is-mb-0 is-hidden-tablet\">\n        <input\n          type=\"checkbox\"\n          class=\"switch is-small is-rounded is-secondary\"\n          id=\"displayValue\"\n          name=\"displayValue\"\n          [(ngModel)]=\"displayValue\" />\n        <label for=\"displayValue\">Show numerical value</label>\n      </div>\n    </div>\n  </div>\n}\n\n@if (!logsResource.isLoading() && noData()) {\n  <div class=\"chart-area-border\">\n    <p class=\"has-text-centered\">\n      <span>No breakdown available for</span>\n      @if (selectedTerm()) {\n        <span class=\"is-pl-1\">{{ selectedTerm().name }}</span>\n      }\n      @if (selectedMethod()) {\n        <span class=\"is-pl-1\">({{ selectedMethod().name }})</span>\n      }\n      <span>.</span>\n    </p>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [class.is-hidden]=\"!logsResource.isLoading() && noData()\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [max]=\"total()\"\n  [maximumValues]=\"maximumValues()\"\n  [showExportButton]=\"false\"\n  [showNegativeValues]=\"false\"\n  [tooltipFn]=\"chartTooltipFn\"\n  [afterBarDrawSettings]=\"afterBarDrawSettings()\" />\n", styles: [":host{display:block;overflow:visible}@media screen and (max-width:767px){.chart-area-border{padding:0}}@media screen and (max-width:767px){.breakdown-actions-table{flex-direction:column;align-items:flex-start!important}}.breakdown-legend{background:#fafafa}.breakdown-legend--color{width:8px;height:8px;border-radius:50%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { impactAssessment: [{ type: i0.Input, args: [{ isSignal: true, alias: "impactAssessment", required: true }] }], indicators: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicators", required: false }] }] } });
 
 const impactValue = (impact, values) => (values[impact['@id']]?.nodes[0] || { value: 0 }).value;
@@ -13472,7 +13523,7 @@ class ImpactAssessmentsIndicatorsChartComponent {
         this.selectedTerm.set(term);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ImpactAssessmentsIndicatorsChartComponent, isStandalone: true, selector: "he-impact-assessments-indicators-chart", inputs: { key: { classPropertyName: "key", publicName: "key", isSignal: true, isRequired: false, transformFunction: null }, filterTermTypes: { classPropertyName: "filterTermTypes", publicName: "filterTermTypes", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" [config]=\"{ lollipopConfig: {} }\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"field\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select (change)=\"selectTerm($event)\" id=\"selectTerm\">\n          @for (term of terms(); track term) {\n            <option [value]=\"term['@id']\">{{ term.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<he-horizontal-bar-chart\n  #chart=\"horizontalBarChart\"\n  class=\"is-relative h-100\"\n  [title]=\"selectedTerm()?.units\"\n  [data]=\"chartData()\"\n  [showExportButton]=\"false\" />\n", styles: [":host{display:block;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "component", type: HorizontalBarChartComponent, selector: "he-horizontal-bar-chart", inputs: ["tooltipFn", "afterBarDrawSettings", "minHeight", "maxHeight"], exportAs: ["horizontalBarChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ImpactAssessmentsIndicatorsChartComponent, decorators: [{
             type: Component$1,
@@ -14097,7 +14148,7 @@ class SitesManagementChartComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesManagementChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null }, cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" />\n\n  <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n  <he-horizontal-buttons-group\n    [buttons]=\"termTypeButtons()\"\n    [(ngModel)]=\"termTypeModel\"\n    styles=\"primary\"\n    class=\"is-hidden-mobile\" />\n\n  <div class=\"field is-hidden-tablet\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n          @for (button of termTypeButtons(); track button.id) {\n            <option [value]=\"button.id\">{{ button.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" [showExportButton]=\"false\">\n    <he-chart-tooltip [tooltipFn]=\"chartTooltipFn\" />\n  </he-chart>\n</div>\n\n<div\n  class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n  @if (cycleDates().length) {\n    <div class=\"is-flex is-align-items-center is-gap-8\">\n      <div class=\"legend-color-dashed\"></div>\n      <span class=\"is-size-7\">Cycle start/end date</span>\n    </div>\n  }\n  @for (color of chartColors() | keyvalue; track color.key) {\n    <div class=\"is-flex is-align-items-center is-gap-8\">\n      <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n      <span class=\"is-size-7\">{{ color.key }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}.legend-color-dashed{width:0px;border-left:2px dashed red;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["chart", "config"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "styles"], outputs: ["itemRemoved"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: SitesManagementChartComponent, isStandalone: true, selector: "he-sites-management-chart", inputs: { site: { classPropertyName: "site", publicName: "site", isSignal: true, isRequired: true, transformFunction: null }, cycles: { classPropertyName: "cycles", publicName: "cycles", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"is-flex is-gap-8 is-justify-content-space-between is-align-items-center is-mb-3\">\n  <he-chart-export-button [chart]=\"chart\" />\n\n  <ng-content />\n</div>\n\n@if (termTypes().length > 1) {\n  <he-horizontal-buttons-group\n    [buttons]=\"termTypeButtons()\"\n    [(ngModel)]=\"termTypeModel\"\n    styles=\"primary\"\n    class=\"is-hidden-mobile\" />\n\n  <div class=\"field is-hidden-tablet\">\n    <div class=\"control is-expanded\">\n      <div class=\"select is-small is-fullwidth\">\n        <select [(ngModel)]=\"termTypeModel\" if=\"termTypeModel\">\n          @for (button of termTypeButtons(); track button.id) {\n            <option [value]=\"button.id\">{{ button.name }}</option>\n          }\n        </select>\n      </div>\n    </div>\n  </div>\n}\n\n<div class=\"chart-area-border\">\n  <he-chart #chart=\"chart\" class=\"is-relative\" [data]=\"chartData()\" [config]=\"chartConfig()\" [showExportButton]=\"false\">\n    <he-chart-tooltip [tooltipFn]=\"chartTooltipFn\" />\n  </he-chart>\n</div>\n\n<div\n  class=\"is-flex is-justify-content-center is-align-items-center is-flex-wrap-wrap is-gap-16 is-mt-2 chart-area-border is-legend\">\n  @if (cycleDates().length) {\n    <div class=\"is-flex is-align-items-center is-gap-8\">\n      <div class=\"legend-color-dashed\"></div>\n      <span class=\"is-size-7\">Cycle start/end date</span>\n    </div>\n  }\n  @for (color of chartColors() | keyvalue; track color.key) {\n    <div class=\"is-flex is-align-items-center is-gap-8\">\n      <div class=\"legend-color\" [style.background-color]=\"color.value\"></div>\n      <span class=\"is-size-7\">{{ color.key }}</span>\n    </div>\n  }\n</div>\n", styles: [":host{display:block;overflow:visible}he-chart ::ng-deep .chart-container{min-height:400px}he-horizontal-buttons-group ::ng-deep .tabs-list{border-bottom:none}.legend-container{background:#f5f7f9}.legend-color{width:20px;height:20px;border-radius:3px}.legend-color-dashed{width:0px;border-left:2px dashed red;height:20px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: HorizontalButtonsGroupComponent, selector: "he-horizontal-buttons-group", inputs: ["buttons", "defaultSelectedIndex", "removable", "styles"], outputs: ["itemRemoved"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: SitesManagementChartComponent, decorators: [{
             type: Component$1,
@@ -14292,5 +14343,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, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
+export { ARRAY_DELIMITER, ApplyPurePipe, BarChartComponent, BibliographiesSearchConfirmComponent, BlankNodeStateComponent, BlankNodeStateNoticeComponent, BlankNodeValueDeltaComponent, CapitalizePipe, ChartComponent, ChartConfigurationDirective, ChartExportButtonComponent, ChartTooltipComponent, ClickOutsideDirective, ClipboardComponent, CollapsibleBoxComponent, ColorPalette, CompoundDirective, CompoundPipe, ControlValueAccessor, CycleNodesKeyGroup, CyclesCompletenessComponent, CyclesEmissionsChartComponent, CyclesFunctionalUnitMeasureComponent, CyclesMetadataComponent, CyclesNodesComponent, CyclesNodesTimelineComponent, CyclesResultComponent, DataTableComponent, DefaultPipe, DeltaColour, DistributionChartComponent, DrawerContainerComponent, DurationPipe, EllipsisPipe, EngineModelsLinkComponent, EngineModelsLookupInfoComponent, EngineModelsStageComponent, EngineModelsStageDeepComponent, EngineModelsStageDeepService, EngineModelsVersionLinkComponent, EngineOrchestratorEditComponent, EngineRequirementsFormComponent, FileSizePipe, FileUploadErrorKeys, FilesErrorSummaryComponent, FilesFormComponent, FilesFormEditableComponent, FilesUploadErrorsComponent, FilterAccordionComponent, GUIDE_ENABLED, GetPipe, GlossaryMigrationFormat, GuideOverlayComponent, HESvgIconComponent, HE_API_BASE_URL, HE_CALCULATIONS_BASE_URL, HE_MAP_LOADED, HeAuthService, HeCommonService, HeEngineService, HeGlossaryService, HeMendeleyService, HeNodeCsvService, HeNodeService, HeNodeStoreService, HeSchemaService, HeSearchService, HeToastService, HorizontalBarChartComponent, HorizontalButtonsGroupComponent, ImpactAssessmentsGraphComponent, ImpactAssessmentsIndicatorBreakdownChartComponent, ImpactAssessmentsIndicatorsChartComponent, ImpactAssessmentsProductsComponent, IsArrayPipe, IsObjectPipe, IssueConfirmComponent, KeyToLabelPipe, Level, LineChartComponent, LinkKeyValueComponent, LogStatus, LongPressDirective, MAX_RESULTS, MapsDrawingComponent, MapsDrawingConfirmComponent, MendeleySearchResult, MobileShellComponent, NavigationMenuComponent, NoExtPipe, NodeAggregatedComponent, NodeAggregatedInfoComponent, NodeAggregatedQualityScoreComponent, NodeCsvExportConfirmComponent, NodeCsvPreviewComponent, NodeCsvSelectHeadersComponent, NodeIconComponent, NodeJsonldComponent, NodeJsonldSchemaComponent, NodeKeyState, NodeLinkComponent, NodeLogsFileComponent, NodeLogsModelsComponent, NodeLogsTimeComponent, NodeMissingLookupFactorsComponent, NodeQualityScore, NodeRecommendationsComponent, NodeSelectComponent, NodeValueDetailsComponent, PluralizePipe, PopoverComponent, PopoverConfirmComponent, PrecisionPipe, RelatedNodeResult, RemoveMarkdownPipe, RepeatPipe, Repository, ResizedDirective, ResizedEvent, ResponsiveService, SchemaInfoComponent, SchemaVersionLinkComponent, SearchExtendComponent, ShelfDialogComponent, ShellComponent, SitesManagementChartComponent, SitesMapsComponent, SitesNodesComponent, SkeletonTextComponent, SocialTagsComponent, SortByPipe, SortSelectComponent, TagsInputDirective, Template, TermsPropertyContentComponent, TermsSubClassOfContentComponent, TermsUnitsDescriptionComponent, ThousandSuffixesPipe, ThousandsPipe, TimesPipe, ToastComponent, UncapitalizePipe, addPolygonToFeature, afterBarDrawPlugin, allCountriesQuery, allGroups, allOptions, arrayValue, availableProperties, backgroundHoverPlugin, baseApiUrl, baseUrl, bottom, buildSummary, bytesSize, calculateCycleDuration, calculateCycleDurationEnabled, calculateCycleStartDate, calculateCycleStartDateEnabled, capitalize, changelogUrl, clustererImage, code, colorToRgba, compoundToHtml, computeKeys, computeTerms, contactUsEmail, contactUsLink, convertToSvg, coordinatesToPoint, copyObject, countriesQuery, createMarker, cropsQuery, d3ellipse, d3wrap, dataPathLabel, dataPathToKey, defaultFeature, defaultLabel, defaultSuggestionType, defaultSvgIconSize, definitionToSchemaType, distinctUntilChangedDeep, downloadFile, downloadPng, downloadSvg, ellipsis, engineGitBaseUrl, engineGitUrl, errorHasError, errorHasWarning, errorText, evaluateSuccess, exportAsSVG, exportFormats, externalLink, externalNodeLink, fillColor, fillStyle, filterBlankNode$1 as filterBlankNode, filterError, filterParams, findConfigModels, findMatchingModel, findModels, findNodeModel, findOrchestratorModel, findProperty, findPropertyById, flatFilterData, flatFilterNode, formatCustomErrorMessage, formatDate, formatError, formatPropertyError, formatter, getColor, getDatesBetween, gitBranch, gitHome, gitlabRawUrl, glossaryBaseUrl, glossaryLink, groupChanged, groupLogsByModel, groupLogsByTerm, groupNodesByTerm, groupdLogsByKey, grouppedKeys, grouppedValueKeys, groupsLogsByFields, guideModelUrl, guideNamespace, guidePageId, handleAPIError, handleGuideEvent, hasError, hasValidationError, hasWarning, hexToRgba, iconSizes, icons, ignoreKeys$2 as ignoreKeys, initialFilterState, injectResizeEvent$, inputGroupsTermTypes, isAddPropertyEnabled, isChrome, isDateBetween, isEqual, isExternal, isGroupVisible, isKeyClosedVisible, isKeyHidden, isMaxStage, isMethodModelAllowed, isMigrationError, isMissingOneOfError, isMissingPropertyError, isNonNodeModelKey, isSchemaIri, isScrolledBelow, isState, isTermTypeAllowed, isValidKey, keyToDataPath, levels, listColor, listColorContinuous, listColorWithAlpha, loadMapApi, loadSvgSprite, locationQuery, logToCsv$1 as logToCsv, logValueArray, logsKey, lollipopChartPlugin, lookupUrl, mapFilterData, mapsUrl, markerIcon, markerPie, matchAggregatedQuery, matchAggregatedValidatedQuery, matchBoolPrefixQuery, matchCountry, matchExactQuery, matchGlobalRegion, matchId, matchNameNormalized, matchNestedKey, matchPhrasePrefixQuery, matchPhraseQuery, matchPrimaryProductQuery, matchQuery, matchRegex, matchRegion, matchTermType, matchType, maxAreaSize, measurementValue, mergeDataWithHeaders, methodTierOrder, migrationErrorMessage, migrationsUrl, missingNodeErrors, modelCount, modelKeyParams, modelParams, models, multiMatchQuery, nestedProperty, nestingEnabled, nestingTypeEnabled, nodeAvailableProperties, nodeById, nodeColours$1 as nodeColours, nodeDataState, nodeId, nodeIds, nodeLink, nodeLinkEnabled, nodeLinkTypeEnabled, nodeLogsUrl, nodeQualityScoreColor, nodeQualityScoreLevel, nodeQualityScoreMaxDefault, nodeQualityScoreOrder, nodeSecondaryColours, nodeToAggregationFilename, nodeType, nodeTypeDataState, nodeTypeIcon, nodeUrl, nodeUrlParams, nodeVersion, nodesByState, nodesByType, numberGte, optionsFromGroup, parentKey, parentProperty, parseColor, parseData, parseDataPath, parseLines, parseMessage$1 as parseMessage, parseNewValue, pluralize, pointToCoordinates, polygonBounds, polygonToCoordinates, polygonToMap, polygonsFromFeature, populateWithTrackIdsFilterData, postGuideEvent, primaryProduct, productsQuery, propertyError, propertyId, recursiveProperties, refToSchemaType, refreshPropertyKeys, regionsQuery, registerChart, repeat, reportIssueLink, reportIssueUrl, safeJSONParse, safeJSONStringify, schemaBaseUrl, schemaDataBaseUrl, schemaLink, schemaRequiredProperties, schemaTypeToDefaultValue, scrollToEl, scrollTop, searchFilterData, searchableTypes, siblingProperty, singleProperty, siteTooBig, siteTypeToColor, siteTypeToIcon, sortProperties, sortedDates, strokeColor, strokeStyle, suggestMatchQuery, suggestQuery, takeAfterViewInit, termLocation, termLocationName, termProperties, termTypeLabel, toSnakeCase, toThousands, typeToNewProperty, typeaheadFocus, uncapitalize, uniqueDatesBetween, updateProperties, valueTypeToDefault, waitFor, wildcardQuery };
 //# sourceMappingURL=hestia-earth-ui-components.mjs.map