@hestia-earth/ui-components 0.41.31 → 0.41.33

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

@@ -33,11 +33,11 @@ import { GoogleMap, MapMarker, MapPolygon } from '@angular/google-maps';
 import { Meta, DomSanitizer } from '@angular/platform-browser';
 import removeMd from 'remove-markdown';
 import orderBy from 'lodash.orderby';
+import merge$1 from 'lodash.merge';
 import { Chart, BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale } from 'chart.js';
 import C2S from 'canvas-to-svg';
 import 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import merge$1 from 'lodash.merge';
 import { headersFromCsv, toCsv as toCsv$1, toJson, toCsvPivot, ErrorKeys } from '@hestia-earth/schema-convert';
 import { isCSVIncluded, isDefaultCSVSelected } from '@hestia-earth/json-schema/schema-utils';
 import { recommendedProperties, loadSchemas } from '@hestia-earth/json-schema';
@@ -5651,156 +5651,462 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
             args: [{ selector: 'he-bibliographies-search-confirm', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgbHighlight, NgTemplateOutlet, HESvgIconComponent], template: "<div class=\"modal is-large is-active\">\n  <div class=\"modal-background\"></div>\n  <div class=\"modal-card\">\n    <header class=\"modal-card-head\">\n      <p class=\"modal-card-title\">Search Bibliographies</p>\n      <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"cancel()\"></button>\n    </header>\n    <section class=\"modal-card-body\">\n      <form [formGroup]=\"formGroup\" novalidate>\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded has-icons-right\">\n            <input\n              class=\"input search-input\"\n              [attr.placeholder]=\"'Search bibliography by ' + searchBy()\"\n              formControlName=\"search\"\n              name=\"bibliography\"\n              autocomplete=\"off\"\n              (focus)=\"searchFocus($event)\" />\n            <a class=\"icon is-small is-right\" [class.is-hidden]=\"loading()\" (click)=\"resetSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n\n            <span class=\"icon is-right has-text-grey-dark\" [class.is-hidden]=\"!loading()\">\n              <he-svg-icon name=\"loading\" animation=\"spin\" size=\"20\" />\n            </span>\n          </div>\n        </div>\n      </form>\n\n      <div class=\"is-mt-2\">\n        <span [class.is-hidden]=\"loading() || !searchControl?.value || hasResults()\">\n          No bibliographies found matching query.\n        </span>\n\n        <ul>\n          @for (result of results(); track result) {\n            <li>\n              <a\n                class=\"is-block p-1 search-result\"\n                (click)=\"selectedResult.set(result)\"\n                [class.is-active]=\"selectedResult() === result\">\n                <ngb-highlight [result]=\"result.bibliography?.title ?? result.title\" [term]=\"searchControl?.value\" />\n                <span class=\"px-1\">-</span>\n                <span class=\"px-1\">\n                  <i>{{ result.name }}</i>\n                </span>\n                @if (result.bibliography?.documentDOI || result.documentDOI) {\n                  <span class=\"px-1\">\n                    -\n                    <b>documentDOI:</b>\n                  </span>\n                }\n                <ngb-highlight\n                  [result]=\"result.bibliography?.documentDOI ?? result.documentDOI\"\n                  [term]=\"searchControl?.value\" />\n                @if (result.bibliography?.scopus || result.scopus) {\n                  <span class=\"px-1\">\n                    -\n                    <b>scopus:</b>\n                  </span>\n                }\n                <ngb-highlight [result]=\"result.bibliography?.scopus ?? result.scopus\" [term]=\"searchControl?.value\" />\n                <span>\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      mendeleyLink;\n                      context: { $implicit: result.bibliography?.mendeleyID ?? result.mendeleyID }\n                    \" />\n                </span>\n              </a>\n            </li>\n          }\n        </ul>\n      </div>\n    </section>\n    <footer class=\"modal-card-foot\">\n      <button class=\"button is-primary\" (click)=\"confirm()\" [disabled]=\"!selectedResult()\">\n        <span>Confirm</span>\n      </button>\n      <button class=\"button is-ghost\" (click)=\"cancel()\">\n        <span>Close</span>\n      </button>\n    </footer>\n  </div>\n</div>\n\n<ng-template #mendeleyLink let-id>\n  @if (id) {\n    <a [href]=\"'https://www.mendeley.com/catalogue/' + id\" target=\"_blank\" (click)=\"$event.stopPropagation()\">\n      <he-svg-icon name=\"external-link\" class=\"ml-2\" />\n    </a>\n  }\n</ng-template>\n", styles: ["ngb-highlight,span{vertical-align:middle;white-space:normal;width:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { search: [{ type: i0.Input, args: [{ isSignal: true, alias: "search", required: false }] }, { type: i0.Output, args: ["searchChange"] }], searchSources: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchSources", required: false }] }, { type: i0.Output, args: ["searchSourcesChange"] }], searchBibliographies: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBibliographies", required: false }] }, { type: i0.Output, args: ["searchBibliographiesChange"] }], searchBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchBy", required: false }] }, { type: i0.Output, args: ["searchByChange"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
-// show label 8px from bar
-const gapX = 8;
-const placementGap = (placement) => (placement === 'right' ? +gapX : -gapX);
-const placementX = (x, chart, data, placement) => placement === 'right' ? (!Array.isArray(data) && data < 0 ? positionAtZero(chart) : x) : x;
-const positionAtZero = (chart) => chart.scales.x.getPixelForValue(0);
-const defaultBarDrawSettings = {
-    placement: 'right',
-    xPosFn: (x, index, width, chart, data, placement) => (isEmpty(data) ? positionAtZero(chart) : placementX(x, chart, data, placement)) + placementGap(placement),
-    yPosFn: y => y + 3,
-    colorFn: (m, index, chart, data) => (isUndefined(data) ? '#b5b5b5' : '#4a4a4a'),
-    textFn: ({ data }) => `${data}`,
-    font: '14px Lato',
-    maxWidth: 90,
-    emptyValueLabel: 'No data'
-};
-const drawText = (ctx, { text, font, fillStyle, placement, xPos, yPos, maxWidth }) => {
-    ctx.font = font;
-    ctx.fillStyle = fillStyle;
-    ctx.textAlign = placement === 'left' ? 'right' : 'left';
-    if (Array.isArray(text)) {
-        ctx.fillText(text[0], xPos, yPos - 5, maxWidth);
-        ctx.fillText(text[1], xPos, yPos + 5, maxWidth);
+class ChartConfigurationDirective {
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._observer = new ResizeObserver(() => this.resize());
+        /**
+         * The chart configuration.
+         * This is used to initialize the chart.
+         *
+         * @param configuration The chart configuration
+         */
+        this.chartConfiguration = input(...(ngDevMode ? [undefined, { debugName: "chartConfiguration" }] : []));
+        /**
+         * The container element of the chart.
+         * This is used to observe the size of the container and resize the chart accordingly. (chart.js update charts only on the window resize event)
+         * If not provided, the chart will not be resized.
+         *
+         * @param container The container element of the chart
+         */
+        this.chartContainer = input(...(ngDevMode ? [undefined, { debugName: "chartContainer" }] : []));
+        effect(onCleanup => {
+            const configuration = this.chartConfiguration();
+            untracked(() => {
+                this.removeChart();
+                if (configuration) {
+                    this._chart = new Chart(this._elementRef.nativeElement, configuration);
+                }
+            });
+            onCleanup(() => this.removeChart());
+        });
+        effect(onCleanup => {
+            if (this.chartContainer()) {
+                this._observer?.observe(this.chartContainer());
+            }
+            else {
+                this._observer?.disconnect();
+            }
+            onCleanup(() => this._observer?.disconnect());
+        });
     }
-    else {
-        ctx.fillText(text, xPos, yPos, maxWidth);
+    removeChart() {
+        const chart = this._chart || Chart.getChart(this._elementRef.nativeElement);
+        chart?.destroy();
+        this._chart = null;
     }
-};
-const afterBarDrawPlugin = settings => ({
-    id: ['afterBarDrawPlugin', settings?.placement].filter(Boolean).join('-'),
-    afterDatasetsDraw: (chart) => {
-        if (!chart.data.datasets?.length) {
-            return;
-        }
-        const { placement, xPosFn, yPosFn, colorFn, textFn, maxWidth, font, emptyValueLabel } = {
-            ...defaultBarDrawSettings,
-            ...(settings ?? {})
-        };
-        const { ctx, width, height } = chart;
-        ctx.save();
-        const meta = chart.getDatasetMeta(0);
-        const dataset = chart.data.datasets[0];
-        const elements = meta.data;
-        elements
-            .filter(element => !element.skip)
-            .forEach((element, index) => {
-            const { x, y, base } = element;
-            const label = chart.data.labels?.[index] ?? '';
-            const data = dataset.data[index];
-            // use min/max as both negative values would inverse the positions
-            const anchorX = placement === 'left' ? Math.min(base, x) : Math.max(base, x);
-            const xPos = xPosFn(anchorX, index, width, chart, data, placement);
-            const yPos = yPosFn(y, index, height, chart, data, placement);
-            const text = isUndefined(data) ? emptyValueLabel : textFn({ label, data }, index, chart);
-            text &&
-                drawText(ctx, {
-                    text,
-                    font,
-                    fillStyle: colorFn(element.options, index, chart, data),
-                    placement,
-                    xPos,
-                    yPos,
-                    maxWidth
-                });
-        });
-        ctx.restore();
+    get chart() {
+        return this._chart;
     }
-});
-
-const axisHoverPlugin = {
-    id: 'axisHover',
-    afterEvent(chart, args) {
-        const { event } = args;
-        const { maxDistance = 15, onHoverLabel } = (chart.config.options.plugins.axisHover ||
-            {});
-        const yScale = chart.scales.y;
-        const isOverYAxis = event.x >= yScale.left && event.x <= yScale.right;
-        const closestTick = isOverYAxis
-            ? yScale.getTicks().find((tick, index) => Math.abs(event.y - yScale.getPixelForTick(index)) < maxDistance)
-            : null;
-        const label = closestTick ? chart.data.labels[closestTick.value] : '';
-        onHoverLabel({ label, event });
+    resize() {
+        this._chart?.resize();
     }
-};
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartConfigurationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ChartConfigurationDirective, isStandalone: true, selector: "[chartConfiguration]", inputs: { chartConfiguration: { classPropertyName: "chartConfiguration", publicName: "chartConfiguration", isSignal: true, isRequired: false, transformFunction: null }, chartContainer: { classPropertyName: "chartContainer", publicName: "chartContainer", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["chart"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartConfigurationDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[chartConfiguration]',
+                    exportAs: 'chart'
+                }]
+        }], ctorParameters: () => [], propDecorators: { chartConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartConfiguration", required: false }] }], chartContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartContainer", required: false }] }] } });
 
-// ... createHoverGradient remains the same ...
-const createHoverGradient = (ctx, chartArea, color) => {
-    const gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0);
-    gradient.addColorStop(0, colorToRgba(color, 0.05));
-    gradient.addColorStop(0.5, colorToRgba(color, 0.12));
-    gradient.addColorStop(1, colorToRgba(color, 0.05));
-    return gradient;
-};
-// UPDATED: Use element properties instead of _model
-const calculateBarBounds = (element, indexAxis = 'y') => {
-    const { x, y, base, width, height } = element;
-    // Handle Horizontal Bars (indexAxis: 'y')
-    if (indexAxis === 'y') {
-        const barHeight = height; // Thickness of the bar
-        const barTop = y - barHeight / 2;
-        const barBottom = y + barHeight / 2;
-        const barLeft = Math.min(base, x);
-        const barRight = Math.max(base, x);
-        return { barLeft, barRight, barTop, barBottom, thickness: barHeight };
-    }
-    // Handle Vertical Bars (indexAxis: 'x')
-    else {
-        const barWidth = width; // Thickness of the bar
-        const barLeft = x - barWidth / 2;
-        const barRight = x + barWidth / 2;
-        const barTop = Math.min(base, y);
-        const barBottom = Math.max(base, y);
-        return { barLeft, barRight, barTop, barBottom, thickness: barWidth };
+const defaultChartWidth = 800;
+const defaultChartHeight = 600;
+const extractEssentialChartConfig = (config) => ({
+    type: config.type || 'bar',
+    data: config.data,
+    options: {
+        indexAxis: config.options?.indexAxis,
+        responsive: false,
+        maintainAspectRatio: false,
+        devicePixelRatio: 1,
+        animation: false,
+        animations: {
+            colors: false,
+            x: false,
+            y: false
+        },
+        transitions: {
+            active: {
+                animation: {
+                    duration: 0
+                }
+            }
+        },
+        plugins: {
+            legend: { display: false },
+            title: config.options.plugins?.title || { display: false }
+        },
+        scales: config.options.scales
     }
+});
+const stretchSvg = (svgString, width, height) => {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    const svgElement = doc.documentElement;
+    // Add 100px padding to ViewBox for overflow labels
+    svgElement.setAttribute('viewBox', `0 0 ${width + 100} ${height}`);
+    svgElement.setAttribute('width', '100%');
+    svgElement.setAttribute('height', '100%');
+    svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    return svgElement.outerHTML;
 };
-// UPDATED: Calculate shadow bounds based on the bounds we just found
-const calculateShadowBounds = (element, bounds, threshold) => {
-    return {
-        top: bounds.barTop - threshold,
-        bottom: bounds.barBottom + threshold,
-        left: bounds.barLeft, // Usually we expand Y (thickness), but keep X (length) capped at value
-        right: bounds.barRight,
-        width: bounds.barRight - bounds.barLeft,
-        height: bounds.barBottom + threshold - (bounds.barTop - threshold)
+const parseAfterDrawBarPlugins = (afterBarDrawConfig, units) => Array.isArray(afterBarDrawConfig)
+    ? afterBarDrawConfig.map(afterBarDrawPlugin)
+    : [
+        afterBarDrawPlugin({
+            textFn: ({ data }) => [toPrecision(Array.isArray(data) ? data[0] : data), units].filter(Boolean).join(' '),
+            emptyValueLabel: 'No data',
+            ...afterBarDrawConfig
+        })
+    ];
+const convertToSvg = (config, metadata = {}) => new Promise((resolve, reject) => {
+    const width = metadata.width || defaultChartWidth;
+    const height = metadata.height || defaultChartHeight;
+    // 1. Create the SVG Context
+    const svgContext = new C2S(width, height);
+    svgContext.setTransform = () => { };
+    svgContext.resetTransform = () => { };
+    svgContext.roundRect = function (x, y, w, h) {
+        this.rect(x, y, w, h);
     };
-};
-const drawHoverEffect = (ctx, chartArea, element, threshold, indexAxis) => {
-    // Access colors via options
-    const opts = element.options || null;
-    const barColor = (opts?.backgroundColor || opts?.borderColor || '#000000');
-    const color = parseColor(barColor);
-    const bounds = calculateBarBounds(element, indexAxis);
-    const shadow = calculateShadowBounds(element, bounds, threshold);
-    ctx.save();
-    // Draw Gradient Background
-    const gradient = createHoverGradient(ctx, { left: shadow.left, right: shadow.right }, color);
-    ctx.fillStyle = gradient;
-    ctx.fillRect(shadow.left, shadow.top, shadow.width, shadow.height);
-    // Draw Dashed Lines
-    drawHorizontalLines(ctx, { left: shadow.left, right: shadow.right }, shadow.top, shadow.bottom, color);
-    ctx.restore();
-};
-const drawHorizontalLines = (ctx, barArea, topY, bottomY, color) => {
-    ctx.strokeStyle = colorToRgba(color, 0.25);
-    ctx.lineWidth = 1;
-    ctx.setLineDash([5, 5]);
-    ctx.beginPath();
-    ctx.moveTo(barArea.left, topY);
-    ctx.lineTo(barArea.right, topY);
-    ctx.moveTo(barArea.left, bottomY);
-    ctx.lineTo(barArea.right, bottomY);
+    // 2. Mock the Canvas Element
+    const mockCanvas = document.createElement('canvas');
+    mockCanvas.width = width;
+    mockCanvas.height = height;
+    mockCanvas.style.width = `${width}px`;
+    mockCanvas.style.height = `${height}px`;
+    mockCanvas.getBoundingClientRect = () => ({
+        x: 0,
+        y: 0,
+        bottom: height,
+        height: height,
+        left: 0,
+        right: width,
+        top: 0,
+        width: width,
+        toJSON: () => { }
+    });
+    // Intercept getContext to return our SVG generator
+    mockCanvas.getContext = (type) => {
+        if (type === '2d') {
+            svgContext.canvas = mockCanvas;
+            return svgContext;
+        }
+        return null;
+    };
+    // 3. Prepare Config
+    const chartConfig = extractEssentialChartConfig(config);
+    // eslint-disable-next-line prefer-const
+    let chart;
+    chartConfig.options.animation = {
+        onComplete: () => {
+            try {
+                const svgString = svgContext.getSerializedSvg(true);
+                const finalSvg = stretchSvg(svgString, width, height);
+                chart.destroy();
+                resolve(finalSvg);
+            }
+            catch (e) {
+                reject(e);
+            }
+        }
+    };
+    // 4. Register Export-Specific Plugins
+    chartConfig.plugins = [
+        ...parseAfterDrawBarPlugins(metadata.afterBarDrawConfig || {}, metadata.units),
+        metadata.lollipopConfig ? lollipopChartPlugin(metadata.lollipopConfig) : null
+    ]
+        .filter(Boolean)
+        .flat();
+    chart = new Chart(mockCanvas, chartConfig);
+});
+const exportAsSVG = async (config, metadata) => {
+    try {
+        const content = await convertToSvg(config, metadata);
+        const blob = new Blob([content], { type: 'image/svg+xml;charset=utf-8' });
+        const url = URL.createObjectURL(blob);
+        downloadFile(url, metadata.fileName || 'chart-export.svg');
+    }
+    catch (error) {
+        console.error('Failed to export SVG', error);
+    }
+};
+const svgToUrl = (svgElement) => {
+    const serializer = new XMLSerializer();
+    let svgString = serializer.serializeToString(svgElement);
+    if (!svgString.includes('xmlns')) {
+        svgString = svgString.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+    }
+    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+    return URL.createObjectURL(blob);
+};
+const downloadSvg = (svgElement) => downloadFile(svgToUrl(svgElement), 'chart.svg');
+const downloadPng = async (svgElement, { width, height } = {}) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const img = new Image();
+    // Set canvas dimensions based on SVG size
+    // (You might want to fetch getBBox() or use explicitly set width/height)
+    const svgSize = svgElement.getBoundingClientRect();
+    canvas.width = width || svgSize.width;
+    canvas.height = height || svgSize.height;
+    img.onload = () => {
+        if (ctx) {
+            // ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, 0, 0);
+            const pngUrl = canvas.toDataURL('image/png');
+            downloadFile(pngUrl, 'chart.png');
+        }
+    };
+    img.src = svgToUrl(svgElement);
+};
+
+var ChartExportFormat;
+(function (ChartExportFormat) {
+    ChartExportFormat["png"] = "Image";
+    ChartExportFormat["svg"] = "Vector image";
+})(ChartExportFormat || (ChartExportFormat = {}));
+const exportFormats = Object.entries(ChartExportFormat).map(([extension, label]) => ({ extension, label }));
+class ChartExportButtonComponent {
+    constructor() {
+        this.modalService = inject(NgbModal);
+        this.modal = viewChild('modal', ...(ngDevMode ? [{ debugName: "modal" }] : []));
+        this.buttonClass = input('button is-small is-ghost is-p-2', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
+        this.chart = input(...(ngDevMode ? [undefined, { debugName: "chart" }] : []));
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.exportFormats = input(exportFormats, ...(ngDevMode ? [{ debugName: "exportFormats" }] : []));
+        this.chartExportFn = input(...(ngDevMode ? [undefined, { debugName: "chartExportFn" }] : []));
+        this.exportFormat = signal(undefined, ...(ngDevMode ? [{ debugName: "exportFormat" }] : []));
+    }
+    async defaultDownload(format) {
+        return format === 'svg' ? await this.chart().exportAsSvg(this.config()) : this.chart().exportAsPng();
+    }
+    async download() {
+        const downloadFn = this.chartExportFn() || this.defaultDownload.bind(this);
+        await downloadFn(this.exportFormat(), this.chart());
+        this.close();
+    }
+    open() {
+        this.modalService.open(this.modal());
+    }
+    close() {
+        this.exportFormat.set(undefined);
+        this.modalService.dismissAll();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, chartExportFn: { classPropertyName: "chartExportFn", publicName: "chartExportFn", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <div class=\"modal is-active\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip], template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <div class=\"modal is-active\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], chartExportFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartExportFn", required: false }] }] } });
+
+const defaultSettings$4 = Object.freeze({
+    options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: false
+            }
+        }
+    }
+});
+const defaultTicksFont = {
+    family: 'Lato',
+    size: 13
+};
+class ChartComponent {
+    constructor() {
+        this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
+        this.exporting = signal(false, ...(ngDevMode ? [{ debugName: "exporting" }] : []));
+        this.chartRef = viewChild('chartRef', ...(ngDevMode ? [{ debugName: "chartRef" }] : []));
+        this.configuration = computed(() => ({
+            ...merge$1({}, defaultSettings$4, this.config()),
+            data: this.data()
+        }), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
+    }
+    async exportAsSvg(config = {}) {
+        this.exporting.set(true);
+        await exportAsSVG(this.configuration(), {
+            width: 600,
+            height: 400,
+            fileName: 'chart.svg',
+            ...config
+        });
+        this.exporting.set(false);
+    }
+    exportAsPng() {
+        this.exporting.set(true);
+        const chart = this.chartRef();
+        const url = chart?.chart?.toBase64Image();
+        downloadFile(url, 'chart.png');
+        this.exporting.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true, isSignal: true }], exportAs: ["chart"], ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <div class=\"is-absolute | download\">\n      <he-chart-export-button [chart]=\"this\" />\n    </div>\n  }\n\n  <ng-content />\n\n  <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartComponent, decorators: [{
+            type: Component$1,
+            args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, ChartExportButtonComponent], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <div class=\"is-absolute | download\">\n      <he-chart-export-button [chart]=\"this\" />\n    </div>\n  }\n\n  <ng-content />\n\n  <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"] }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], chartRef: [{ type: i0.ViewChild, args: ['chartRef', { isSignal: true }] }] } });
+
+// show label 8px from bar
+const gapX = 8;
+const placementGap = (placement) => (placement === 'right' ? +gapX : -gapX);
+const placementX = (x, chart, data, placement) => placement === 'right' ? (!Array.isArray(data) && data < 0 ? positionAtZero(chart) : x) : x;
+const positionAtZero = (chart) => chart.scales.x.getPixelForValue(0);
+const defaultBarDrawSettings = {
+    placement: 'right',
+    xPosFn: (x, index, width, chart, data, placement) => (isEmpty(data) ? positionAtZero(chart) : placementX(x, chart, data, placement)) + placementGap(placement),
+    yPosFn: y => y + 3,
+    colorFn: (m, index, chart, data) => (isUndefined(data) ? '#b5b5b5' : '#4a4a4a'),
+    textFn: ({ data }) => `${data}`,
+    font: `${defaultTicksFont.size}px ${defaultTicksFont.family}`,
+    maxWidth: 90,
+    emptyValueLabel: 'No data'
+};
+const drawText = (ctx, { text, font, fillStyle, placement, xPos, yPos, maxWidth }) => {
+    ctx.font = font;
+    ctx.fillStyle = fillStyle;
+    ctx.textAlign = placement === 'left' ? 'right' : 'left';
+    if (Array.isArray(text)) {
+        ctx.fillText(text[0], xPos, yPos - 5, maxWidth);
+        ctx.fillText(text[1], xPos, yPos + 5, maxWidth);
+    }
+    else {
+        ctx.fillText(text, xPos, yPos, maxWidth);
+    }
+};
+const afterBarDrawPlugin = settings => ({
+    id: ['afterBarDrawPlugin', settings?.placement].filter(Boolean).join('-'),
+    afterDatasetsDraw: (chart) => {
+        if (!chart.data.datasets?.length) {
+            return;
+        }
+        const { placement, xPosFn, yPosFn, colorFn, textFn, maxWidth, font, emptyValueLabel } = {
+            ...defaultBarDrawSettings,
+            ...(settings ?? {})
+        };
+        const { ctx, width, height } = chart;
+        ctx.save();
+        const meta = chart.getDatasetMeta(0);
+        const dataset = chart.data.datasets[0];
+        const elements = meta.data;
+        elements
+            .filter(element => !element.skip)
+            .forEach((element, index) => {
+            const { x, y, base } = element;
+            const label = chart.data.labels?.[index] ?? '';
+            const data = dataset.data[index];
+            // use min/max as both negative values would inverse the positions
+            const anchorX = placement === 'left' ? Math.min(base, x) : Math.max(base, x);
+            const xPos = xPosFn(anchorX, index, width, chart, data, placement);
+            const yPos = yPosFn(y, index, height, chart, data, placement);
+            const text = isUndefined(data) ? emptyValueLabel : textFn({ label, data }, index, chart);
+            text &&
+                drawText(ctx, {
+                    text,
+                    font,
+                    fillStyle: colorFn(element.options, index, chart, data),
+                    placement,
+                    xPos,
+                    yPos,
+                    maxWidth
+                });
+        });
+        ctx.restore();
+    }
+});
+
+const axisHoverPlugin = {
+    id: 'axisHover',
+    afterEvent(chart, args) {
+        const { event } = args;
+        const { maxDistance = 15, onHoverLabel } = (chart.config.options.plugins.axisHover ||
+            {});
+        const yScale = chart.scales.y;
+        const isOverYAxis = event.x >= yScale.left && event.x <= yScale.right;
+        const closestTick = isOverYAxis
+            ? yScale.getTicks().find((tick, index) => Math.abs(event.y - yScale.getPixelForTick(index)) < maxDistance)
+            : null;
+        const label = closestTick ? chart.data.labels[closestTick.value] : '';
+        onHoverLabel({ label, event });
+    }
+};
+
+// ... createHoverGradient remains the same ...
+const createHoverGradient = (ctx, chartArea, color) => {
+    const gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0);
+    gradient.addColorStop(0, colorToRgba(color, 0.05));
+    gradient.addColorStop(0.5, colorToRgba(color, 0.12));
+    gradient.addColorStop(1, colorToRgba(color, 0.05));
+    return gradient;
+};
+// UPDATED: Use element properties instead of _model
+const calculateBarBounds = (element, indexAxis = 'y') => {
+    const { x, y, base, width, height } = element;
+    // Handle Horizontal Bars (indexAxis: 'y')
+    if (indexAxis === 'y') {
+        const barHeight = height; // Thickness of the bar
+        const barTop = y - barHeight / 2;
+        const barBottom = y + barHeight / 2;
+        const barLeft = Math.min(base, x);
+        const barRight = Math.max(base, x);
+        return { barLeft, barRight, barTop, barBottom, thickness: barHeight };
+    }
+    // Handle Vertical Bars (indexAxis: 'x')
+    else {
+        const barWidth = width; // Thickness of the bar
+        const barLeft = x - barWidth / 2;
+        const barRight = x + barWidth / 2;
+        const barTop = Math.min(base, y);
+        const barBottom = Math.max(base, y);
+        return { barLeft, barRight, barTop, barBottom, thickness: barWidth };
+    }
+};
+// UPDATED: Calculate shadow bounds based on the bounds we just found
+const calculateShadowBounds = (element, bounds, threshold) => {
+    return {
+        top: bounds.barTop - threshold,
+        bottom: bounds.barBottom + threshold,
+        left: bounds.barLeft, // Usually we expand Y (thickness), but keep X (length) capped at value
+        right: bounds.barRight,
+        width: bounds.barRight - bounds.barLeft,
+        height: bounds.barBottom + threshold - (bounds.barTop - threshold)
+    };
+};
+const drawHoverEffect = (ctx, chartArea, element, threshold, indexAxis) => {
+    // Access colors via options
+    const opts = element.options || null;
+    const barColor = (opts?.backgroundColor || opts?.borderColor || '#000000');
+    const color = parseColor(barColor);
+    const bounds = calculateBarBounds(element, indexAxis);
+    const shadow = calculateShadowBounds(element, bounds, threshold);
+    ctx.save();
+    // Draw Gradient Background
+    const gradient = createHoverGradient(ctx, { left: shadow.left, right: shadow.right }, color);
+    ctx.fillStyle = gradient;
+    ctx.fillRect(shadow.left, shadow.top, shadow.width, shadow.height);
+    // Draw Dashed Lines
+    drawHorizontalLines(ctx, { left: shadow.left, right: shadow.right }, shadow.top, shadow.bottom, color);
+    ctx.restore();
+};
+const drawHorizontalLines = (ctx, barArea, topY, bottomY, color) => {
+    ctx.strokeStyle = colorToRgba(color, 0.25);
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 5]);
+    ctx.beginPath();
+    ctx.moveTo(barArea.left, topY);
+    ctx.lineTo(barArea.right, topY);
+    ctx.moveTo(barArea.left, bottomY);
+    ctx.lineTo(barArea.right, bottomY);
     ctx.stroke();
 };
 // UPDATED: Distance calculation using the new bounds
@@ -5828,513 +6134,207 @@ const isWithinHitArea = (x, y, bounds, threshold) => {
 };
 const checkBarProximity = (element, // Raw element
 index, datasetIndex, x, y, threshold, currentClosest, indexAxis) => {
-    const bar = element;
-    // V4 Safety check: Ensure the element has been drawn (has x/y)
-    if (bar.x == null || bar.y == null)
-        return;
-    const bounds = calculateBarBounds(bar, indexAxis);
-    if (!isWithinHitArea(x, y, bounds, threshold))
-        return;
-    const distance = calculateDistanceToBar(x, y, bounds);
-    if (distance < currentClosest.distance) {
-        currentClosest.distance = distance;
-        currentClosest.bar = {
-            datasetIndex,
-            index,
-            element: bar // Save the whole element
-        };
-    }
-};
-const findNearBar = (chart, x, y, threshold) => {
-    const closest = { bar: null, distance: Infinity };
-    // Determine orientation (horizontal bar vs vertical bar)
-    const indexAxis = chart.options.indexAxis || 'x';
-    chart.data.datasets?.forEach((dataset, datasetIndex) => {
-        // V4 Visibility check
-        if (!chart.isDatasetVisible(datasetIndex))
-            return;
-        const meta = chart.getDatasetMeta(datasetIndex);
-        meta.data.forEach((element, index) => {
-            // Skip hidden/skipped elements
-            if (element.hidden || element.skip)
-                return;
-            checkBarProximity(element, index, datasetIndex, x, y, threshold, closest, indexAxis);
-        });
-    });
-    return closest.distance <= threshold ? closest.bar : undefined;
-};
-const triggerBarClick = (chart, barData) => {
-    const activeElements = [
-        {
-            element: barData.element,
-            datasetIndex: barData.datasetIndex,
-            index: barData.index
-        }
-    ];
-    // 1. Highlight visually
-    chart.setActiveElements(activeElements);
-    // 2. Show Tooltip
-    chart.tooltip?.setActiveElements(activeElements, { x: 0, y: 0 });
-    // 3. Fire Click Callback
-    const onClickHandler = chart.options.onClick;
-    if (onClickHandler) {
-        const mockEvent = {
-            type: 'click',
-            x: barData.element.x,
-            y: barData.element.y,
-            chart: chart,
-            native: {
-                target: chart.canvas,
-                preventDefault: () => { },
-                stopPropagation: () => { }
-            }
-        };
-        onClickHandler.call(chart, mockEvent, activeElements, chart);
-    }
-    chart.update();
-};
-const handleMouseMove = (chart, nearBar, threshold, e) => {
-    // Return object
-    const newNearBar = findNearBar(chart, e.x, e.y, threshold);
-    const prevCursor = chart.canvas.style.cursor;
-    const newCursor = newNearBar ? 'pointer' : 'default';
-    // Optimization: Only touch DOM if necessary
-    if (prevCursor !== newCursor) {
-        chart.canvas.style.cursor = newCursor;
-    }
-    // Check if the "near bar" target has changed
-    const hasChanged = newNearBar?.datasetIndex !== nearBar?.datasetIndex || newNearBar?.index !== nearBar?.index;
-    return {
-        nearBar: hasChanged ? newNearBar || null : nearBar,
-        changed: hasChanged
-    };
-};
-const handleMouseOut = (chart, nearBar) => {
-    chart.canvas.style.cursor = 'default';
-    return !!nearBar;
-};
-const handleClick = (chart, nearBar) => {
-    if (nearBar)
-        triggerBarClick(chart, nearBar);
-};
-const getActiveBar = (chart) => {
-    const activeElements = chart.tooltip?.getActiveElements();
-    return activeElements?.[0]?.element;
-};
-const defaultSettings$4 = { threshold: 10 };
-const backgroundHoverPlugin = (settings = {}) => {
-    let nearBar = null;
-    const { threshold } = { ...defaultSettings$4, ...settings };
-    return {
-        id: 'backgroundHover',
-        afterEvent: (chart, args) => {
-            const e = args.event;
-            let changed = false;
-            if (e.type === 'mousemove') {
-                const result = handleMouseMove(chart, nearBar, threshold || 10, e);
-                nearBar = result.nearBar;
-                changed = result.changed;
-            }
-            else if (e.type === 'mouseout') {
-                changed = handleMouseOut(chart, nearBar);
-                nearBar = null;
-            }
-            else if (e.type === 'click') {
-                handleClick(chart, nearBar);
-                // Clicks usually trigger their own updates, but if you need one:
-                // changed = true;
-            }
-            args.changed = changed;
-        },
-        beforeDraw: (chart) => {
-            const indexAxis = chart.options.indexAxis || 'x';
-            const activeBar = nearBar ? nearBar.element : getActiveBar(chart);
-            activeBar && drawHoverEffect(chart.ctx, chart.chartArea, activeBar, threshold || 10, indexAxis);
-        }
-    };
-};
-
-const isMouseInsideCircle = (event, circleCenter, circleRadius) => {
-    const { clientX, clientY } = event;
-    const circleX = circleCenter.x;
-    const circleY = circleCenter.y;
-    // Calculate the distance between the click point and the circle center
-    const distance = Math.sqrt((clientX - circleX) ** 2 + (clientY - circleY) ** 2);
-    // Check if the distance is less than the circle radius
-    return distance <= circleRadius;
-};
-const circle = (ctx, x, y, color, radius) => {
-    ctx.beginPath();
-    ctx.arc(x, y, radius, 0, Math.PI * 2);
-    ctx.fillStyle = color;
-    ctx.fill();
-};
-const line = (ctx, startX, endX, y, color, lineWidth) => {
-    ctx.beginPath();
-    ctx.lineWidth = lineWidth;
-    ctx.strokeStyle = color;
-    ctx.moveTo(startX, y);
-    ctx.lineTo(endX, y);
-    ctx.stroke();
-};
-const defaultLollipopSettings = {
-    circleRadius: 4,
-    colorFn: m => m.backgroundColor,
-    isMouseInsideLollipopFn: () => null
+    const bar = element;
+    // V4 Safety check: Ensure the element has been drawn (has x/y)
+    if (bar.x == null || bar.y == null)
+        return;
+    const bounds = calculateBarBounds(bar, indexAxis);
+    if (!isWithinHitArea(x, y, bounds, threshold))
+        return;
+    const distance = calculateDistanceToBar(x, y, bounds);
+    if (distance < currentClosest.distance) {
+        currentClosest.distance = distance;
+        currentClosest.bar = {
+            datasetIndex,
+            index,
+            element: bar // Save the whole element
+        };
+    }
 };
-const lollipopChartPlugin = settings => ({
-    id: 'lollipopChartPlugin',
-    afterDatasetsDraw: (chart) => {
-        if (!chart.data.datasets?.length) {
+const findNearBar = (chart, x, y, threshold) => {
+    const closest = { bar: null, distance: Infinity };
+    // Determine orientation (horizontal bar vs vertical bar)
+    const indexAxis = chart.options.indexAxis || 'x';
+    chart.data.datasets?.forEach((dataset, datasetIndex) => {
+        // V4 Visibility check
+        if (!chart.isDatasetVisible(datasetIndex))
             return;
-        }
-        const { circleRadius, lineWidth, colorFn, isMouseInsideLollipopFn, valueFn } = {
-            ...defaultLollipopSettings,
-            ...(settings ?? {})
-        };
-        const { ctx } = chart;
-        ctx.save();
-        const clickableDictionary = [];
-        chart.data.datasets.forEach((dataset, datasetIndex) => {
-            const meta = chart.getDatasetMeta(datasetIndex);
-            // Skip hidden datasets
-            if (meta.hidden)
+        const meta = chart.getDatasetMeta(datasetIndex);
+        meta.data.forEach((element, index) => {
+            // Skip hidden/skipped elements
+            if (element.hidden || element.skip)
                 return;
-            ctx.save();
-            const elements = meta.data;
-            elements
-                .filter(element => !element.skip)
-                .forEach((element, index) => {
-                const { base, x, y } = element;
-                const color = colorFn(element.options, index);
-                const data = dataset.data[index];
-                const overrideValue = valueFn?.(dataset, index, chart);
-                const xValue = isUndefined(overrideValue) ? x : chart.scales.x.getPixelForValue(overrideValue);
-                clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: xValue, y }, circleRadius));
-                circle(ctx, xValue, y, color, circleRadius);
-                // draw the line between the 2 cricles if necessary
-                [Array.isArray(data), !!lineWidth].every(Boolean) && line(ctx, base, x, y, color, lineWidth);
-                // when drawing from the data, draw both ends if its an array
-                if (isUndefined(overrideValue)) {
-                    clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: base, y }, circleRadius));
-                    Array.isArray(data) && circle(ctx, base, y, color, circleRadius);
-                }
-            });
-            ctx.restore();
+            checkBarProximity(element, index, datasetIndex, x, y, threshold, closest, indexAxis);
         });
-        isMouseInsideLollipopFn((x, y) => clickableDictionary.findIndex(fn => fn(x, y)));
-    }
-});
-
-const defaultChartWidth = 800;
-const defaultChartHeight = 600;
-const extractEssentialChartConfig = (config) => ({
-    type: config.type || 'bar',
-    data: config.data,
-    options: {
-        indexAxis: config.options?.indexAxis,
-        responsive: false,
-        maintainAspectRatio: false,
-        devicePixelRatio: 1,
-        animation: false,
-        animations: {
-            colors: false,
-            x: false,
-            y: false
-        },
-        transitions: {
-            active: {
-                animation: {
-                    duration: 0
-                }
-            }
-        },
-        plugins: {
-            legend: { display: false },
-            title: config.options.plugins?.title || { display: false }
-        },
-        scales: config.options.scales
-    }
-});
-const stretchSvg = (svgString, width, height) => {
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(svgString, 'image/svg+xml');
-    const svgElement = doc.documentElement;
-    // Add 100px padding to ViewBox for overflow labels
-    svgElement.setAttribute('viewBox', `0 0 ${width + 100} ${height}`);
-    svgElement.setAttribute('width', '100%');
-    svgElement.setAttribute('height', '100%');
-    svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet');
-    return svgElement.outerHTML;
-};
-const parseAfterDrawBarPlugins = (afterBarDrawConfig, units) => Array.isArray(afterBarDrawConfig)
-    ? afterBarDrawConfig.map(afterBarDrawPlugin)
-    : [
-        afterBarDrawPlugin({
-            textFn: ({ data }) => [toPrecision(Array.isArray(data) ? data[0] : data), units].filter(Boolean).join(' '),
-            emptyValueLabel: 'No data',
-            ...afterBarDrawConfig
-        })
-    ];
-const convertToSvg = (config, metadata = {}) => new Promise((resolve, reject) => {
-    const width = metadata.width || defaultChartWidth;
-    const height = metadata.height || defaultChartHeight;
-    // 1. Create the SVG Context
-    const svgContext = new C2S(width, height);
-    svgContext.setTransform = () => { };
-    svgContext.resetTransform = () => { };
-    svgContext.roundRect = function (x, y, w, h) {
-        this.rect(x, y, w, h);
-    };
-    // 2. Mock the Canvas Element
-    const mockCanvas = document.createElement('canvas');
-    mockCanvas.width = width;
-    mockCanvas.height = height;
-    mockCanvas.style.width = `${width}px`;
-    mockCanvas.style.height = `${height}px`;
-    mockCanvas.getBoundingClientRect = () => ({
-        x: 0,
-        y: 0,
-        bottom: height,
-        height: height,
-        left: 0,
-        right: width,
-        top: 0,
-        width: width,
-        toJSON: () => { }
     });
-    // Intercept getContext to return our SVG generator
-    mockCanvas.getContext = (type) => {
-        if (type === '2d') {
-            svgContext.canvas = mockCanvas;
-            return svgContext;
+    return closest.distance <= threshold ? closest.bar : undefined;
+};
+const triggerBarClick = (chart, barData) => {
+    const activeElements = [
+        {
+            element: barData.element,
+            datasetIndex: barData.datasetIndex,
+            index: barData.index
         }
-        return null;
-    };
-    // 3. Prepare Config
-    const chartConfig = extractEssentialChartConfig(config);
-    // eslint-disable-next-line prefer-const
-    let chart;
-    chartConfig.options.animation = {
-        onComplete: () => {
-            try {
-                const svgString = svgContext.getSerializedSvg(true);
-                const finalSvg = stretchSvg(svgString, width, height);
-                chart.destroy();
-                resolve(finalSvg);
-            }
-            catch (e) {
-                reject(e);
+    ];
+    // 1. Highlight visually
+    chart.setActiveElements(activeElements);
+    // 2. Show Tooltip
+    chart.tooltip?.setActiveElements(activeElements, { x: 0, y: 0 });
+    // 3. Fire Click Callback
+    const onClickHandler = chart.options.onClick;
+    if (onClickHandler) {
+        const mockEvent = {
+            type: 'click',
+            x: barData.element.x,
+            y: barData.element.y,
+            chart: chart,
+            native: {
+                target: chart.canvas,
+                preventDefault: () => { },
+                stopPropagation: () => { }
             }
-        }
-    };
-    // 4. Register Export-Specific Plugins
-    chartConfig.plugins = [
-        ...parseAfterDrawBarPlugins(metadata.afterBarDrawConfig || {}, metadata.units),
-        metadata.lollipopConfig ? lollipopChartPlugin(metadata.lollipopConfig) : null
-    ]
-        .filter(Boolean)
-        .flat();
-    chart = new Chart(mockCanvas, chartConfig);
-});
-const exportAsSVG = async (config, metadata) => {
-    try {
-        const content = await convertToSvg(config, metadata);
-        const blob = new Blob([content], { type: 'image/svg+xml;charset=utf-8' });
-        const url = URL.createObjectURL(blob);
-        downloadFile(url, metadata.fileName || 'chart-export.svg');
-    }
-    catch (error) {
-        console.error('Failed to export SVG', error);
+        };
+        onClickHandler.call(chart, mockEvent, activeElements, chart);
     }
+    chart.update();
 };
-const svgToUrl = (svgElement) => {
-    const serializer = new XMLSerializer();
-    let svgString = serializer.serializeToString(svgElement);
-    if (!svgString.includes('xmlns')) {
-        svgString = svgString.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
+const handleMouseMove = (chart, nearBar, threshold, e) => {
+    // Return object
+    const newNearBar = findNearBar(chart, e.x, e.y, threshold);
+    const prevCursor = chart.canvas.style.cursor;
+    const newCursor = newNearBar ? 'pointer' : 'default';
+    // Optimization: Only touch DOM if necessary
+    if (prevCursor !== newCursor) {
+        chart.canvas.style.cursor = newCursor;
     }
-    const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
-    return URL.createObjectURL(blob);
+    // Check if the "near bar" target has changed
+    const hasChanged = newNearBar?.datasetIndex !== nearBar?.datasetIndex || newNearBar?.index !== nearBar?.index;
+    return {
+        nearBar: hasChanged ? newNearBar || null : nearBar,
+        changed: hasChanged
+    };
 };
-const downloadSvg = (svgElement) => downloadFile(svgToUrl(svgElement), 'chart.svg');
-const downloadPng = async (svgElement, { width, height } = {}) => {
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
-    const img = new Image();
-    // Set canvas dimensions based on SVG size
-    // (You might want to fetch getBBox() or use explicitly set width/height)
-    const svgSize = svgElement.getBoundingClientRect();
-    canvas.width = width || svgSize.width;
-    canvas.height = height || svgSize.height;
-    img.onload = () => {
-        if (ctx) {
-            // ctx.fillStyle = 'white';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            ctx.drawImage(img, 0, 0);
-            const pngUrl = canvas.toDataURL('image/png');
-            downloadFile(pngUrl, 'chart.png');
+const handleMouseOut = (chart, nearBar) => {
+    chart.canvas.style.cursor = 'default';
+    return !!nearBar;
+};
+const handleClick = (chart, nearBar) => {
+    if (nearBar)
+        triggerBarClick(chart, nearBar);
+};
+const getActiveBar = (chart) => {
+    const activeElements = chart.tooltip?.getActiveElements();
+    return activeElements?.[0]?.element;
+};
+const defaultSettings$3 = { threshold: 10 };
+const backgroundHoverPlugin = (settings = {}) => {
+    let nearBar = null;
+    const { threshold } = { ...defaultSettings$3, ...settings };
+    return {
+        id: 'backgroundHover',
+        afterEvent: (chart, args) => {
+            const e = args.event;
+            let changed = false;
+            if (e.type === 'mousemove') {
+                const result = handleMouseMove(chart, nearBar, threshold || 10, e);
+                nearBar = result.nearBar;
+                changed = result.changed;
+            }
+            else if (e.type === 'mouseout') {
+                changed = handleMouseOut(chart, nearBar);
+                nearBar = null;
+            }
+            else if (e.type === 'click') {
+                handleClick(chart, nearBar);
+                // Clicks usually trigger their own updates, but if you need one:
+                // changed = true;
+            }
+            args.changed = changed;
+        },
+        beforeDraw: (chart) => {
+            const indexAxis = chart.options.indexAxis || 'x';
+            const activeBar = nearBar ? nearBar.element : getActiveBar(chart);
+            activeBar && drawHoverEffect(chart.ctx, chart.chartArea, activeBar, threshold || 10, indexAxis);
         }
     };
-    img.src = svgToUrl(svgElement);
 };
 
-const registerChart = (items = []) => () => {
-    Chart.register(BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale, annotationPlugin, ...items);
+const isMouseInsideCircle = (event, circleCenter, circleRadius) => {
+    const { clientX, clientY } = event;
+    const circleX = circleCenter.x;
+    const circleY = circleCenter.y;
+    // Calculate the distance between the click point and the circle center
+    const distance = Math.sqrt((clientX - circleX) ** 2 + (clientY - circleY) ** 2);
+    // Check if the distance is less than the circle radius
+    return distance <= circleRadius;
 };
-
-class ChartConfigurationDirective {
-    constructor() {
-        this._elementRef = inject(ElementRef);
-        this._observer = new ResizeObserver(() => this.resize());
-        /**
-         * The chart configuration.
-         * This is used to initialize the chart.
-         *
-         * @param configuration The chart configuration
-         */
-        this.chartConfiguration = input(...(ngDevMode ? [undefined, { debugName: "chartConfiguration" }] : []));
-        /**
-         * The container element of the chart.
-         * This is used to observe the size of the container and resize the chart accordingly. (chart.js update charts only on the window resize event)
-         * If not provided, the chart will not be resized.
-         *
-         * @param container The container element of the chart
-         */
-        this.chartContainer = input(...(ngDevMode ? [undefined, { debugName: "chartContainer" }] : []));
-        effect(onCleanup => {
-            const configuration = this.chartConfiguration();
-            untracked(() => {
-                this.removeChart();
-                if (configuration) {
-                    this._chart = new Chart(this._elementRef.nativeElement, configuration);
+const circle = (ctx, x, y, color, radius) => {
+    ctx.beginPath();
+    ctx.arc(x, y, radius, 0, Math.PI * 2);
+    ctx.fillStyle = color;
+    ctx.fill();
+};
+const line = (ctx, startX, endX, y, color, lineWidth) => {
+    ctx.beginPath();
+    ctx.lineWidth = lineWidth;
+    ctx.strokeStyle = color;
+    ctx.moveTo(startX, y);
+    ctx.lineTo(endX, y);
+    ctx.stroke();
+};
+const defaultLollipopSettings = {
+    circleRadius: 4,
+    colorFn: m => m.backgroundColor,
+    isMouseInsideLollipopFn: () => null
+};
+const lollipopChartPlugin = settings => ({
+    id: 'lollipopChartPlugin',
+    afterDatasetsDraw: (chart) => {
+        if (!chart.data.datasets?.length) {
+            return;
+        }
+        const { circleRadius, lineWidth, colorFn, isMouseInsideLollipopFn, valueFn } = {
+            ...defaultLollipopSettings,
+            ...(settings ?? {})
+        };
+        const { ctx } = chart;
+        ctx.save();
+        const clickableDictionary = [];
+        chart.data.datasets.forEach((dataset, datasetIndex) => {
+            const meta = chart.getDatasetMeta(datasetIndex);
+            // Skip hidden datasets
+            if (meta.hidden)
+                return;
+            ctx.save();
+            const elements = meta.data;
+            elements
+                .filter(element => !element.skip)
+                .forEach((element, index) => {
+                const { base, x, y } = element;
+                const color = colorFn(element.options, index);
+                const data = dataset.data[index];
+                const overrideValue = valueFn?.(dataset, index, chart);
+                const xValue = isUndefined(overrideValue) ? x : chart.scales.x.getPixelForValue(overrideValue);
+                clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: xValue, y }, circleRadius));
+                circle(ctx, xValue, y, color, circleRadius);
+                // draw the line between the 2 cricles if necessary
+                [Array.isArray(data), !!lineWidth].every(Boolean) && line(ctx, base, x, y, color, lineWidth);
+                // when drawing from the data, draw both ends if its an array
+                if (isUndefined(overrideValue)) {
+                    clickableDictionary.push((clientX, clientY) => isMouseInsideCircle({ clientX, clientY }, { x: base, y }, circleRadius));
+                    Array.isArray(data) && circle(ctx, base, y, color, circleRadius);
                 }
             });
-            onCleanup(() => this.removeChart());
-        });
-        effect(onCleanup => {
-            if (this.chartContainer()) {
-                this._observer?.observe(this.chartContainer());
-            }
-            else {
-                this._observer?.disconnect();
-            }
-            onCleanup(() => this._observer?.disconnect());
+            ctx.restore();
         });
-    }
-    removeChart() {
-        const chart = this._chart || Chart.getChart(this._elementRef.nativeElement);
-        chart?.destroy();
-        this._chart = null;
-    }
-    get chart() {
-        return this._chart;
-    }
-    resize() {
-        this._chart?.resize();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartConfigurationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: ChartConfigurationDirective, isStandalone: true, selector: "[chartConfiguration]", inputs: { chartConfiguration: { classPropertyName: "chartConfiguration", publicName: "chartConfiguration", isSignal: true, isRequired: false, transformFunction: null }, chartContainer: { classPropertyName: "chartContainer", publicName: "chartContainer", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["chart"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartConfigurationDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[chartConfiguration]',
-                    exportAs: 'chart'
-                }]
-        }], ctorParameters: () => [], propDecorators: { chartConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartConfiguration", required: false }] }], chartContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartContainer", required: false }] }] } });
-
-var ChartExportFormat;
-(function (ChartExportFormat) {
-    ChartExportFormat["png"] = "Image";
-    ChartExportFormat["svg"] = "Vector image";
-})(ChartExportFormat || (ChartExportFormat = {}));
-const exportFormats = Object.entries(ChartExportFormat).map(([extension, label]) => ({ extension, label }));
-class ChartExportButtonComponent {
-    constructor() {
-        this.modalService = inject(NgbModal);
-        this.modal = viewChild('modal', ...(ngDevMode ? [{ debugName: "modal" }] : []));
-        this.buttonClass = input('button is-small is-ghost is-p-2', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
-        this.chart = input(...(ngDevMode ? [undefined, { debugName: "chart" }] : []));
-        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
-        this.exportFormats = input(exportFormats, ...(ngDevMode ? [{ debugName: "exportFormats" }] : []));
-        this.chartExportFn = input(...(ngDevMode ? [undefined, { debugName: "chartExportFn" }] : []));
-        this.exportFormat = signal(undefined, ...(ngDevMode ? [{ debugName: "exportFormat" }] : []));
-    }
-    async defaultDownload(format) {
-        return format === 'svg' ? await this.chart().exportAsSvg(this.config()) : this.chart().exportAsPng();
-    }
-    async download() {
-        const downloadFn = this.chartExportFn() || this.defaultDownload.bind(this);
-        await downloadFn(this.exportFormat(), this.chart());
-        this.close();
-    }
-    open() {
-        this.modalService.open(this.modal());
-    }
-    close() {
-        this.exportFormat.set(undefined);
-        this.modalService.dismissAll();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartExportButtonComponent, isStandalone: true, selector: "he-chart-export-button", inputs: { buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, chart: { classPropertyName: "chart", publicName: "chart", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, exportFormats: { classPropertyName: "exportFormats", publicName: "exportFormats", isSignal: true, isRequired: false, transformFunction: null }, chartExportFn: { classPropertyName: "chartExportFn", publicName: "chartExportFn", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <div class=\"modal is-active\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: HESvgIconComponent, selector: "he-svg-icon", inputs: ["name", "size", "animation"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartExportButtonComponent, decorators: [{
-            type: Component$1,
-            args: [{ selector: 'he-chart-export-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HESvgIconComponent, NgbTooltip], template: "<button\n  class=\"{{ buttonClass() }}\"\n  type=\"button\"\n  [ngbTooltip]=\"chart()?.exporting() ? '' : 'Download'\"\n  placement=\"bottom\"\n  (click)=\"open()\">\n  <he-svg-icon name=\"download\" />\n</button>\n\n<ng-template #modal>\n  <div class=\"modal is-active\">\n    <div class=\"modal-background\"></div>\n    <div class=\"modal-card\">\n      <header class=\"modal-card-head\">\n        <p class=\"modal-card-title\">Download Chart</p>\n        <button class=\"delete is-small\" aria-label=\"close\" type=\"button\" (click)=\"close()\"></button>\n      </header>\n      <section class=\"modal-card-body\">\n        <p class=\"has-text-secondary is-mb-2\">Download chart as:</p>\n        <div class=\"is-flex is-flex-direction-column is-gap-4\">\n          @for (format of exportFormats(); track format.extension) {\n            <div class=\"is-flex is-gap-4\">\n              <div class=\"field is-mb-0\">\n                <input\n                  type=\"checkbox\"\n                  [id]=\"format.extension\"\n                  [checked]=\"exportFormat() === format.extension\"\n                  (change)=\"exportFormat.set(format.extension)\" />\n              </div>\n              <he-svg-icon name=\"image\" />\n              <label class=\"has-text-grey-dark is-clickable\" [for]=\"format.extension\">\n                {{ format.label }} (.{{ format.extension }})\n              </label>\n            </div>\n          }\n        </div>\n      </section>\n      <footer class=\"modal-card-foot\">\n        <button class=\"button is-primary\" [disabled]=\"!exportFormat()\" (click)=\"download()\">\n          @if (chart()?.exporting()) {\n            <he-svg-icon name=\"loading\" animation=\"spin\" />\n          } @else {\n            <he-svg-icon name=\"download\" />\n          }\n          <span class=\"is-pl-2\">Download</span>\n        </button>\n      </footer>\n    </div>\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], chart: [{ type: i0.Input, args: [{ isSignal: true, alias: "chart", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], exportFormats: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportFormats", required: false }] }], chartExportFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "chartExportFn", required: false }] }] } });
-
-const defaultSettings$3 = Object.freeze({
-    options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-            legend: {
-                display: false
-            }
-        }
+        isMouseInsideLollipopFn((x, y) => clickableDictionary.findIndex(fn => fn(x, y)));
     }
 });
-const defaultTicksFont = {
-    family: 'Lato',
-    size: 13
+
+const registerChart = (items = []) => () => {
+    Chart.register(BarController, LineController, CategoryScale, LinearScale, PointElement, BarElement, LineElement, Title, Tooltip, Legend, TimeScale, annotationPlugin, ...items);
 };
-class ChartComponent {
-    constructor() {
-        this.data = input(undefined, ...(ngDevMode ? [{ debugName: "data" }] : []));
-        this.config = input({}, ...(ngDevMode ? [{ debugName: "config" }] : []));
-        this.showExportButton = input(true, ...(ngDevMode ? [{ debugName: "showExportButton" }] : []));
-        this.exporting = signal(false, ...(ngDevMode ? [{ debugName: "exporting" }] : []));
-        this.chartRef = viewChild('chartRef', ...(ngDevMode ? [{ debugName: "chartRef" }] : []));
-        this.configuration = computed(() => ({
-            ...merge$1({}, defaultSettings$3, this.config()),
-            data: this.data()
-        }), ...(ngDevMode ? [{ debugName: "configuration" }] : []));
-    }
-    async exportAsSvg(config = {}) {
-        this.exporting.set(true);
-        await exportAsSVG(this.configuration(), {
-            width: 600,
-            height: 400,
-            fileName: 'chart.svg',
-            ...config
-        });
-        this.exporting.set(false);
-    }
-    exportAsPng() {
-        this.exporting.set(true);
-        const chart = this.chartRef();
-        const url = chart?.chart?.toBase64Image();
-        downloadFile(url, 'chart.png');
-        this.exporting.set(false);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ChartComponent, isStandalone: true, selector: "he-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, showExportButton: { classPropertyName: "showExportButton", publicName: "showExportButton", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartRef", first: true, predicate: ["chartRef"], descendants: true, isSignal: true }], exportAs: ["chart"], ngImport: i0, template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <div class=\"is-absolute | download\">\n      <he-chart-export-button [chart]=\"this\" />\n    </div>\n  }\n\n  <ng-content />\n\n  <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"], dependencies: [{ kind: "directive", type: ChartConfigurationDirective, selector: "[chartConfiguration]", inputs: ["chartConfiguration", "chartContainer"], exportAs: ["chart"] }, { kind: "component", type: ChartExportButtonComponent, selector: "he-chart-export-button", inputs: ["buttonClass", "chart", "config", "exportFormats", "chartExportFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ChartComponent, decorators: [{
-            type: Component$1,
-            args: [{ selector: 'he-chart', exportAs: 'chart', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ChartConfigurationDirective, ChartExportButtonComponent], template: "<div class=\"is-relative h-100 | chart-container\" #container>\n  @if (showExportButton()) {\n    <div class=\"is-absolute | download\">\n      <he-chart-export-button [chart]=\"this\" />\n    </div>\n  }\n\n  <ng-content />\n\n  <canvas #chartRef=\"chart\" [chartConfiguration]=\"configuration()\" [chartContainer]=\"container\"></canvas>\n</div>\n", styles: [":host{display:block;height:100%;overflow:visible}.chart-container{min-height:50px}.download{top:-12px;right:-10px}\n"] }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], showExportButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButton", required: false }] }], chartRef: [{ type: i0.ViewChild, args: ['chartRef', { isSignal: true }] }] } });
 
 class BarChartLegendComponent {
     constructor() {
@@ -6373,10 +6373,7 @@ const defaultSettings$2 = Object.freeze({
                 title: {
                     display: false,
                     color: grey,
-                    font: {
-                        family: defaultTicksFont.family,
-                        size: 14
-                    }
+                    font: defaultTicksFont
                 },
                 ticks: {
                     font: defaultTicksFont
@@ -11131,6 +11128,9 @@ const customErrorMessage = {
         : ''}`,
     'invalid water salinity': ({ params }) => `The water type ${params?.current} is not consistent with the Water salinity you specified.
     Make sure the Water salinity value is correct and either fix it or update the water type accordingly.`,
+    'measurements for the same termType must be consistent': ({ params }) => `The information you have provided for ${code(params.termType)} Measurements is not consistent across all Measurements.
+    Please ensure that all your ${code(params.termType)} Measurements have a ${code('dates')} field if at least one ${code(params.termType)} Measurement has a ${code('dates')} field specified.
+    Please also ensure that all your ${code(params.termType)} Measurements have ${code('depthUpper')} and ${code('depthLower')} fields if at least one ${code(params.termType)} Measurement has ${code('depthUpper')} and ${code('depthLower')} fields specified.`,
     'must add substrate inputs': () => 'The substrate must be specified when a substrate-based protected cropping system has been added.',
     'should be equal to cycleDuration for crop': ({ params }) => `For temporary crop production Cycles, ${schemaLink('Cycle#siteDuration', 'siteDuration')} must represent the period from harvest of the previous crop to harvest of the current crop.
     Here, you have stated that ${schemaLink('Cycle#cycleDuration', 'cycleDuration')} represents the period from
@@ -14350,6 +14350,10 @@ class FilterAccordionComponent extends ControlValueAccessor {
         this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
         this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.showGroupCount = input(true, ...(ngDevMode ? [{ debugName: "showGroupCount" }] : []));
+        /**
+         * Expand by default the first group in the data, if relevant.
+         */
+        this.expandFirstGroup = input(false, ...(ngDevMode ? [{ debugName: "expandFirstGroup" }] : []));
         this.selectionChanged = output();
         this.selectControl = new FormControl([]);
         this.panelStates = {};
@@ -14367,11 +14371,15 @@ class FilterAccordionComponent extends ControlValueAccessor {
         this.group = computed(() => ({ options: this.filterStore.filteredData() }), ...(ngDevMode ? [{ debugName: "group" }] : []));
         this.disabledValues = computed(() => disabledValues(this.data()), ...(ngDevMode ? [{ debugName: "disabledValues" }] : []));
         effect(() => this.data() && this.filterStore.setData(this.data()));
-        effect(() => (this.panelStates = Object.fromEntries(allGroups(this.data()).map(({ label }) => [
+        effect(() => (this.panelStates = Object.fromEntries(
+        /* eslint-disable-next-line complexity */
+        allGroups(this.data()).map(({ label, type }, index) => [
             label,
             {
                 id: label,
-                expanded: (this.maintainPanelStates() && this.panelStates[label]?.expanded) || false,
+                expanded: (type === 'group' && index === 0 && this.expandFirstGroup()) ||
+                    (this.maintainPanelStates() && this.panelStates[label]?.expanded) ||
+                    false,
                 searchTerm: (this.maintainPanelStates() && this.panelStates[label]?.searchTerm) || ''
             }
         ]))));
@@ -14454,7 +14462,7 @@ class FilterAccordionComponent extends ControlValueAccessor {
         return this.disabled() || item.disabled || parentDisabled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: FilterAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilterAccordionComponent, isStandalone: true, selector: "he-filter-accordion", inputs: { showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", 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 }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChanged: "selectionChanged" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: FilterAccordionComponent, isStandalone: true, selector: "he-filter-accordion", inputs: { showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, showGlobalSearch: { classPropertyName: "showGlobalSearch", publicName: "showGlobalSearch", isSignal: true, isRequired: false, transformFunction: null }, globalSearchPlaceholder: { classPropertyName: "globalSearchPlaceholder", publicName: "globalSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showClearAll: { classPropertyName: "showClearAll", publicName: "showClearAll", 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 }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showGroupCount: { classPropertyName: "showGroupCount", publicName: "showGroupCount", isSignal: true, isRequired: false, transformFunction: null }, expandFirstGroup: { classPropertyName: "expandFirstGroup", publicName: "expandFirstGroup", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChanged: "selectionChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FilterAccordionComponent),
@@ -14497,7 +14505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             transition(':leave', [animate('200ms ease-out', style({ maxHeight: '0', opacity: 0 }))])
                         ])
                     ], template: "<div class=\"is-flex is-flex-direction-column is-gap-12 w-100\">\n  @if (showHeader()) {\n    <div class=\"is-flex is-flex-direction-column is-gap-12 is-justify-content-space-between is-align-items-flex-start\">\n      @if (title()) {\n        <div class=\"is-flex is-align-items-center\">\n          <span class=\"has-text-secondary has-text-weight-semibold\">{{ title() }}</span>\n          @if (tooltip()) {\n            <he-svg-icon\n              name=\"info-circle\"\n              class=\"is-ml-1 is-mb-1 has-text-grey-light is-clickable\"\n              [ngbTooltip]=\"tooltip()\"\n              placement=\"right\"\n              triggers=\"hover\"\n              size=\"16\"\n              container=\"body\" />\n          }\n        </div>\n      }\n\n      <ng-content select=\"[header-content]\" />\n\n      @if (showClearAll()) {\n        <span\n          class=\"is-size-7 has-text-weight-normal is-italic | clear-button\"\n          [class.is-clickable]=\"hasSelectedValues()\"\n          (click)=\"hasSelectedValues() && clearAll()\">\n          Clear all\n        </span>\n      }\n\n      @if (showGlobalSearch()) {\n        <div class=\"field is-mb-0 w-100\">\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]=\"globalSearchPlaceholder()\"\n              [(ngModel)]=\"search\"\n              [disabled]=\"disabled()\"\n              (input)=\"onSearch($event.target.value, group())\" />\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"!search()\" (click)=\"clearSearch()\">\n              <he-svg-icon name=\"xmark\" />\n            </a>\n            <a class=\"icon has-text-secondary is-small is-right\" [class.is-hidden]=\"search()\">\n              <he-svg-icon name=\"search\" />\n            </a>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <div class=\"has-border-top has-border-bottom\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        itemsList;\n        context: { group: group(), parentSearch: search(), showNoResults: showGlobalSearch() }\n      \" />\n  </div>\n</div>\n\n<ng-template #itemsList let-group=\"group\" let-parentSearch=\"parentSearch\" let-showNoResults=\"showNoResults\">\n  @for (item of group | filterAccordionGroup: parentSearch; track item.trackId || item.label; let lastItem = $last) {\n    @if (item.type === 'group') {\n      @let groupState = panelStates[item.label];\n      @if (groupState) {\n        <div [class.has-border-bottom]=\"!lastItem\" [class.is-active]=\"groupState.expanded\">\n          <div\n            class=\"is-flex is-align-items-center is-clickable has-background-hover is-py-1 | accordion-row\"\n            (click)=\"groupState.expanded = !groupState.expanded\">\n            <ng-container *ngTemplateOutlet=\"groupOptionLabel; context: { item, groupState }\" />\n          </div>\n\n          @if (groupState.expanded) {\n            <div class=\"is-overflow-hidden\" [@slideDownUp]=\"groupState.expanded\">\n              @if (!showGlobalSearch() && getDirectOptionsCount(item) >= 5) {\n                <div class=\"field is-mb-0 pb-2 has-border-bottom\">\n                  <div class=\"control is-expanded has-icons-right pl-5\">\n                    <input\n                      type=\"text\"\n                      class=\"input is-secondary is-small search-input pl-2\"\n                      placeholder=\"Search {{ item.label }}\"\n                      [value]=\"groupState.searchTerm || ''\"\n                      [disabled]=\"isItemEffectivelyDisabled(item)\"\n                      (input)=\"groupState.searchTerm = $event.target.value; onSearch($event.target.value, item)\" />\n                    <a\n                      class=\"icon has-text-secondary 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 has-text-secondary is-right\" [class.is-hidden]=\"groupState.searchTerm\">\n                      <he-svg-icon name=\"search\" />\n                    </a>\n                  </div>\n                </div>\n              }\n\n              <div class=\"pl-5\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemsList;\n                    context: {\n                      group: item,\n                      parentSearch: parentSearch || groupState.searchTerm,\n                      showNoResults: !showGlobalSearch()\n                    }\n                  \" />\n              </div>\n            </div>\n          }\n        </div>\n      }\n    } @else {\n      <div\n        class=\"is-flex is-justify-content-space-between is-py-1 | accordion-row\"\n        [class.has-border-bottom]=\"!lastItem\">\n        <ng-container *ngTemplateOutlet=\"optionLabel; context: { item }\" />\n      </div>\n    }\n  } @empty {\n    @if (parentSearch && showNoResults) {\n      <div class=\"px-6 py-4 has-text-grey is-size-7 has-text-centered is-italic\">\n        No results found for \"{{ parentSearch }}\"\n      </div>\n    }\n  }\n</ng-template>\n\n<ng-template #itemLabel let-item=\"item\" let-count=\"count\">\n  <span class=\"is-flex is-gap-4 is-flex-wrap-wrap is-flex-grow-1 is-size-7 has-text-grey-dark has-text-weight-medium\">\n    <span>{{ item.label }}</span>\n\n    @if (item.tooltip) {\n      <he-svg-icon\n        name=\"info-circle\"\n        class=\"has-text-grey-light\"\n        [ngbTooltip]=\"item.tooltip\"\n        placement=\"top\"\n        triggers=\"hover\"\n        size=\"16\"\n        container=\"body\" />\n    }\n\n    @if (isNumber(count)) {\n      <span class=\"has-text-grey-light is-size-7\">({{ count }})</span>\n    }\n  </span>\n</ng-template>\n\n<ng-template #groupOptionLabel let-item=\"item\" let-groupState=\"groupState\">\n  @let options = optionsFromGroup(item);\n\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isGroupFullySelected(options)\"\n      [indeterminate]=\"isGroupPartiallySelected(options)\"\n      (change)=\"toggleGroup(options)\"\n      [disabled]=\"isItemEffectivelyDisabled(item)\" />\n  </label>\n\n  <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: showGroupCount() ? item.count : undefined }\" />\n\n  <he-svg-icon\n    class=\"has-text-secondary transition-transform\"\n    [name]=\"groupState.expanded ? 'chevron-up' : 'chevron-down'\" />\n</ng-template>\n\n<ng-template #optionLabel let-item=\"item\" let-parentDisabled=\"parentDisabled\">\n  <label\n    class=\"checkbox is-flex is-justify-content-center is-align-items-center is-fullwidth\"\n    (click)=\"$event.stopPropagation()\">\n    <input\n      type=\"checkbox\"\n      class=\"mr-3 is-flex-shrink-0\"\n      [checked]=\"isOptionSelected(item.value)\"\n      (change)=\"toggleOption(item.value)\"\n      [disabled]=\"isItemEffectivelyDisabled(item, parentDisabled)\" />\n\n    <ng-container *ngTemplateOutlet=\"itemLabel; context: { item, count: item.count }\" />\n  </label>\n</ng-template>\n", styles: [".clear-button{color:#b5b5b5}.clear-button.is-clickable{color:#4c7194}.accordion-row{min-height:25px}.control{height:28px}.control.has-icons-left .icon,.control.has-icons-right .icon{height:28px!important}.search-input{height:28px;border:1px solid #dbe3ea;border-radius:3px;font-weight:400;line-height:17px;box-shadow:none!important}.has-background-hover-light:hover{background-color:#fafafa}.has-border-top{border-top:1px solid #dbe3ea}.has-border-bottom{border-bottom:1px solid #dbe3ea}.transition-transform{transition:transform .2s ease-out}input[type=checkbox]{height:14px;width:14px;border:1px solid #b5b5b5;border-radius:3px;appearance:none;-webkit-appearance:none;background-color:transparent;accent-color:transparent}input[type=checkbox]:disabled{background-color:#f5f5f5}input[type=checkbox]:checked{background-color:#4c7194;accent-color:#4c7194;appearance:auto;-webkit-appearance:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], showGlobalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGlobalSearch", required: false }] }], globalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearchPlaceholder", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], preserveOptionsOnSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveOptionsOnSelection", required: false }] }], maintainPanelStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainPanelStates", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }] } });
+        }], ctorParameters: () => [], propDecorators: { showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], showGlobalSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGlobalSearch", required: false }] }], globalSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "globalSearchPlaceholder", required: false }] }], showClearAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearAll", required: false }] }], preserveOptionsOnSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "preserveOptionsOnSelection", required: false }] }], maintainPanelStates: [{ type: i0.Input, args: [{ isSignal: true, alias: "maintainPanelStates", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showGroupCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupCount", required: false }] }], expandFirstGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandFirstGroup", required: false }] }], selectionChanged: [{ type: i0.Output, args: ["selectionChanged"] }] } });
 
 const termTypeName = (select) => [
     keyToLabel(select?.termType),