@kirbydesign/designsystem 5.0.4 → 5.0.8

package/fesm2015/kirbydesign-designsystem.js

@@ -9,13 +9,16 @@ import { filter, first, startWith, map, pairwise, debounceTime, takeUntil } from
 import { CommonModule, formatNumber, getLocaleDateFormat, FormatWidth, getLocaleNumberSymbol, NumberSymbol, DOCUMENT } from '@angular/common';
 import * as Highcharts from 'highcharts';
 import { chart, dateFormat } from 'highcharts';
-import { CategoryScale, LinearScale, BarElement, LineElement, PointElement, BarController, LineController, Filler, Chart, Legend } from 'chart.js';
+import { toDate, isBefore, isAfter, format, isSameMonth, startOfMonth, startOfDay, eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, endOfMonth, differenceInDays, add, isWeekend, getYear } from 'date-fns';
+import _deepCopy from 'ts-deepcopy';
+import { CategoryScale, LinearScale, BarElement, LineElement, PointElement, BarController, LineController, Filler, Tooltip, Chart, Legend } from 'chart.js';
 export { Chart } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { valueOrDefault } from 'chart.js/helpers';
 import * as Highcharts$1 from 'highcharts/highstock';
 import { dateFormat as dateFormat$1, stockChart } from 'highcharts/highstock';
 import AnnotationsModule from 'highcharts/modules/annotations';
-import { isBefore, isAfter, format, isSameMonth, startOfMonth, startOfDay, eachDayOfInterval, startOfWeek, endOfWeek, isSameDay, endOfMonth, differenceInDays, add, isWeekend, getYear } from 'date-fns';
 import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';
 import { da, enGB, enUS } from 'date-fns/locale';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -3071,8 +3074,16 @@ ComponentLoaderDirective.propDecorators = {
     cssClass: [{ type: Input }]
 };
 
+/**
+ * Do a deep copy of object that supports the composite data type Function
+ *
+ * @see https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript#answer-122704
+ *
+ * @param obj
+ * @returns obj
+ */
 function deepCopy(obj) {
-    return JSON.parse(JSON.stringify(obj));
+    return _deepCopy(obj);
 }
 
 /*
@@ -3148,6 +3159,13 @@ const CHART_INTERACTION_FUNCTIONS_EXTENSIONS = {
 
 const { fontSize: fontSize$2 } = DesignTokenHelper;
 const { getThemeColorHexString: getThemeColorHexString$1, getThemeColorRgbString } = ColorHelper;
+/**
+ * A filter to read a chartpoint from a Chart.js point context (used for chartdata points). Context is provided by Chart.js.
+ */
+const getChartPointFromContext = (context) => {
+    return context.dataset.data[context.dataIndex];
+};
+const ɵ0$6 = getChartPointFromContext;
 const CHART_TYPES_CONFIG = {
     bar: {
         type: 'bar',
@@ -3242,6 +3260,115 @@ const CHART_TYPES_CONFIG = {
             },
         },
     },
+    stock: {
+        type: 'line',
+        options: {
+            responsive: true,
+            animation: {
+                duration: 0,
+            },
+            layout: {
+                padding: {
+                    left: 20,
+                    right: 20,
+                    top: 30,
+                    bottom: 0,
+                },
+            },
+            backgroundColor: getThemeColorRgbString('semi-light', 0.5),
+            scales: {
+                x: {
+                    grid: {
+                        lineWidth: 0,
+                    },
+                    ticks: {
+                        maxRotation: 0,
+                        autoSkipPadding: 120,
+                        font: {
+                            size: parseInt(fontSize$2('xs')),
+                        },
+                    },
+                },
+                y: {
+                    position: 'right',
+                    display: true,
+                    grid: {
+                        drawBorder: false,
+                    },
+                    ticks: {
+                        display: true,
+                        font: {
+                            size: parseInt(fontSize$2('xs')),
+                        },
+                    },
+                },
+            },
+            elements: {
+                line: {
+                    tension: 0,
+                    borderWidth: 2,
+                },
+                point: {
+                    hitRadius: 20,
+                    radius: 0,
+                    hoverRadius: 0,
+                    hoverBorderWidth: 0,
+                },
+            },
+            normalized: true,
+            plugins: {
+                tooltip: {
+                    padding: 10,
+                    enabled: true,
+                    mode: 'index',
+                    intersect: false,
+                    backgroundColor: getThemeColorHexString$1('semi-light'),
+                    titleColor: getThemeColorHexString$1('semi-light-contrast'),
+                    bodyColor: getThemeColorHexString$1('semi-light-contrast'),
+                    caretSize: 0,
+                    bodySpacing: 5,
+                    titleSpacing: 5,
+                    borderColor: 'transparent',
+                    callbacks: {
+                        labelColor: (tooltipItem) => {
+                            return {
+                                backgroundColor: tooltipItem.dataset.borderColor,
+                            };
+                        },
+                    },
+                },
+                // A failed attempt to get local typings working.
+                // The chartjs-plugin-marker is rewritten to not
+                // having to rely on own plugin settings, but using
+                // x-axis type time instead.
+                // @todo candidate for refactor once solved.
+                // marker: {
+                //   line: {
+                //     color: getThemeColorHexString('black-base'),
+                //   }
+                // },
+                datalabels: {
+                    backgroundColor: (context) => context.dataset.borderColor,
+                    color: getThemeColorHexString$1('white'),
+                    borderRadius: 3,
+                    font: {
+                        lineHeight: 1,
+                        size: parseInt(fontSize$2('xs')),
+                    },
+                    padding: {
+                        top: 6,
+                        left: 5,
+                        right: 5,
+                        bottom: 5,
+                    },
+                    offset: 5,
+                    align: (context) => { var _a; return (_a = getChartPointFromContext(context)) === null || _a === void 0 ? void 0 : _a.datalabel.position; },
+                    display: (context) => { var _a; return !!((_a = getChartPointFromContext(context)) === null || _a === void 0 ? void 0 : _a.datalabel); },
+                    formatter: (value) => value.datalabel.value,
+                },
+            },
+        },
+    },
 };
 
 class ChartConfigService {
@@ -3267,6 +3394,205 @@ ChartConfigService.decorators = [
     { type: Injectable }
 ];
 
+// The marker pluin was heavily inspired by https://chartjs-plugin-crosshair.netlify.app
+var defaultOptions = {
+    line: {
+        color: 'black',
+        width: 1,
+        dashPattern: [],
+    },
+    snap: {
+        enabled: false,
+    },
+};
+const hasMarkerConfiguration = (chart) => {
+    var _a, _b, _c;
+    // using another plugins options is not ideal, so the issue with marker plugin
+    // should be resolved. As of right now the only chart that uses
+    // tooltip is stock charts.
+    return chart.config.options.scales.x && ((_c = (_b = (_a = chart.config.options) === null || _a === void 0 ? void 0 : _a.plugins) === null || _b === void 0 ? void 0 : _b.tooltip) === null || _c === void 0 ? void 0 : _c.enabled);
+    // @todo when resolving the typings issue with the markerplugin,
+    // this is a better conditional.
+    // return chart.config.options.scales.x && chart.config.options.plugins.marker
+};
+const ɵ0$7 = hasMarkerConfiguration;
+var MarkerPlugin = {
+    id: 'marker',
+    afterInit: function (chart) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        var xScaleType = chart.config.options.scales.x.type;
+        if (xScaleType !== 'linear' &&
+            xScaleType !== 'time' &&
+            xScaleType !== 'category' &&
+            xScaleType !== 'logarithmic') {
+            return;
+        }
+        if (chart.options.plugins.marker === undefined) {
+            chart.options.plugins.marker = defaultOptions;
+        }
+        chart.marker = {
+            enabled: false,
+            suppressUpdate: false,
+            x: null,
+            originalData: [],
+            originalXRange: {},
+            dragStarted: false,
+            dragStartX: null,
+            dragEndX: null,
+            suppressTooltips: false,
+            ignoreNextEvents: 0,
+        };
+    },
+    getOption: function (chart, category, name) {
+        return valueOrDefault(chart.options.plugins.marker[category]
+            ? chart.options.plugins.marker[category][name]
+            : undefined, defaultOptions[category][name]);
+    },
+    getXScale: function (chart) {
+        return chart.data.datasets.length ? chart.scales[chart.getDatasetMeta(0).xAxisID] : null;
+    },
+    getYScale: function (chart) {
+        return chart.scales[chart.getDatasetMeta(0).yAxisID];
+    },
+    afterEvent: function (chart, event) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        if (chart.config.options.scales.x.length == 0) {
+            return;
+        }
+        let e = event.event;
+        var xScaleType = chart.config.options.scales.x.type;
+        if (xScaleType !== 'linear' &&
+            xScaleType !== 'time' &&
+            xScaleType !== 'category' &&
+            xScaleType !== 'logarithmic') {
+            return;
+        }
+        var xScale = this.getXScale(chart);
+        if (!xScale) {
+            return;
+        }
+        if (chart.marker.ignoreNextEvents > 0) {
+            chart.marker.ignoreNextEvents -= 1;
+            return;
+        }
+        // fix for Safari
+        var buttons = e.native.buttons === undefined ? e.native.which : e.native.buttons;
+        if (e.native.type === 'mouseup') {
+            buttons = 0;
+        }
+        chart.marker.enabled =
+            e.type !== 'mouseout' &&
+                e.x > xScale.getPixelForValue(xScale.min) &&
+                e.x < xScale.getPixelForValue(xScale.max);
+        if (!chart.marker.enabled && !chart.marker.suppressUpdate) {
+            if (e.x > xScale.getPixelForValue(xScale.max)) {
+                // suppress future updates to prevent endless redrawing of chart
+                chart.marker.suppressUpdate = true;
+                chart.update('none');
+            }
+            chart.marker.dragStarted = false; // cancel zoom in progress
+            return false;
+        }
+        chart.marker.suppressUpdate = false;
+        chart.marker.x = e.x;
+        chart.draw();
+    },
+    doDraw: function (chart) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        if (!chart.marker.enabled) {
+            return;
+        }
+        this.drawTraceLine(chart);
+        this.interpolateValues(chart);
+        this.drawTracePoints(chart);
+        return true;
+    },
+    beforeDraw: function (chart) {
+        return this.doDraw(chart);
+    },
+    // Logic moved to beforeDraw in order
+    // for the vertical line to be drawn
+    // under tooltip and datalabels.
+    // afterDraw: function(chart) {
+    //   return this.doDraw(chart);
+    // },
+    drawTraceLine: function (chart) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        var yScale = this.getYScale(chart);
+        var lineWidth = this.getOption(chart, 'line', 'width');
+        var color = this.getOption(chart, 'line', 'color');
+        var dashPattern = this.getOption(chart, 'line', 'dashPattern');
+        var snapEnabled = this.getOption(chart, 'snap', 'enabled');
+        var lineX = chart.marker.x;
+        if (snapEnabled && chart._active.length) {
+            lineX = chart._active[0].element.x;
+        }
+        chart.ctx.beginPath();
+        chart.ctx.setLineDash(dashPattern);
+        chart.ctx.moveTo(lineX, yScale.getPixelForValue(yScale.max));
+        chart.ctx.lineWidth = lineWidth;
+        chart.ctx.strokeStyle = color;
+        chart.ctx.lineTo(lineX, yScale.getPixelForValue(yScale.min));
+        chart.ctx.stroke();
+        chart.ctx.setLineDash([]);
+    },
+    drawTracePoints: function (chart) {
+        if (!hasMarkerConfiguration(chart)) {
+            return;
+        }
+        for (var chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
+            var dataset = chart.data.datasets[chartIndex];
+            var meta = chart.getDatasetMeta(chartIndex);
+            var yScale = chart.scales[meta.yAxisID];
+            if (meta.hidden || !dataset.interpolate) {
+                continue;
+            }
+            chart.ctx.beginPath();
+            chart.ctx.arc(chart.marker.x, yScale.getPixelForValue(dataset.interpolatedValue), 3, 0, 2 * Math.PI, false);
+            chart.ctx.fillStyle = 'white';
+            chart.ctx.lineWidth = 2;
+            chart.ctx.strokeStyle = dataset.borderColor;
+            chart.ctx.fill();
+            chart.ctx.stroke();
+        }
+    },
+    interpolateValues: function (chart) {
+        for (var chartIndex = 0; chartIndex < chart.data.datasets.length; chartIndex++) {
+            var dataset = chart.data.datasets[chartIndex];
+            var meta = chart.getDatasetMeta(chartIndex);
+            var xScale = chart.scales[meta.xAxisID];
+            var xValue = xScale.getValueForPixel(chart.marker.x);
+            if (meta.hidden || !dataset.interpolate) {
+                continue;
+            }
+            var data = dataset.data;
+            var index = data.findIndex(function (o) {
+                return o.x >= xValue;
+            });
+            var prev = data[index - 1];
+            var next = data[index];
+            if (chart.data.datasets[chartIndex].steppedLine && prev) {
+                dataset.interpolatedValue = prev.y;
+            }
+            else if (prev && next) {
+                var slope = (next.y - prev.y) / (next.x - prev.x);
+                dataset.interpolatedValue = prev.y + (xValue - prev.x) * slope;
+            }
+            else {
+                dataset.interpolatedValue = NaN;
+            }
+        }
+    },
+};
+
 const { getThemeColorHexString: getThemeColorHexString$2 } = ColorHelper;
 const hoverBackgroundColor = getThemeColorHexString$2('primary');
 const backgroundColor = getThemeColorHexString$2('secondary');
@@ -3326,13 +3652,19 @@ const CHART_GLOBAL_DEFAULTS = {
         legend: {
             display: false,
         },
+        datalabels: {
+            display: false,
+        },
+        tooltip: {
+            enabled: false,
+        },
     },
 };
 
 const CHART_SCALES = [CategoryScale, LinearScale];
 const CHART_ELEMENTS = [BarElement, LineElement, PointElement];
 const CHART_CONTROLLERS = [BarController, LineController];
-const CHART_PLUGINS = [annotationPlugin, Filler];
+const CHART_PLUGINS = [annotationPlugin, Filler, ChartDataLabels, Tooltip, MarkerPlugin];
 /* Order matters; defaults must be merged after register as
    register modifies the Chart.defaults objects */
 Chart.register(Legend, ...CHART_SCALES, ...CHART_ELEMENTS, ...CHART_CONTROLLERS, ...CHART_PLUGINS);
@@ -3343,15 +3675,24 @@ Object.entries(CHART_GLOBAL_DEFAULTS).forEach(([key]) => {
     Chart.defaults[key] = mergedDefaults[key];
 });
 
+const CHART_LOCALE_DEFAULT = 'en-US';
 class ChartJSService {
     constructor(chartConfigService) {
         this.chartConfigService = chartConfigService;
     }
     renderChart(args) {
-        const { targetElement, type, data, dataLabels, customOptions, annotations, highlightedElements, } = args;
-        const datasets = this.createDatasets(data, highlightedElements);
-        const options = this.createOptionsObject({ type, customOptions, annotations });
-        const config = this.createConfigurationObject(type, datasets, options, dataLabels);
+        const { targetElement, type, data, dataLabels, customOptions, annotations, dataLabelOptions, highlightedElements, } = args;
+        this.dataLabelOptions = dataLabelOptions || null;
+        this.highlightedElements = highlightedElements || null;
+        this.chartType = type;
+        this.locale = (dataLabelOptions === null || dataLabelOptions === void 0 ? void 0 : dataLabelOptions.locale) || CHART_LOCALE_DEFAULT;
+        const datasets = this.createDatasets(data);
+        const options = this.createOptionsObject({
+            customOptions,
+            annotations,
+            dataLabelOptions,
+        });
+        let config = this.createConfigurationObject(type, datasets, options, dataLabels);
         this.initializeNewChart(targetElement.nativeElement, config);
     }
     redrawChart() {
@@ -3374,15 +3715,20 @@ class ChartJSService {
             this.nonDestructivelyUpdateType(type, customOptions);
         }
     }
+    setDataLabelOptions(dataLabelOptions) {
+        this.dataLabelOptions = dataLabelOptions;
+    }
     updateOptions(customOptions, type) {
         const annotations = this.getExistingChartAnnotations();
-        this.chart.options = this.createOptionsObject({ type, customOptions, annotations });
+        this.chartType = type;
+        this.chart.options = this.createOptionsObject({ customOptions, annotations });
     }
     updateAnnotations(annotations) {
         const annotationsWithDefaults = this.applyDefaultsToAnnotations(annotations);
         this.chart.options.plugins.annotation.annotations = annotationsWithDefaults;
     }
     updateHighlightedElements(highlightedElements) {
+        this.highlightedElements = highlightedElements;
         const oldDatasets = this.chart.data.datasets;
         // Clear old datasets of highlighted elements
         oldDatasets.map((dataset) => {
@@ -3391,7 +3737,7 @@ class ChartJSService {
                 delete dataset.kirbyOptions.highlightedElements;
             }
         });
-        this.chart.data.datasets = this.createDatasets(oldDatasets, highlightedElements);
+        this.chart.data.datasets = this.createDatasets(oldDatasets);
     }
     getExistingChartAnnotations() {
         var _a, _b;
@@ -3410,7 +3756,8 @@ class ChartJSService {
         const datasets = this.chart.data.datasets;
         const dataLabels = this.chart.data.labels;
         const annotations = this.getExistingChartAnnotations();
-        const options = this.createOptionsObject({ type, customOptions, annotations });
+        this.chartType = type;
+        const options = this.createOptionsObject({ customOptions, annotations });
         const config = this.createConfigurationObject(type, datasets, options, dataLabels);
         const canvasElement = this.chart.canvas;
         this.chart.destroy();
@@ -3418,8 +3765,8 @@ class ChartJSService {
     }
     nonDestructivelyUpdateType(chartType, customOptions) {
         const annotations = this.getExistingChartAnnotations();
+        this.chartType = chartType;
         const options = this.createOptionsObject({
-            type: chartType,
             customOptions,
             annotations,
         });
@@ -3459,21 +3806,73 @@ class ChartJSService {
         });
         return options;
     }
+    createStockOptionsObject(dataLabelOptions) {
+        return {
+            locale: this.locale,
+            plugins: {
+                tooltip: {
+                    callbacks: {
+                        title: (tooltipItems) => {
+                            var _a, _b;
+                            const date = toDate((_b = (_a = tooltipItems[0]) === null || _a === void 0 ? void 0 : _a.raw) === null || _b === void 0 ? void 0 : _b.x);
+                            if (date.valueOf()) {
+                                return date.toLocaleTimeString(this.locale, {
+                                    day: 'numeric',
+                                    month: 'short',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                });
+                            }
+                        },
+                        label: (context) => {
+                            // It's not possible to add spacing between color legend and text so we
+                            // prefix with a space.
+                            return ' ' + context.formattedValue + (dataLabelOptions.valueSuffix || '');
+                        },
+                    },
+                },
+            },
+            scales: {
+                y: {
+                    ticks: {
+                        callback: (value) => {
+                            return value + (dataLabelOptions.valueSuffix || '');
+                        },
+                    },
+                },
+            },
+        };
+    }
     createOptionsObject(args) {
-        const { type, customOptions, annotations } = args;
-        const typeConfig = this.chartConfigService.getTypeConfig(type);
+        const { customOptions, annotations, dataLabelOptions: chartDataLabelOptions } = args;
+        const typeConfig = this.chartConfigService.getTypeConfig(this.chartType);
         const typeConfigOptions = typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.options;
         const annotationPluginOptions = annotations
             ? this.createAnnotationPluginOptionsObject(annotations)
             : {};
-        let options = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
+        const stockOptions = this.chartType === 'stock' ? this.createStockOptionsObject(chartDataLabelOptions) : {};
+        let options = mergeDeepAll(stockOptions, typeConfigOptions, customOptions, annotationPluginOptions);
         return this.applyInteractionFunctionsExtensions(options);
     }
+    getDefaultStockLabels(datasets, locale) {
+        const largestDataset = datasets.reduce((previousDataset, currentDataset) => previousDataset.data.length > currentDataset.data.length ? previousDataset : currentDataset);
+        return largestDataset.data.map((point) => toDate(point.x).toLocaleDateString(locale, {
+            month: 'short',
+            day: 'numeric',
+        }));
+    }
     createConfigurationObject(type, datasets, options, dataLabels) {
-        /* chartJS requires labels; if none is provided create an empty string array
-        to make it optional for consumer */
-        const labels = !dataLabels ? this.createBlankLabels(datasets) : dataLabels;
         const typeConfig = this.chartConfigService.getTypeConfig(type);
+        // chartJS requires labels; if none is provided create an empty string array
+        // to make it optional for consumer.
+        // However the stock chart, should have autogenerated labels if no
+        // custom labels are supplied.
+        const isStockType = type === 'stock';
+        const labels = !dataLabels
+            ? isStockType
+                ? this.getDefaultStockLabels(datasets, this.locale)
+                : this.createBlankLabels(datasets)
+            : dataLabels;
         return mergeDeepAll(typeConfig, {
             data: {
                 labels,
@@ -3496,12 +3895,62 @@ class ChartJSService {
             }
         });
     }
-    createDatasets(data, highlightedElements) {
+    createDatasets(data) {
+        var _a, _b, _c;
+        // We need to modify the datasets in order to add datalabels.
+        if (((_a = this.dataLabelOptions) === null || _a === void 0 ? void 0 : _a.showCurrent) || ((_b = this.dataLabelOptions) === null || _b === void 0 ? void 0 : _b.showMax) || ((_c = this.dataLabelOptions) === null || _c === void 0 ? void 0 : _c.showMin)) {
+            data = this.addDataLabelsData(data);
+        }
         let datasets = isNumberArray(data) ? [{ data }] : data;
-        if (highlightedElements)
-            this.addHighlightedElementsToDatasets(highlightedElements, datasets);
+        if (this.highlightedElements)
+            this.addHighlightedElementsToDatasets(this.highlightedElements, datasets);
         return datasets;
     }
+    /**
+     * Decorate ChartDataset with properties to allow for datalabels.
+     *
+     * @param data
+     * @returns ChartDataset[]
+     */
+    addDataLabelsData(data) {
+        if (isNumberArray(data)) {
+            throw Error("Currently it's impossible to add dataLabels to non ScatterDataPoint datasets");
+        }
+        const decorateDataPoint = (set, axis, direction, position) => {
+            const { value, pointer } = this.locateValueIndexInDataset(set, axis, direction);
+            set.data[pointer] = Object.assign(Object.assign({}, set.data[pointer]), { datalabel: {
+                    value: value + (this.dataLabelOptions.valueSuffix || ''),
+                    position,
+                } });
+        };
+        data.map((set) => {
+            if (this.dataLabelOptions.showMin) {
+                decorateDataPoint(set, 'y', 'low', 'bottom');
+            }
+            if (this.dataLabelOptions.showMax) {
+                decorateDataPoint(set, 'y', 'high', 'top');
+            }
+            if (this.dataLabelOptions.showCurrent) {
+                decorateDataPoint(set, 'x', 'high', 'right');
+            }
+        });
+        return data;
+    }
+    locateValueIndexInDataset(dataset, axis, direction) {
+        let pointer;
+        let value;
+        dataset.data.forEach((datapoint, index) => {
+            if (direction == 'low' && (!value || datapoint[axis] < value)) {
+                value = datapoint['y'];
+                pointer = index;
+            }
+            if (direction == 'high' && (!value || datapoint[axis] > value)) {
+                value = datapoint['y'];
+                pointer = index;
+            }
+        });
+        return { value, pointer };
+    }
 }
 ChartJSService.decorators = [
     { type: Injectable }
@@ -3571,6 +4020,7 @@ class ChartComponent {
             dataLabels: this.dataLabels,
             customOptions: this.customOptions,
             annotations: this.annotations,
+            dataLabelOptions: this.dataLabelOptions,
             highlightedElements: this.highlightedElements,
         });
     }
@@ -3613,6 +4063,7 @@ ChartComponent.propDecorators = {
     data: [{ type: Input }],
     dataLabels: [{ type: Input }],
     customOptions: [{ type: Input }],
+    dataLabelOptions: [{ type: Input }],
     annotations: [{ type: Input }],
     highlightedElements: [{ type: Input }],
     _height: [{ type: HostBinding, args: ['style.--kirby-chart-height',] }],
@@ -3621,7 +4072,7 @@ ChartComponent.propDecorators = {
 };
 
 const stockChartDeprecatedOptions = (locale, height) => {
-    const options = defaultOptions(locale);
+    const options = defaultOptions$1(locale);
     const transparentColor = 'rgba(255,255,255,0)';
     options.chart.backgroundColor = transparentColor;
     options.chart.height = height;
@@ -3717,7 +4168,7 @@ const annotations = (locale) => {
         },
     };
 };
-const defaultOptions = (locale) => {
+const defaultOptions$1 = (locale) => {
     return {
         chart: {
             zoomType: 'x',
@@ -3799,7 +4250,7 @@ const defaultOptions = (locale) => {
         ],
     };
 };
-const ɵ0$6 = defaultOptions;
+const ɵ0$8 = defaultOptions$1;
 
 // @ts-ignore
 AnnotationsModule(Highcharts$1);
@@ -8587,5 +9038,5 @@ KirbyModule.ctorParameters = () => [
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, ProxyCmp as ɵa, AppModule as ɵb, ModalWrapperComponent as ɵba, Modal as ɵbb, ButtonComponent as ɵbc, IconComponent as ɵbd, IconRegistryService as ɵbe, ICON_SETTINGS as ɵbg, ResizeObserverService as ɵbh, ResizeObserverFactory as ɵbi, FitHeadingModule as ɵbj, FitHeadingDirective as ɵbk, LineClampHelper as ɵbl, SpinnerModule as ɵbm, SpinnerComponent as ɵbn, TabsModule as ɵbo, IconModule as ɵbp, TabButtonComponent as ɵbq, ItemModule as ɵbr, ItemComponent as ɵbs, LabelComponent as ɵbt, ToggleButtonModule as ɵbu, ToggleButtonComponent as ɵbv, ListModule as ɵbw, ListComponent as ɵbx, ListHelper as ɵby, GroupByPipe as ɵbz, AppComponent as ɵc, InfiniteScrollDirective as ɵca, ListItemDirective as ɵcb, ListFlexItemDirective as ɵcc, ListItemTemplateDirective as ɵcd, ListHeaderDirective as ɵce, ListSectionHeaderDirective as ɵcf, ListFooterDirective as ɵcg, ListItemComponent as ɵch, ListSectionHeaderComponent as ɵci, ListHeaderComponent as ɵcj, ListExperimentalComponent as ɵck, ListItemColorDirective as ɵcl, ChartModule as ɵcm, ChartComponent as ɵcn, ChartJSService as ɵco, ChartConfigService as ɵcp, CardComponent as ɵcq, CardHeaderComponent as ɵcr, CardFooterComponent as ɵcs, ChartDeprecatedComponent as ɵct, ChartDeprecatedHelper as ɵcu, DONUT_OPTIONS as ɵcv, DonutOptions as ɵcw, AREASPLINE_OPTIONS as ɵcx, AreaSplineOptions as ɵcy, TIMESERIES_OPTIONS as ɵcz, RouterOutletComponent as ɵd, TimeSeriesOptions as ɵda, ACTIVITYGAUGE_OPTIONS as ɵdb, ActivityGaugeOptions as ɵdc, StockChartDeprecatedComponent as ɵdd, GridComponent as ɵde, BreakpointHelperService as ɵdf, ComponentLoaderDirective as ɵdg, AvatarComponent as ɵdh, CalendarComponent as ɵdi, CalendarHelper as ɵdj, CheckboxComponent as ɵdk, ActionSheetComponent as ɵdl, ModalFooterComponent as ɵdm, ModalRouterLinkDirective as ɵdn, SegmentedControlComponent as ɵdo, ChipComponent as ɵdp, ThemeColorDirective as ɵdq, DateInputDirective as ɵdr, DecimalMaskDirective as ɵds, SlideButtonComponent as ɵdt, ToggleComponent as ɵdu, EmptyStateComponent as ɵdv, FormFieldComponent as ɵdw, InputCounterComponent as ɵdx, RadioGroupComponent as ɵdy, RadioComponent as ɵdz, ModalController as ɵe, InputComponent as ɵea, TextareaComponent as ɵeb, FabSheetComponent as ɵec, DividerComponent as ɵed, ReorderListComponent as ɵee, DropdownComponent as ɵef, PopoverComponent as ɵeg, KeyboardHandlerService as ɵeh, LoadingOverlayComponent as ɵei, ProgressCircleComponent as ɵej, FlagComponent as ɵek, SlideDirective as ɵel, SlidesComponent as ɵem, AccordionDirective as ɵen, AccordionItemComponent as ɵeo, ItemSlidingComponent as ɵep, RangeComponent as ɵeq, ElementAsButtonDirective as ɵer, ItemGroupComponent as ɵes, SectionHeaderComponent as ɵet, KeyHandlerDirective as ɵeu, FormFieldMessageComponent as ɵev, AlertComponent as ɵew, ModalCompactWrapperComponent as ɵex, ProgressCircleRingComponent as ɵey, ToastHelper as ɵez, ModalHelper as ɵf, ToastController as ɵfa, LoadingOverlayService as ɵfb, appInitialize as ɵfc, customElementsInitializer as ɵfd, ModalAnimationBuilderService as ɵg, PlatformService as ɵh, WindowRef as ɵi, ActionSheetHelper as ɵj, AlertHelper as ɵk, ModalNavigationService as ɵl, RouterOutletModule as ɵm, PageModule as ɵn, PageTitleDirective as ɵo, PageToolbarTitleDirective as ɵp, PageActionsDirective as ɵq, PageContentDirective as ɵr, PageProgressComponent as ɵs, PageTitleComponent as ɵt, PageContentComponent as ɵu, PageActionsComponent as ɵv, PageComponent as ɵw, TabsComponent as ɵx, TabsService as ɵy, PageFooterComponent as ɵz };
+export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$8 as ɵ0, ProxyCmp as ɵa, AppModule as ɵb, ModalWrapperComponent as ɵba, Modal as ɵbb, ButtonComponent as ɵbc, IconComponent as ɵbd, IconRegistryService as ɵbe, ICON_SETTINGS as ɵbg, ResizeObserverService as ɵbh, ResizeObserverFactory as ɵbi, FitHeadingModule as ɵbj, FitHeadingDirective as ɵbk, LineClampHelper as ɵbl, SpinnerModule as ɵbm, SpinnerComponent as ɵbn, TabsModule as ɵbo, IconModule as ɵbp, TabButtonComponent as ɵbq, ItemModule as ɵbr, ItemComponent as ɵbs, LabelComponent as ɵbt, ToggleButtonModule as ɵbu, ToggleButtonComponent as ɵbv, ListModule as ɵbw, ListComponent as ɵbx, ListHelper as ɵby, GroupByPipe as ɵbz, AppComponent as ɵc, InfiniteScrollDirective as ɵca, ListItemDirective as ɵcb, ListFlexItemDirective as ɵcc, ListItemTemplateDirective as ɵcd, ListHeaderDirective as ɵce, ListSectionHeaderDirective as ɵcf, ListFooterDirective as ɵcg, ListItemComponent as ɵch, ListSectionHeaderComponent as ɵci, ListHeaderComponent as ɵcj, ListExperimentalComponent as ɵck, ListItemColorDirective as ɵcl, ChartModule as ɵcm, ChartComponent as ɵcn, ChartJSService as ɵco, ChartConfigService as ɵcp, CardComponent as ɵcq, CardHeaderComponent as ɵcr, CardFooterComponent as ɵcs, ChartDeprecatedComponent as ɵct, ChartDeprecatedHelper as ɵcu, DONUT_OPTIONS as ɵcv, DonutOptions as ɵcw, AREASPLINE_OPTIONS as ɵcx, AreaSplineOptions as ɵcy, TIMESERIES_OPTIONS as ɵcz, RouterOutletComponent as ɵd, TimeSeriesOptions as ɵda, ACTIVITYGAUGE_OPTIONS as ɵdb, ActivityGaugeOptions as ɵdc, StockChartDeprecatedComponent as ɵdd, GridComponent as ɵde, BreakpointHelperService as ɵdf, ComponentLoaderDirective as ɵdg, AvatarComponent as ɵdh, CalendarComponent as ɵdi, CalendarHelper as ɵdj, CheckboxComponent as ɵdk, ActionSheetComponent as ɵdl, ModalFooterComponent as ɵdm, ModalRouterLinkDirective as ɵdn, SegmentedControlComponent as ɵdo, ChipComponent as ɵdp, ThemeColorDirective as ɵdq, DateInputDirective as ɵdr, DecimalMaskDirective as ɵds, SlideButtonComponent as ɵdt, ToggleComponent as ɵdu, EmptyStateComponent as ɵdv, FormFieldComponent as ɵdw, InputCounterComponent as ɵdx, RadioGroupComponent as ɵdy, RadioComponent as ɵdz, ModalController as ɵe, InputComponent as ɵea, TextareaComponent as ɵeb, FabSheetComponent as ɵec, DividerComponent as ɵed, ReorderListComponent as ɵee, DropdownComponent as ɵef, PopoverComponent as ɵeg, KeyboardHandlerService as ɵeh, LoadingOverlayComponent as ɵei, ProgressCircleComponent as ɵej, FlagComponent as ɵek, SlideDirective as ɵel, SlidesComponent as ɵem, AccordionDirective as ɵen, AccordionItemComponent as ɵeo, ItemSlidingComponent as ɵep, RangeComponent as ɵeq, ElementAsButtonDirective as ɵer, ItemGroupComponent as ɵes, SectionHeaderComponent as ɵet, KeyHandlerDirective as ɵeu, FormFieldMessageComponent as ɵev, AlertComponent as ɵew, ModalCompactWrapperComponent as ɵex, ProgressCircleRingComponent as ɵey, ToastHelper as ɵez, ModalHelper as ɵf, ToastController as ɵfa, LoadingOverlayService as ɵfb, appInitialize as ɵfc, customElementsInitializer as ɵfd, ModalAnimationBuilderService as ɵg, PlatformService as ɵh, WindowRef as ɵi, ActionSheetHelper as ɵj, AlertHelper as ɵk, ModalNavigationService as ɵl, RouterOutletModule as ɵm, PageModule as ɵn, PageTitleDirective as ɵo, PageToolbarTitleDirective as ɵp, PageActionsDirective as ɵq, PageContentDirective as ɵr, PageProgressComponent as ɵs, PageTitleComponent as ɵt, PageContentComponent as ɵu, PageActionsComponent as ɵv, PageComponent as ɵw, TabsComponent as ɵx, TabsService as ɵy, PageFooterComponent as ɵz };
 //# sourceMappingURL=kirbydesign-designsystem.js.map