@hestia-earth/ui-components 0.41.51 → 0.41.53

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

@@ -6582,14 +6582,37 @@ class CyclesEmissionsCategoryService {
     constructor() {
         this.data = loadResourceKey('emission-groupings.json');
         this.categoryLabel = (key) => (key ? keyToLabel(key.replace(/category/gi, '')) : 'Unset');
+        /**
+         * The list of all available categories.
+         */
         this.categories = Object.keys(this.data)
             .filter(key => key.toLowerCase().endsWith('category'))
             .map(key => ({
             key,
             label: this.categoryLabel(key)
         }));
-        this.emissionCategories = (id) => Object.keys(this.data[id]).filter(key => !!this.data[id][key]);
-        this.emissionCategoryValue = (id, category) => this.data[id]?.[category];
+        /**
+         * Return all possible values for a specific Category.
+         *
+         * @param category {string} The specific category
+         * @returns List of all values possible for this Category.
+         */
+        this.categoryValues = (category) => this.data[category];
+        /**
+         * Return the different categories available for a single Emission.
+         *
+         * @param emissionId The `@id` of the Emission
+         * @returns List of categories.
+         */
+        this.emissionCategories = (emissionId) => Object.keys(this.data[emissionId]).filter(key => !!this.data[emissionId][key]);
+        /**
+         * Return the Category value for a specific Emission and Category.
+         *
+         * @param emissionId  The `@id` of the Emission
+         * @param category The Category
+         * @returns The value
+         */
+        this.emissionCategoryValue = (emissionId, category) => this.data[emissionId]?.[category];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: CyclesEmissionsCategoryService, providedIn: 'root' }); }
@@ -6771,9 +6794,13 @@ class ContributionChartComponent {
          * Show the legend below the chart.
          */
         this.showLegend = input(true, ...(ngDevMode ? [{ debugName: "showLegend" }] : []));
+        /**
+         * Override the default configuration.
+         */
         this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
         this.minHeight = input(100, ...(ngDevMode ? [{ debugName: "minHeight" }] : []));
         this.maxHeight = input(400, ...(ngDevMode ? [{ debugName: "maxHeight" }] : []));
+        this.height = input(0, ...(ngDevMode ? [{ debugName: "height" }] : []));
         /**
          * Category to group the data by.
          */
@@ -6781,7 +6808,7 @@ class ContributionChartComponent {
         this.chart = viewChild.required(ChartComponent);
         this.tooltip = viewChild.required(ChartTooltipComponent);
         this.exporting = computed(() => this.chart()?.exporting(), ...(ngDevMode ? [{ debugName: "exporting" }] : []));
-        this.height = computed(() => chartHeight$1(this.minHeight(), this.maxHeight(), this.labels()?.length ?? 0), ...(ngDevMode ? [{ debugName: "height" }] : []));
+        this.chartHeight = computed(() => this.height() || chartHeight$1(this.minHeight(), this.maxHeight(), this.labels()?.length ?? 0), ...(ngDevMode ? [{ debugName: "chartHeight" }] : []));
         this.hasNegativeContributions = computed(() => this.displayData()?.some(value => value.values.some(v => v < 0)), ...(ngDevMode ? [{ debugName: "hasNegativeContributions" }] : []));
         this.displayData = computed(() => {
             const category = this.category();
@@ -6873,12 +6900,12 @@ class ContributionChartComponent {
         return downloadFile(this.csvContent(), `${title}-contribution.csv`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContributionChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ContributionChartComponent, isStandalone: true, selector: "he-contribution-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }, { propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], exportAs: ["contributionChart"], ngImport: i0, template: "<div class=\"chart-area-border\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"height()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n  </he-chart>\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ContributionChartComponent, isStandalone: true, selector: "he-contribution-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, category: { classPropertyName: "category", publicName: "category", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chart", first: true, predicate: ChartComponent, descendants: true, isSignal: true }, { propertyName: "tooltip", first: true, predicate: ChartTooltipComponent, descendants: true, isSignal: true }], exportAs: ["contributionChart"], ngImport: i0, template: "<div [class.chart-area-border]=\"showLegend()\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"chartHeight()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n  </he-chart>\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config", "showExportButton"], exportAs: ["chart"] }, { kind: "component", type: ChartTooltipComponent, selector: "he-chart-tooltip", inputs: ["tooltipFn"], exportAs: ["chartTooltip"] }, { kind: "component", type: BarChartLegendComponent, selector: "he-bar-chart-legend", inputs: ["data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ContributionChartComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-contribution-chart', exportAs: 'contributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div class=\"chart-area-border\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"height()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n  </he-chart>\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
+            args: [{ selector: 'he-contribution-chart', exportAs: 'contributionChart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent, ChartTooltipComponent, BarChartLegendComponent], template: "<div [class.chart-area-border]=\"showLegend()\">\n  <he-chart\n    [data]=\"dataConfig()\"\n    [config]=\"configuration()\"\n    [showExportButton]=\"showExportButton()\"\n    [style.height.px]=\"chartHeight()\">\n    <he-chart-tooltip [tooltipFn]=\"tooltipFn\" />\n  </he-chart>\n</div>\n\n@if (showLegend()) {\n  <he-bar-chart-legend [data]=\"displayData()\" />\n}\n", styles: [":host{display:block}he-chart{height:400px}he-bar-chart-legend ::ng-deep .breakdown-legend--color{border-radius:3px}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], category: [{ type: i0.Input, args: [{ isSignal: true, alias: "category", required: false }] }], chart: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartComponent), { isSignal: true }] }], tooltip: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ChartTooltipComponent), { isSignal: true }] }] } });
 
 const colors = {
     darkBlue: 'rgba(25, 57, 87, 1)',
@@ -14662,7 +14689,7 @@ class ImpactAssessmentsIndicatorsChartComponent {
         });
     }
     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 } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, 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()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap 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    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\"\n    [category]=\"selectedCategory()\"\n    [showExportButton]=\"false\"\n    [showLegend]=\"false\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\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: "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: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "showExportButton", "showLegend", "config", "minHeight", "maxHeight", "category"], exportAs: ["contributionChart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], 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 } }, viewQueries: [{ propertyName: "barChart", first: true, predicate: HorizontalBarChartComponent, descendants: true, isSignal: true }, { propertyName: "contributionChart", first: true, predicate: ContributionChartComponent, 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()\" [chartExportFn]=\"chartExportFn\" [exportFormats]=\"exportFormats()\" />\n\n  <ng-content />\n</div>\n\n@if (terms()?.length) {\n  <div class=\"is-flex is-align-items-center is-flex-wrap-wrap 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    @if (enableContributions()) {\n      <div class=\"control is-expanded is-flex-shrink-0\">\n        <div class=\"select is-fullwidth is-small\">\n          <select [(ngModel)]=\"selectedCategory\" name=\"selectedCategory\">\n            <option [ngValue]=\"undefined\">No Disaggregation</option>\n            @for (category of categories; track category.key) {\n              <option [value]=\"category.key\">{{ category.label }}</option>\n            }\n          </select>\n        </div>\n      </div>\n    }\n  </div>\n}\n\n@if (enableContributions()) {\n  <he-contribution-chart\n    class=\"is-relative h-100\"\n    [label]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [labels]=\"chartLabels()\"\n    [category]=\"selectedCategory()\"\n    [showExportButton]=\"false\"\n    [showLegend]=\"false\" />\n} @else {\n  <he-horizontal-bar-chart\n    class=\"is-relative h-100\"\n    [title]=\"selectedTerm()?.units\"\n    [data]=\"chartData()\"\n    [showExportButton]=\"false\" />\n}\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: "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: ContributionChartComponent, selector: "he-contribution-chart", inputs: ["data", "labels", "label", "showExportButton", "showLegend", "config", "minHeight", "maxHeight", "height", "category"], exportAs: ["contributionChart"] }, { 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,