@hestia-earth/ui-components 0.32.33 → 0.32.34

package/chart/distribution-chart/distribution-chart.component.d.ts

@@ -0,0 +1,24 @@
+import { Signal } from '@angular/core';
+import { ChartConfiguration, ChartData } from 'chart.js';
+import * as i0 from "@angular/core";
+export interface HistogramChartDataItem {
+    label: string;
+    values: number[];
+    color?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+}
+export declare class DistributionChartComponent {
+    protected readonly distribution: import("@angular/core").InputSignal<number[]>;
+    protected readonly value: import("@angular/core").InputSignal<number>;
+    protected readonly label: import("@angular/core").InputSignal<string>;
+    protected readonly nbBins: import("@angular/core").InputSignal<number>;
+    protected readonly config: import("@angular/core").InputSignal<Partial<ChartConfiguration>>;
+    private readonly groupedData;
+    private readonly singlePoint;
+    private readonly defaultConfig;
+    protected readonly dataConfig: Signal<ChartData>;
+    protected readonly configuration: Signal<Partial<ChartConfiguration>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DistributionChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DistributionChartComponent, "he-distribution-chart", never, { "distribution": { "alias": "distribution"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "nbBins": { "alias": "nbBins"; "required": false; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

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

@@ -646,7 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 type: Input
             }] } });
 
-const defaultSettings$2 = Object.freeze({
+const defaultSettings$3 = Object.freeze({
     options: {
         responsive: true,
         maintainAspectRatio: false,
@@ -660,7 +660,7 @@ class ChartComponent {
         this.data = input({});
         this.config = input({});
         this.configuration = computed(() => ({
-            ...merge({}, defaultSettings$2, this.config()),
+            ...merge({}, defaultSettings$3, this.config()),
             data: this.data()
         }));
     }
@@ -672,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'he-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  <canvas [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}\n"] }]
         }] });
 
-const defaultSettings$1 = Object.freeze({
+const defaultSettings$2 = Object.freeze({
     type: 'horizontalBar',
     options: {
         events: [],
@@ -753,7 +753,7 @@ class BarChartComponent {
             datasets: this.defaultDatasets(),
             labels: this.data().map(({ label }) => label)
         }));
-        this.configuration = computed(() => merge({}, defaultSettings$1, this.defaultConfig(), this.config()));
+        this.configuration = computed(() => merge({}, defaultSettings$2, this.defaultConfig(), this.config()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: BarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: BarChartComponent, isStandalone: true, selector: "he-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, datasets: { classPropertyName: "datasets", publicName: "datasets", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -763,7 +763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'he-bar-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"] }]
         }] });
 
-const defaultSettings = {
+const defaultSettings$1 = {
     type: 'line',
     options: {
         scales: {
@@ -785,7 +785,7 @@ class LineChartComponent {
         this.dataConfig = computed(() => ({
             datasets: this.datasets()
         }));
-        this.configuration = computed(() => merge({}, defaultSettings, this.config()));
+        this.configuration = computed(() => merge({}, defaultSettings$1, this.config()));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: LineChartComponent, isStandalone: true, selector: "he-line-chart", inputs: { datasets: { classPropertyName: "datasets", publicName: "datasets", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -7288,6 +7288,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             args: [{ selector: 'he-cycles-functional-unit-measure', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<span class=\"is-nowrap has-text-ellipsis\" [attr.title]=\"functionalUnit()\">\n  @switch (functionalUnit()) {\n    @case (CycleFunctionalUnit['1 ha']) {\n      1 hectare\n    }\n    @default {\n      relative\n    }\n  }\n</span>\n", styles: [":host{display:inline-block}\n"] }]
         }] });
 
+const colors = {
+    darkBlue: 'rgba(25, 57, 87, 1)',
+    lightBlue: 'rgba(132, 160, 220, 1)'
+};
+const opaqueColor = (color, opacity = 0.5) => color.replace(', 1)', `, ${opacity})`);
+const defaultSettings = Object.freeze({
+    type: 'line',
+    options: {
+        events: [],
+        responsive: true,
+        tooltips: {
+            enabled: false
+        },
+        legend: {
+            display: false,
+            align: 'center'
+        },
+        scales: {
+            yAxes: [
+                {
+                    display: true,
+                    position: 'left',
+                    gridLines: {
+                        display: true
+                    },
+                    ticks: {
+                        beginAtZero: true,
+                        crossAlign: 'center'
+                    }
+                }
+            ]
+        }
+    }
+});
+const joinXLabel = ' to ';
+const createDynamicHistogramData = (values, numberOfBins) => {
+    if (values.length === 0) {
+        return { labels: [], frequencies: [] };
+    }
+    // Find the minimum and maximum values in the dataset
+    const min = Math.min(...values);
+    const max = Math.max(...values);
+    // Calculate the size of each bin
+    const binSize = (max - min) / numberOfBins;
+    // Create an array to hold the bin frequencies, initialized to zero
+    const frequencies = new Array(numberOfBins).fill(0);
+    // Create labels for the chart based on the bin ranges
+    const labels = [];
+    for (let i = 0; i < numberOfBins; i++) {
+        const binStart = min + i * binSize;
+        const binEnd = binStart + binSize;
+        labels.push([binStart, binEnd].join(joinXLabel));
+        // Count data points for the current bin
+        values.forEach(point => {
+            if (point >= binStart && point < binEnd) {
+                frequencies[i]++;
+            }
+        });
+    }
+    // Ensure the maximum value is included in the last bin
+    frequencies[numberOfBins - 1] += values.filter(p => p === max).length;
+    return { labels, frequencies };
+};
+const createSinglePointDataset = (labels, pointValue) => {
+    // Create an array with the same length as the labels, filled with nulls.
+    const pointData = new Array(labels.length).fill(null);
+    // Find the index of the bin that contains the pointValue.
+    // We parse the bin range from the label string (e.g., '900-1000').
+    const binIndex = labels.findIndex(label => {
+        // Split the label to get the bin's min and max values
+        const [minStr, maxStr] = label.split(joinXLabel);
+        const binMin = parseFloat(minStr);
+        const binMax = parseFloat(maxStr);
+        return pointValue >= binMin && pointValue < binMax;
+    });
+    // If a valid bin is found, place the point value in the array.
+    if (binIndex !== -1) {
+        // We'll set the single point's Y-value to its own value here,
+        // but you could also set it to a frequency or a custom value.
+        pointData[binIndex] = 1;
+    }
+    return pointData;
+};
+class DistributionChartComponent {
+    constructor() {
+        this.distribution = input();
+        this.value = input();
+        this.label = input('Distribution');
+        this.nbBins = input(10);
+        this.config = input({});
+        this.groupedData = computed(() => createDynamicHistogramData(this.distribution() ?? [], this.nbBins()));
+        this.singlePoint = computed(() => createSinglePointDataset(this.groupedData()?.labels, this.value()));
+        this.defaultConfig = computed(() => ({
+            options: {
+                scales: {
+                    xAxes: [
+                        {
+                            display: true,
+                            gridLines: {
+                                offsetGridLines: true
+                            },
+                            ticks: {
+                                min: 0,
+                                userCallback: (label) => label
+                                    .split(joinXLabel)
+                                    .map(parseFloat)
+                                    .map(v => toPrecision(v, 2))
+                                    .map(v => v.toExponential())
+                                    .join('-')
+                            },
+                            scaleLabel: {
+                                display: true,
+                                labelString: this.label()
+                            }
+                        }
+                    ],
+                    yAxes: [
+                        {
+                            ticks: {
+                                fontColor: '#4A4A4A',
+                                fontFamily: 'Lato',
+                                fontSize: 10,
+                                fontStyle: '400'
+                            },
+                            scaleLabel: {
+                                display: true,
+                                labelString: 'Frequency of values'
+                            }
+                        }
+                    ]
+                }
+            }
+        }));
+        this.dataConfig = computed(() => ({
+            datasets: [
+                this.distribution()
+                    ? [
+                        {
+                            label: 'Distribution',
+                            data: this.groupedData().frequencies,
+                            backgroundColor: opaqueColor(colors.lightBlue),
+                            borderColor: colors.lightBlue,
+                            borderWidth: 1,
+                            fill: true,
+                            pointRadius: 0,
+                            type: 'bar'
+                        },
+                        {
+                            label: 'Distribution',
+                            data: this.groupedData().frequencies,
+                            backgroundColor: opaqueColor(colors.darkBlue),
+                            borderColor: colors.darkBlue,
+                            borderWidth: 1,
+                            fill: false,
+                            pointRadius: 0,
+                            type: 'line'
+                        }
+                    ]
+                    : null,
+                this.singlePoint()?.length
+                    ? {
+                        label: 'Value',
+                        data: this.singlePoint(),
+                        fill: false,
+                        borderColor: colors.darkBlue,
+                        backgroundColor: colors.darkBlue,
+                        pointRadius: 4,
+                        showLine: false,
+                        type: 'line',
+                        tension: 0
+                    }
+                    : null
+            ]
+                .filter(Boolean)
+                .flat(),
+            labels: this.groupedData().labels
+        }));
+        this.configuration = computed(() => merge({}, defaultSettings, this.defaultConfig(), this.config()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DistributionChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.4", type: DistributionChartComponent, isStandalone: true, selector: "he-distribution-chart", inputs: { distribution: { classPropertyName: "distribution", publicName: "distribution", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, nbBins: { classPropertyName: "nbBins", publicName: "nbBins", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: ChartComponent, selector: "he-chart", inputs: ["data", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DistributionChartComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-distribution-chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartComponent], template: "<he-chart [data]=\"dataConfig()\" [config]=\"configuration()\" />\n", styles: [":host{display:block}\n"] }]
+        }] });
+
 // TODO: compute from the list of unique properties
 const additionalKeys = [
     'key',
@@ -7298,7 +7485,6 @@ const additionalKeys = [
     'emissionDuration',
     'observations',
     'statsDefinition',
-    'term',
     'source',
     'variety',
     'reliability',
@@ -7344,7 +7530,7 @@ class NodeValueDetailsComponent {
         this.schemaService = inject(HeSchemaService);
         this.localStorage = inject(LocalStorageService);
         this.schemaBaseUrl = schemaBaseUrl();
-        this.keys = ['value', ...grouppedValueKeys];
+        this.keys = ['term', 'value', ...grouppedValueKeys];
         this.additionalKeys = additionalKeys;
         this.schemas = toSignal(this.schemaService.schemas$.pipe(startWith(loadSchemas())));
         this.schemaKeys = computed(() => Object.entries(this.schemas()?.[this.type()]?.properties ?? {})
@@ -7366,6 +7552,10 @@ class NodeValueDetailsComponent {
         this.type = computed(() => this.node()?.['@type']);
         this.type$ = toObservable(this.type);
         this.showInline = computed(() => this.nodes()?.length === 1);
+        this.showDistribution = signal(undefined);
+        this.chartDistribution = computed(() => this.showDistribution()?.distribution.flat());
+        this.chartValue = computed(() => Array.isArray(this.showDistribution()?.value) ? this.showDistribution()?.value?.[0] : this.showDistribution()?.value);
+        this.chartLabel = computed(() => `${this.node()?.term.name} in ${this.node()?.term.units}`);
         combineLatest([this.type$, this.schemaKeys$])
             .pipe(filter(([type, schemaKeys]) => !!type && !!schemaKeys?.length))
             .subscribe(([type]) => {
@@ -7412,11 +7602,20 @@ class NodeValueDetailsComponent {
         this.updateKeys(selectedKeys);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeValueDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeValueDetailsComponent, isStandalone: true, selector: "he-node-value-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                <he-link-key-value\n                  [node]=\"node\"\n                  [nodeType]=\"nodeType()\"\n                  [dataState]=\"dataState()\"\n                  [dataKey]=\"dataKey()\"\n                  [key]=\"key\"\n                  [defaultValue]=\"defaultValue(key)\" />\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataState", "dataKey", "key", "defaultValue"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: NodeValueDetailsComponent, isStandalone: true, selector: "he-node-value-details", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, nodeType: { classPropertyName: "nodeType", publicName: "nodeType", isSignal: true, isRequired: true, transformFunction: null }, dataState: { classPropertyName: "dataState", publicName: "dataState", isSignal: true, isRequired: true, transformFunction: null }, dataKey: { classPropertyName: "dataKey", publicName: "dataKey", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  @if (node().distribution?.length) {\n    <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n      <b>distribution</b>\n    </a>\n    <span class=\"pr-2\">:</span>\n    <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\" />\n  </div>\n}\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: LinkKeyValueComponent, selector: "he-link-key-value", inputs: ["node", "nodeType", "dataState", "dataKey", "key", "defaultValue"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "component", type: DistributionChartComponent, selector: "he-distribution-chart", inputs: ["distribution", "value", "label", "nbBins", "config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: NodeValueDetailsComponent, decorators: [{
             type: Component$1,
-            args: [{ selector: 'he-node-value-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkDrag, CdkDropList, LinkKeyValueComponent, HESvgIconComponent, NgbTooltipModule, NgbDropdownModule], template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                <he-link-key-value\n                  [node]=\"node\"\n                  [nodeType]=\"nodeType()\"\n                  [dataState]=\"dataState()\"\n                  [dataKey]=\"dataKey()\"\n                  [key]=\"key\"\n                  [defaultValue]=\"defaultValue(key)\" />\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}\n"] }]
+            args: [{ selector: 'he-node-value-details', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgTemplateOutlet,
+                        CdkDrag,
+                        CdkDropList,
+                        LinkKeyValueComponent,
+                        HESvgIconComponent,
+                        NgbTooltipModule,
+                        NgbDropdownModule,
+                        DistributionChartComponent
+                    ], template: "@if (showInline()) {\n  @for (key of keys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n  @for (key of additionalKeys; track key) {\n    <he-link-key-value\n      [node]=\"node()\"\n      [nodeType]=\"nodeType()\"\n      [dataState]=\"dataState()\"\n      [dataKey]=\"dataKey()\"\n      [key]=\"key\" />\n  }\n\n  @if (node().distribution?.length) {\n    <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + node['@type'] + '#distribution'\" target=\"_blank\">\n      <b>distribution</b>\n    </a>\n    <span class=\"pr-2\">:</span>\n    <ng-container *ngTemplateOutlet=\"distributionContent; context: { node: node() }\" />\n  }\n} @else {\n  <he-link-key-value\n    [node]=\"node()\"\n    [nodeType]=\"nodeType()\"\n    [dataState]=\"dataState()\"\n    [dataKey]=\"dataKey()\"\n    key=\"term\" />\n\n  <div class=\"columns is-p-0 is-my-0 is-overflow-visible\">\n    <div class=\"column is-p-0 is-my-0\"></div>\n    <div class=\"column is-p-0 is-my-0 is-narrow is-overflow-visible\">\n      <div ngbDropdown class=\"is-overflow-visible\" autoClose=\"outside\" placement=\"bottom-end\">\n        <button\n          ngbDropdownToggle\n          class=\"button is-small is-ghost has-text-white\"\n          type=\"button\"\n          aria-controls=\"config-menu\">\n          <span>Customise fields</span>\n          <span class=\"icon is-small\">\n            <he-svg-icon name=\"settings\" aria-hidden=\"true\" />\n          </span>\n        </button>\n\n        <div ngbDropdownMenu id=\"config-menu\">\n          <div\n            class=\"dropdown-content is-overflow-y-auto\"\n            (click)=\"$event.stopPropagation()\"\n            cdkDropList\n            (cdkDropListDropped)=\"dropTableKey($event)\">\n            @for (key of tableKeys(); track key.key; let keyIndex = $index) {\n              <div class=\"dropdown-item cdk-drag-item\" cdkDrag>\n                <div class=\"field is-relative\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"selector\"\n                    [id]=\"key.key\"\n                    [name]=\"key.key\"\n                    [checked]=\"key.selected\"\n                    (change)=\"onTableKeyChange(key, keyIndex, $event.target.checked)\" />\n                  <label class=\"is-pl-2\" [for]=\"key.key\">{{ key.key }}</label>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"table-container is-mt-2\">\n    <table class=\"table is-dark is-narrow is-striped\">\n      <thead>\n        @for (key of visibleTableKeys(); track key) {\n          <th>\n            <a class=\"is-dark\" [href]=\"schemaBaseUrl + '/' + type() + '#' + key.split('.')[0]\" target=\"_blank\">\n              <b>{{ key.includes('.') ? key.split('.')[1] : key }}</b>\n            </a>\n          </th>\n        }\n      </thead>\n      <tbody>\n        @for (node of nodes(); track node) {\n          <tr>\n            @for (key of visibleTableKeys(); track key) {\n              <td>\n                @if (key === 'distribution') {\n                  <ng-container *ngTemplateOutlet=\"distributionContent; context: { node }\" />\n                } @else {\n                  <he-link-key-value\n                    [node]=\"node\"\n                    [nodeType]=\"nodeType()\"\n                    [dataState]=\"dataState()\"\n                    [dataKey]=\"dataKey()\"\n                    [key]=\"key\"\n                    [defaultValue]=\"defaultValue(key)\" />\n                }\n              </td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n}\n\n<ng-template #distributionContent let-node=\"node\">\n  @if (node.distribution?.length) {\n    @if (showDistribution() === node) {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(undefined)\">Hide</a>\n    } @else {\n      <a class=\"has-text-white\" (click)=\"showDistribution.set(node)\">Show</a>\n    }\n  } @else {\n    <span>N/A</span>\n  }\n</ng-template>\n\n@if (chartDistribution()) {\n  <div class=\"has-background-white is-mt-2 is-p-2 is-rounded | chart-container\">\n    <he-distribution-chart\n      [distribution]=\"chartDistribution()\"\n      [value]=\"chartValue()\"\n      [label]=\"chartLabel()\"\n      [nbBins]=\"10\" />\n  </div>\n}\n", styles: ["table{background-color:transparent}table::ng-deep he-link-key-value>a:first-child,table::ng-deep he-link-key-value>a:first-child+span{display:none}.dropdown-content{max-height:300px}.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;list-style:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-item{cursor:move}.chart-container{border-radius:3px}.chart-container he-distribution-chart{height:250px;min-width:400px}\n"] }]
         }], ctorParameters: () => [] });
 
 class CyclesNodesTimelineComponent {
@@ -9221,6 +9420,7 @@ const customErrorMessage = {
   Use Transformations if needed to represent additional processing steps rather than new Cycles.`
         : `The primary Product must not also be an Input into the cycle.`,
     'must have a primary processing operation': () => `For processing cycles, a primary Operation must be specified, it should reflect the main process in the Cycle.`,
+    'primaryPercent not allowed on this siteType': ({ params }) => `The ${schemaLink('Practice#primaryPercent', 'primaryPercent')} can only be used on ${schemaLink('Site#siteType', 'siteType')} ${params?.expected?.map(code).join(' or ')}.`,
     'at least one landCover practice must match an equivalent product': ({ params }) => `You have specified ${params?.current.map(code).join(', ')} as ${code(TermTermType.landCover)} practice, but none of the recorded products match. Please add the practices for ${params?.expected
         .map(code)
         .join(', ')}, or remove all ${code(TermTermType.landCover)} practices.`,
@@ -12293,7 +12493,7 @@ class SelectComponent extends ControlValueAccessor {
                 provide: SELECT_TOKEN,
                 useExisting: forwardRef(() => SelectComponent)
             }
-        ], queries: [{ propertyName: "nodes", predicate: NODE_ELEMENT_TOKEN, descendants: true }, { propertyName: "options", predicate: SELECT_OPTION_TOKEN, descendants: true }], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #origin=\"cdkOverlayOrigin\" cdkOverlayOrigin>\n  <ng-container\n    *ngTemplateOutlet=\"\n      selectTemplate ?? defaultSelectTemplate;\n      context: {\n        $implicit: this,\n        value,\n        displayValue,\n        labelState,\n        icon,\n        placeholder,\n        searchPlaceholder,\n        width,\n        valueTemplate\n      }\n    \" />\n</div>\n\n<ng-template\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n  [cdkConnectedOverlayOffsetX]=\"overlayOptions?.offsetX ?? -2\"\n  [cdkConnectedOverlayOffsetY]=\"overlayOptions?.offsetY ?? 4\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop', 'pointer-none']\"\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop>\n  <div [style.width]=\"width\" class=\"select-panel\" (clickOutside)=\"close()\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-template #defaultSelectTemplate>\n  <div class=\"is-flex is-justify-content-flex-start is-flex-direction-column | select-host\">\n    <div class=\"control is-flex is-justify-content-space-between is-align-items-center\">\n      <ng-container [ngSwitch]=\"labelState\">\n        <input\n          #input\n          (input)=\"onHandleInput($event)\"\n          *ngSwitchCase=\"'search'\"\n          [placeholder]=\"searchPlaceholder\"\n          class=\"select-search | is-transparent\" />\n\n        <ng-container *ngSwitchCase=\"'value'\">\n          <ng-container *ngTemplateOutlet=\"valueTemplate ?? defaultValueTemplate; context: { $implicit: value }\" />\n        </ng-container>\n      </ng-container>\n\n      <span class=\"drop-down-icon ml-2\">\n        <he-svg-icon [name]=\"icon\" />\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultValueTemplate>\n  <span [ngClass]=\"{ empty: !value }\" class=\"has-text-secondary | selected-value\">\n    {{ displayValue || placeholder }}\n  </span>\n</ng-template>\n", styles: ["::ng-deep:root{--select-border-radius: 6px;--select-min-width: 250px;--select-shadow: rgba(0, 0, 0, .1) 0px 4px 6px -1px, rgba(0, 0, 0, .06) 0px 2px 4px -1px}.select-host{padding:5px 10px;box-sizing:border-box;min-width:var(--select-min-width);border-radius:var(--select-border-radius);border:1px solid #f5f5f5;background:#fff;box-shadow:var(--select-shadow)}.select-host:hover{cursor:pointer;background-color:var(--color-background, #eceff1)}.select-host.select-panel-open{position:relative;z-index:1001;border-radius:var(--select-border-radius) var(--select-border-radius) 0 0;box-shadow:none}::ng-deep .is-disabled .select-host{pointer-events:none;-webkit-user-select:none;user-select:none;background:#f5f5f580;border-color:#dbdbdb;box-shadow:none;color:#dbdbdb}.select-search{border:none;outline:none;background:transparent}.select-panel{box-sizing:border-box;border-radius:0 0 var(--select-border-radius, 6px) var(--select-border-radius, 6px);border:1px solid #f5f5f5;background-color:#fff;transform-origin:top;max-height:350px;overflow:auto;box-shadow:var(--select-shadow)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "nodes", predicate: NODE_ELEMENT_TOKEN, descendants: true }, { propertyName: "options", predicate: SELECT_OPTION_TOKEN, descendants: true }], viewQueries: [{ propertyName: "searchInputEl", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div #origin=\"cdkOverlayOrigin\" cdkOverlayOrigin>\n  <ng-container\n    *ngTemplateOutlet=\"\n      selectTemplate ?? defaultSelectTemplate;\n      context: {\n        $implicit: this,\n        value,\n        displayValue,\n        labelState,\n        icon,\n        placeholder,\n        searchPlaceholder,\n        width,\n        valueTemplate\n      }\n    \" />\n</div>\n\n<ng-template\n  (backdropClick)=\"close()\"\n  (detach)=\"close()\"\n  [cdkConnectedOverlayOffsetX]=\"overlayOptions?.offsetX ?? -2\"\n  [cdkConnectedOverlayOffsetY]=\"overlayOptions?.offsetY ?? 4\"\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayBackdropClass]=\"['cdk-overlay-transparent-backdrop', 'pointer-none']\"\n  cdkConnectedOverlay\n  cdkConnectedOverlayHasBackdrop>\n  <div [style.width]=\"width\" class=\"select-panel\" (clickOutside)=\"close()\">\n    <ng-content />\n  </div>\n</ng-template>\n\n<ng-template #defaultSelectTemplate>\n  <div class=\"is-flex is-justify-content-flex-start is-flex-direction-column | select-host\">\n    <div class=\"control is-flex is-justify-content-space-between is-align-items-center\">\n      <ng-container [ngSwitch]=\"labelState\">\n        <input\n          #input\n          (input)=\"onHandleInput($event)\"\n          *ngSwitchCase=\"'search'\"\n          [placeholder]=\"searchPlaceholder\"\n          class=\"select-search | is-transparent\" />\n\n        <ng-container *ngSwitchCase=\"'value'\">\n          <ng-container *ngTemplateOutlet=\"valueTemplate ?? defaultValueTemplate; context: { $implicit: value }\" />\n        </ng-container>\n      </ng-container>\n\n      <span class=\"drop-down-icon ml-2\">\n        <he-svg-icon [name]=\"icon\" />\n      </span>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultValueTemplate>\n  <span [ngClass]=\"{ empty: !value }\" class=\"has-text-secondary | selected-value\">\n    {{ displayValue || placeholder }}\n  </span>\n</ng-template>\n", styles: ["::ng-deep:root{--select-border-radius: 6px;--select-min-width: 250px;--select-shadow: rgba(0, 0, 0, .1) 0px 4px 6px -1px, rgba(0, 0, 0, .06) 0px 2px 4px -1px}.select-host{padding:5px 10px;box-sizing:border-box;min-width:var(--select-min-width);border-radius:var(--select-border-radius);border:1px solid #f5f5f5;background:#fff;box-shadow:var(--select-shadow)}.select-host:hover{cursor:pointer;background-color:var(--color-background, #eceff1)}.select-host.select-panel-open{position:relative;z-index:1001;border-radius:var(--select-border-radius) var(--select-border-radius) 0 0;box-shadow:none}::ng-deep .is-disabled .select-host{pointer-events:none;-webkit-user-select:none;user-select:none;background:#f5f5f580;border-color:#dbdbdb;box-shadow:none;color:#dbdbdb}.select-search{border:none;outline:none;background:transparent}.select-panel{box-sizing:border-box;border-radius:0 0 var(--select-border-radius, 6px) var(--select-border-radius, 6px);border:1px solid #f5f5f5;background-color:#fff;transform-origin:top;max-height:350px;overflow:auto;box-shadow:var(--select-shadow)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideListenAfter"], outputs: ["clickOutside"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component$1,
@@ -12308,8 +12508,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             useExisting: forwardRef(() => SelectComponent)
                         }
                     ], changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CdkOverlayOrigin,
                         NgTemplateOutlet,
+                        CdkOverlayOrigin,
                         CdkConnectedOverlay,
                         ClickOutsideDirective,
                         NgSwitch,
@@ -13019,6 +13219,9 @@ class FilterAccordionComponent extends ControlValueAccessor {
         const countFn = this.getOptionCountFn();
         return countFn ? countFn(value) : 1;
     }
+    isItemEffectivelyDisabled(item, parentDisabled = false) {
+        return this.disabled() || item.disabled || parentDisabled;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FilterAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: FilterAccordionComponent, isStandalone: true, selector: "he-filter-accordion", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", isSignal: true, isRequired: false, transformFunction: null }, getOptionCountFn: { classPropertyName: "getOptionCountFn", publicName: "getOptionCountFn", isSignal: true, isRequired: false, transformFunction: null }, preserveOptionsOnSelection: { classPropertyName: "preserveOptionsOnSelection", publicName: "preserveOptionsOnSelection", isSignal: true, isRequired: false, transformFunction: null }, maintainPanelStates: { classPropertyName: "maintainPanelStates", publicName: "maintainPanelStates", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChanged: "selectionChanged" }, providers: [
             {
@@ -13027,7 +13230,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
                 multi: true
             },
             FilterStore
-        ], usesInheritance: true, ngImport: i0, template: "<div>\n  <div\n    class=\"is-flex is-justify-content-space-between gap-13 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <h3 class=\"title is-size-6 has-text-secondary mr-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\n          container=\"body\"></he-svg-icon>\n      }\n    </div>\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"disabled()\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-grey transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n            </div>\n\n            <div\n              class=\"filter-accordion__panel-content\"\n              [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n              @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\n                <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                  <div class=\"control is-expanded has-icons-right\">\n                    <input\n                      type=\"text\"\n                      class=\"input is-secondary is-small search-input\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      (input)=\"groupState.searchTerm = $any($event.target).value\" />\n                    <a\n                      class=\"icon is-small is-right\"\n                      [class.is-hidden]=\"!groupState.searchTerm\"\n                      (click)=\"groupState.searchTerm = ''\">\n                      <he-svg-icon name=\"xmark\" />\n                    </a>\n                    <a class=\"icon is-small is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                      <he-svg-icon name=\"search\" />\n                    </a>\n                  </div>\n                </div>\n              }\n\n              <div>\n                @for (\n                  child of getFilteredDirectChildren(item, groupState.searchTerm);\n                  track child.trackId || child.label;\n                  let childLast = $last\n                ) {\n                  @if (child.type === 'group') {\n                    <!-- Nested group -->\n                    @if (panelStates[child.label]) {\n                      @let childState = panelStates[child.label];\n                      <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                        <div [class.is-active]=\"childState.expanded\">\n                          <div\n                            class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                            (click)=\"childState.expanded = !childState.expanded\">\n                            <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isGroupFullySelected(child)\"\n                                [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                (change)=\"toggleGroup(child)\"\n                                [disabled]=\"disabled()\" />\n                            </label>\n\n                            <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                              {{ removeCountFromLabel(child.label) }}\n                            </span>\n\n                            <he-svg-icon\n                              class=\"has-text-grey transition-transform\"\n                              [class.is-rotated-180]=\"childState.expanded\"\n                              [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                          </div>\n\n                          <div\n                            class=\"filter-accordion__panel-content\"\n                            [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n                            @if (childState.expanded && optionsFromGroup(child).length >= 5) {\n                              <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                                <div class=\"control is-expanded has-icons-right\">\n                                  <input\n                                    type=\"text\"\n                                    class=\"input is-secondary is-small search-input\"\n                                    placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                    [value]=\"childState.searchTerm || ''\"\n                                    (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                  <a\n                                    class=\"icon is-small is-right\"\n                                    [class.is-hidden]=\"!childState.searchTerm\"\n                                    (click)=\"childState.searchTerm = ''\">\n                                    <he-svg-icon name=\"xmark\" />\n                                  </a>\n                                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                    <he-svg-icon name=\"search\" />\n                                  </a>\n                                </div>\n                              </div>\n                            }\n                            <div>\n                              @for (\n                                nestedOption of getFilteredOptions(\n                                  child,\n                                  childState.searchTerm || groupState.searchTerm\n                                );\n                                track nestedOption.trackId || nestedOption.label;\n                                let nestedLast = $last\n                              ) {\n                                <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                  <label\n                                    class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n                                    <input\n                                      type=\"checkbox\"\n                                      [checked]=\"isOptionSelected(nestedOption.value)\"\n                                      (change)=\"toggleOption(nestedOption.value)\"\n                                      [disabled]=\"disabled()\"\n                                      class=\"mr-3\" />\n\n                                    <span class=\"is-flex-grow-1\">\n                                      {{ removeCountFromLabel(nestedOption.label) }}\n                                    </span>\n\n                                    <span class=\"has-text-grey is-size-7 ml-2\">\n                                      ({{ getOptionCount(nestedOption.value) }})\n                                    </span>\n                                  </label>\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- Direct option -->\n                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                      <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isOptionSelected(child.value)\"\n                          (change)=\"toggleOption(child.value)\"\n                          [disabled]=\"disabled()\"\n                          class=\"mr-3\" />\n\n                        <span class=\"is-flex-grow-1\">\n                          {{ removeCountFromLabel(child.label) }}\n                        </span>\n\n                        <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(child.value) }})</span>\n                      </label>\n                    </div>\n                  }\n                }\n\n                @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                  <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                    No results found for \"{{ groupState.searchTerm }}\"\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-full is-size-7 has-text-grey-dark\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isOptionSelected(item.value)\"\n              (change)=\"toggleOption(item.value)\"\n              [disabled]=\"disabled()\"\n              class=\"mr-3\" />\n\n            <span class=\"is-flex-grow-1\">\n              {{ removeCountFromLabel(item.label) }}\n            </span>\n          </label>\n          <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(item.value) }})</span>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [".gap-13{gap:13px}.clear-button{color:#4c7194}.accordion-row{padding:4px 0}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{max-height:500px;overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}@media screen and (max-width: 768px){.filter-accordion__panel-content--expanded{max-height:400px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { 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 }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div>\n  <div\n    class=\"is-flex is-justify-content-space-between gap-13 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <h3 class=\"title is-size-6 has-text-secondary mr-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\n          container=\"body\"></he-svg-icon>\n      }\n    </div>\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-grey transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n            </div>\n\n            <div\n              class=\"filter-accordion__panel-content\"\n              [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n              @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\n                <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                  <div class=\"control is-expanded has-icons-right\">\n                    <input\n                      type=\"text\"\n                      class=\"input is-secondary is-small search-input\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                (input)=\"groupState.searchTerm = $any($event.target).value\" />\n                    <a\n                      class=\"icon is-small is-right\"\n                      [class.is-hidden]=\"!groupState.searchTerm\"\n                      (click)=\"groupState.searchTerm = ''\">\n                      <he-svg-icon name=\"xmark\" />\n                    </a>\n                    <a class=\"icon is-small is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                      <he-svg-icon name=\"search\" />\n                    </a>\n                  </div>\n                </div>\n              }\n\n              <div>\n                @for (\n                  child of getFilteredDirectChildren(item, groupState.searchTerm);\n                  track child.trackId || child.label;\n                  let childLast = $last\n                ) {\n                  @if (child.type === 'group') {\n                    <!-- Nested group -->\n                    @if (panelStates[child.label]) {\n                      @let childState = panelStates[child.label];\n                      <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                        <div [class.is-active]=\"childState.expanded\">\n                          <div\n                            class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                            (click)=\"childState.expanded = !childState.expanded\">\n                            <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isGroupFullySelected(child)\"\n                                [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                (change)=\"toggleGroup(child)\"\n                                [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                            </label>\n\n                            <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                              {{ removeCountFromLabel(child.label) }}\n                            </span>\n\n                            <he-svg-icon\n                              class=\"has-text-grey transition-transform\"\n                              [class.is-rotated-180]=\"childState.expanded\"\n                              [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                          </div>\n\n                          <div\n                            class=\"filter-accordion__panel-content\"\n                            [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n                            @if (childState.expanded && optionsFromGroup(child).length >= 5) {\n                              <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                                <div class=\"control is-expanded has-icons-right\">\n                                  <input\n                                    type=\"text\"\n                                    class=\"input is-secondary is-small search-input\"\n                                    placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                    [value]=\"childState.searchTerm || ''\"\n                                    [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                            (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                  <a\n                                    class=\"icon is-small is-right\"\n                                    [class.is-hidden]=\"!childState.searchTerm\"\n                                    (click)=\"childState.searchTerm = ''\">\n                                    <he-svg-icon name=\"xmark\" />\n                                  </a>\n                                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                    <he-svg-icon name=\"search\" />\n                                  </a>\n                                </div>\n                              </div>\n                            }\n                            <div>\n                              @for (\n                                nestedOption of getFilteredOptions(\n                                  child,\n                                  childState.searchTerm || groupState.searchTerm\n                                );\n                                track nestedOption.trackId || nestedOption.label;\n                                let nestedLast = $last\n                              ) {\n                                <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                  <label\n                                    class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n                                    <input\n                                      type=\"checkbox\"\n                                      [checked]=\"isOptionSelected(nestedOption.value)\"\n                                      (change)=\"toggleOption(nestedOption.value)\"\n                                      [disabled]=\"isItemEffectivelyDisabled(nestedOption, isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item)))\"\n                                      class=\"mr-3\" />\n\n                                    <span class=\"is-flex-grow-1\">\n                                      {{ removeCountFromLabel(nestedOption.label) }}\n                                    </span>\n\n                                    <span class=\"has-text-grey is-size-7 ml-2\">\n                                      ({{ getOptionCount(nestedOption.value) }})\n                                    </span>\n                                  </label>\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- Direct option -->\n                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                      <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isOptionSelected(child.value)\"\n                          (change)=\"toggleOption(child.value)\"\n                          [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                          class=\"mr-3\" />\n\n                        <span class=\"is-flex-grow-1\">\n                          {{ removeCountFromLabel(child.label) }}\n                        </span>\n\n                        <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(child.value) }})</span>\n                      </label>\n                    </div>\n                  }\n                }\n\n                @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                  <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                    No results found for \"{{ groupState.searchTerm }}\"\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-full is-size-7 has-text-grey-dark\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isOptionSelected(item.value)\"\n              (change)=\"toggleOption(item.value)\"\n              [disabled]=\"isItemEffectivelyDisabled(item)\"\n              class=\"mr-3\" />\n\n            <span class=\"is-flex-grow-1\">\n              {{ removeCountFromLabel(item.label) }}\n            </span>\n          </label>\n          <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(item.value) }})</span>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [".gap-13{gap:13px}.clear-button{color:#4c7194}.accordion-row{padding:4px 0}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{max-height:500px;overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}@media screen and (max-width: 768px){.filter-accordion__panel-content--expanded{max-height:400px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation", "svgClass"] }, { 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: "19.1.4", ngImport: i0, type: FilterAccordionComponent, decorators: [{
             type: Component$1,
@@ -13038,7 +13241,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                             multi: true
                         },
                         FilterStore
-                    ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip], template: "<div>\n  <div\n    class=\"is-flex is-justify-content-space-between gap-13 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <h3 class=\"title is-size-6 has-text-secondary mr-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\n          container=\"body\"></he-svg-icon>\n      }\n    </div>\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"disabled()\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-grey transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n            </div>\n\n            <div\n              class=\"filter-accordion__panel-content\"\n              [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n              @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\n                <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                  <div class=\"control is-expanded has-icons-right\">\n                    <input\n                      type=\"text\"\n                      class=\"input is-secondary is-small search-input\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      (input)=\"groupState.searchTerm = $any($event.target).value\" />\n                    <a\n                      class=\"icon is-small is-right\"\n                      [class.is-hidden]=\"!groupState.searchTerm\"\n                      (click)=\"groupState.searchTerm = ''\">\n                      <he-svg-icon name=\"xmark\" />\n                    </a>\n                    <a class=\"icon is-small is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                      <he-svg-icon name=\"search\" />\n                    </a>\n                  </div>\n                </div>\n              }\n\n              <div>\n                @for (\n                  child of getFilteredDirectChildren(item, groupState.searchTerm);\n                  track child.trackId || child.label;\n                  let childLast = $last\n                ) {\n                  @if (child.type === 'group') {\n                    <!-- Nested group -->\n                    @if (panelStates[child.label]) {\n                      @let childState = panelStates[child.label];\n                      <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                        <div [class.is-active]=\"childState.expanded\">\n                          <div\n                            class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                            (click)=\"childState.expanded = !childState.expanded\">\n                            <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isGroupFullySelected(child)\"\n                                [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                (change)=\"toggleGroup(child)\"\n                                [disabled]=\"disabled()\" />\n                            </label>\n\n                            <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                              {{ removeCountFromLabel(child.label) }}\n                            </span>\n\n                            <he-svg-icon\n                              class=\"has-text-grey transition-transform\"\n                              [class.is-rotated-180]=\"childState.expanded\"\n                              [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                          </div>\n\n                          <div\n                            class=\"filter-accordion__panel-content\"\n                            [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n                            @if (childState.expanded && optionsFromGroup(child).length >= 5) {\n                              <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                                <div class=\"control is-expanded has-icons-right\">\n                                  <input\n                                    type=\"text\"\n                                    class=\"input is-secondary is-small search-input\"\n                                    placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                    [value]=\"childState.searchTerm || ''\"\n                                    (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                  <a\n                                    class=\"icon is-small is-right\"\n                                    [class.is-hidden]=\"!childState.searchTerm\"\n                                    (click)=\"childState.searchTerm = ''\">\n                                    <he-svg-icon name=\"xmark\" />\n                                  </a>\n                                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                    <he-svg-icon name=\"search\" />\n                                  </a>\n                                </div>\n                              </div>\n                            }\n                            <div>\n                              @for (\n                                nestedOption of getFilteredOptions(\n                                  child,\n                                  childState.searchTerm || groupState.searchTerm\n                                );\n                                track nestedOption.trackId || nestedOption.label;\n                                let nestedLast = $last\n                              ) {\n                                <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                  <label\n                                    class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n                                    <input\n                                      type=\"checkbox\"\n                                      [checked]=\"isOptionSelected(nestedOption.value)\"\n                                      (change)=\"toggleOption(nestedOption.value)\"\n                                      [disabled]=\"disabled()\"\n                                      class=\"mr-3\" />\n\n                                    <span class=\"is-flex-grow-1\">\n                                      {{ removeCountFromLabel(nestedOption.label) }}\n                                    </span>\n\n                                    <span class=\"has-text-grey is-size-7 ml-2\">\n                                      ({{ getOptionCount(nestedOption.value) }})\n                                    </span>\n                                  </label>\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- Direct option -->\n                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                      <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isOptionSelected(child.value)\"\n                          (change)=\"toggleOption(child.value)\"\n                          [disabled]=\"disabled()\"\n                          class=\"mr-3\" />\n\n                        <span class=\"is-flex-grow-1\">\n                          {{ removeCountFromLabel(child.label) }}\n                        </span>\n\n                        <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(child.value) }})</span>\n                      </label>\n                    </div>\n                  }\n                }\n\n                @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                  <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                    No results found for \"{{ groupState.searchTerm }}\"\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-full is-size-7 has-text-grey-dark\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isOptionSelected(item.value)\"\n              (change)=\"toggleOption(item.value)\"\n              [disabled]=\"disabled()\"\n              class=\"mr-3\" />\n\n            <span class=\"is-flex-grow-1\">\n              {{ removeCountFromLabel(item.label) }}\n            </span>\n          </label>\n          <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(item.value) }})</span>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [".gap-13{gap:13px}.clear-button{color:#4c7194}.accordion-row{padding:4px 0}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{max-height:500px;overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}@media screen and (max-width: 768px){.filter-accordion__panel-content--expanded{max-height:400px}}\n"] }]
+                    ], imports: [FormsModule, ReactiveFormsModule, HESvgIconComponent, NgbTooltip], template: "<div>\n  <div\n    class=\"is-flex is-justify-content-space-between gap-13 is-align-items-flex-start is-flex-direction-column has-border-bottom\">\n    <div class=\"is-flex is-align-items-center\">\n      <h3 class=\"title is-size-6 has-text-secondary mr-2 mb-0\">{{ title() }}</h3>\n      @if (tooltip()) {\n        <he-svg-icon\n          name=\"info-circle\"\n          class=\"has-text-grey\"\n          [ngbTooltip]=\"tooltip()\"\n          placement=\"top\"\n          triggers=\"hover\"\n          container=\"body\"></he-svg-icon>\n      }\n    </div>\n    @if (showClearAll()) {\n      <span class=\"is-clickable is-size-7 has-text-weight-normal is-italic clear-button\" (click)=\"clearAll()\">\n        Clear all\n      </span>\n    }\n  </div>\n\n  <div>\n    @for (item of filterStore.filteredData(); track item.trackId || item.label) {\n      @if (item.type === 'group') {\n        @if (panelStates[item.label]) {\n          @let groupState = panelStates[item.label];\n          <div class=\"has-border-bottom\" [class.is-active]=\"groupState.expanded\">\n            <div\n              class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n              (click)=\"groupState.expanded = !groupState.expanded\">\n              <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isGroupFullySelected(item)\"\n                  [indeterminate]=\"isGroupPartiallySelected(item)\"\n                  (change)=\"toggleGroup(item)\"\n                  [disabled]=\"isItemEffectivelyDisabled(item)\" />\n              </label>\n\n              <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                {{ removeCountFromLabel(item.label) }}\n              </span>\n\n              <he-svg-icon\n                class=\"has-text-grey transition-transform\"\n                [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n            </div>\n\n            <div\n              class=\"filter-accordion__panel-content\"\n              [class.filter-accordion__panel-content--expanded]=\"groupState.expanded\">\n              @if (groupState.expanded && getDirectOptionsCount(item) > 5) {\n                <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                  <div class=\"control is-expanded has-icons-right\">\n                    <input\n                      type=\"text\"\n                      class=\"input is-secondary is-small search-input\"\n                      placeholder=\"Search {{ removeCountFromLabel(item.label) }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                (input)=\"groupState.searchTerm = $any($event.target).value\" />\n                    <a\n                      class=\"icon is-small is-right\"\n                      [class.is-hidden]=\"!groupState.searchTerm\"\n                      (click)=\"groupState.searchTerm = ''\">\n                      <he-svg-icon name=\"xmark\" />\n                    </a>\n                    <a class=\"icon is-small is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                      <he-svg-icon name=\"search\" />\n                    </a>\n                  </div>\n                </div>\n              }\n\n              <div>\n                @for (\n                  child of getFilteredDirectChildren(item, groupState.searchTerm);\n                  track child.trackId || child.label;\n                  let childLast = $last\n                ) {\n                  @if (child.type === 'group') {\n                    <!-- Nested group -->\n                    @if (panelStates[child.label]) {\n                      @let childState = panelStates[child.label];\n                      <div class=\"pl-5\" [class.has-border-bottom]=\"!childLast\">\n                        <div [class.is-active]=\"childState.expanded\">\n                          <div\n                            class=\"is-flex is-align-items-center is-clickable has-background-hover accordion-row\"\n                            (click)=\"childState.expanded = !childState.expanded\">\n                            <label class=\"checkbox mr-3\" (click)=\"$event.stopPropagation()\">\n                              <input\n                                type=\"checkbox\"\n                                [checked]=\"isGroupFullySelected(child)\"\n                                [indeterminate]=\"isGroupPartiallySelected(child)\"\n                                (change)=\"toggleGroup(child)\"\n                                [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\" />\n                            </label>\n\n                            <span class=\"is-flex-grow-1 has-text-weight-medium has-text-grey-dark is-size-7\">\n                              {{ removeCountFromLabel(child.label) }}\n                            </span>\n\n                            <he-svg-icon\n                              class=\"has-text-grey transition-transform\"\n                              [class.is-rotated-180]=\"childState.expanded\"\n                              [name]=\"childState.expanded ? 'chevron-up' : 'chevron-down'\"></he-svg-icon>\n                          </div>\n\n                          <div\n                            class=\"filter-accordion__panel-content\"\n                            [class.filter-accordion__panel-content--expanded]=\"childState.expanded\">\n                            @if (childState.expanded && optionsFromGroup(child).length >= 5) {\n                              <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                                <div class=\"control is-expanded has-icons-right\">\n                                  <input\n                                    type=\"text\"\n                                    class=\"input is-secondary is-small search-input\"\n                                    placeholder=\"Search {{ removeCountFromLabel(child.label) }}\"\n                                    [value]=\"childState.searchTerm || ''\"\n                                    [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                            (input)=\"childState.searchTerm = $any($event.target).value\" />\n                                  <a\n                                    class=\"icon is-small is-right\"\n                                    [class.is-hidden]=\"!childState.searchTerm\"\n                                    (click)=\"childState.searchTerm = ''\">\n                                    <he-svg-icon name=\"xmark\" />\n                                  </a>\n                                  <a class=\"icon is-small is-right\" [class.is-hidden]=\"childState.searchTerm\">\n                                    <he-svg-icon name=\"search\" />\n                                  </a>\n                                </div>\n                              </div>\n                            }\n                            <div>\n                              @for (\n                                nestedOption of getFilteredOptions(\n                                  child,\n                                  childState.searchTerm || groupState.searchTerm\n                                );\n                                track nestedOption.trackId || nestedOption.label;\n                                let nestedLast = $last\n                              ) {\n                                <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!nestedLast\">\n                                  <label\n                                    class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n                                    <input\n                                      type=\"checkbox\"\n                                      [checked]=\"isOptionSelected(nestedOption.value)\"\n                                      (change)=\"toggleOption(nestedOption.value)\"\n                                      [disabled]=\"isItemEffectivelyDisabled(nestedOption, isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item)))\"\n                                      class=\"mr-3\" />\n\n                                    <span class=\"is-flex-grow-1\">\n                                      {{ removeCountFromLabel(nestedOption.label) }}\n                                    </span>\n\n                                    <span class=\"has-text-grey is-size-7 ml-2\">\n                                      ({{ getOptionCount(nestedOption.value) }})\n                                    </span>\n                                  </label>\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- Direct option -->\n                    <div class=\"pl-5 accordion-row\" [class.has-border-bottom]=\"!childLast\">\n                      <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-size-7 has-text-grey-dark\">\n                        <input\n                          type=\"checkbox\"\n                          [checked]=\"isOptionSelected(child.value)\"\n                          (change)=\"toggleOption(child.value)\"\n                          [disabled]=\"isItemEffectivelyDisabled(child, isItemEffectivelyDisabled(item))\"\n                          class=\"mr-3\" />\n\n                        <span class=\"is-flex-grow-1\">\n                          {{ removeCountFromLabel(child.label) }}\n                        </span>\n\n                        <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(child.value) }})</span>\n                      </label>\n                    </div>\n                  }\n                }\n\n                @if (getFilteredDirectChildren(item, groupState.searchTerm).length === 0 && groupState.searchTerm) {\n                  <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n                    No results found for \"{{ groupState.searchTerm }}\"\n                  </div>\n                }\n              </div>\n            </div>\n          </div>\n        }\n      }\n\n      @if (item.type === 'option') {\n        <div class=\"is-flex is-justify-content-space-between has-border-bottom accordion-row\">\n          <label class=\"checkbox is-flex is-align-items-center is-fullwidth is-full is-size-7 has-text-grey-dark\">\n            <input\n              type=\"checkbox\"\n              [checked]=\"isOptionSelected(item.value)\"\n              (change)=\"toggleOption(item.value)\"\n              [disabled]=\"isItemEffectivelyDisabled(item)\"\n              class=\"mr-3\" />\n\n            <span class=\"is-flex-grow-1\">\n              {{ removeCountFromLabel(item.label) }}\n            </span>\n          </label>\n          <span class=\"has-text-grey is-size-7 ml-2\">({{ getOptionCount(item.value) }})</span>\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: [".gap-13{gap:13px}.clear-button{color:#4c7194}.accordion-row{padding:4px 0}.filter-accordion__panel-content{max-height:0;overflow:hidden;transition:max-height .3s ease-out}.filter-accordion__panel-content--expanded{max-height:500px;overflow-y:auto}.has-background-hover-light:hover{background-color:#fafafa}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s}@media screen and (max-width: 768px){.filter-accordion__panel-content--expanded{max-height:400px}}\n"] }]
         }], ctorParameters: () => [] });
 
 const sortedPoints = (values) => Object.entries(values)