@hestia-earth/ui-components 0.41.30 → 0.41.32

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,161 +5651,467 @@ 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);
-    ctx.stroke();
-};
-// UPDATED: Distance calculation using the new bounds
-const calculateDistanceToBar = (x, y, bounds) => {
-    let distance = 0;
+    // 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
+const calculateDistanceToBar = (x, y, bounds) => {
+    let distance = 0;
     // Horizontal distance
     if (x < bounds.barLeft)
         distance += Math.pow(bounds.barLeft - x, 2);
@@ -5911,423 +6217,124 @@ const handleMouseMove = (chart, nearBar, threshold, e) => {
 };
 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 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);
-                }
-            });
-            ctx.restore();
-        });
-        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 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 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 = [
-        afterBarDrawPlugin({
-            textFn: ({ data }) => [toPrecision(Array.isArray(data) ? data[0] : data), metadata.units].filter(Boolean).join(' '),
-            emptyValueLabel: 'No data',
-            ...(metadata?.afterBarDrawConfig || {})
-        }),
-        metadata.lollipopConfig ? lollipopChartPlugin(metadata.lollipopConfig) : null
-    ].filter(Boolean);
-    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');
+    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() {
@@ -6366,10 +6373,7 @@ const defaultSettings$2 = Object.freeze({
                 title: {
                     display: false,
                     color: grey,
-                    font: {
-                        family: defaultTicksFont.family,
-                        size: 14
-                    }
+                    font: defaultTicksFont
                 },
                 ticks: {
                     font: defaultTicksFont