@kirbydesign/designsystem 5.0.2 → 5.0.6

package/bundles/kirbydesign-designsystem.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@kirbydesign/core'), require('@angular/core'), require('@ionic/angular'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('highcharts'), require('chart.js'), require('chartjs-plugin-annotation'), require('highcharts/highstock'), require('highcharts/modules/annotations'), require('date-fns'), require('date-fns-tz'), require('date-fns/locale'), require('@angular/forms'), require('inputmask/lib/extensions/inputmask.date.extensions'), require('inputmask/lib/inputmask'), require('inputmask/lib/extensions/inputmask.numeric.extensions'), require('@angular/animations'), require('@kirbydesign/core/loader')) :
-    typeof define === 'function' && define.amd ? define('@kirbydesign/designsystem', ['exports', '@kirbydesign/core', '@angular/core', '@ionic/angular', '@angular/router', 'rxjs', 'rxjs/operators', '@angular/common', 'highcharts', 'chart.js', 'chartjs-plugin-annotation', 'highcharts/highstock', 'highcharts/modules/annotations', 'date-fns', 'date-fns-tz', 'date-fns/locale', '@angular/forms', 'inputmask/lib/extensions/inputmask.date.extensions', 'inputmask/lib/inputmask', 'inputmask/lib/extensions/inputmask.numeric.extensions', '@angular/animations', '@kirbydesign/core/loader'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.kirbydesign = global.kirbydesign || {}, global.kirbydesign.designsystem = {}), global.core, global.ng.core, global.ionic, global.ng.router, global.rxjs, global.rxjs.operators, global.ng.common, global.highcharts, global.chart_js, global.annotationPlugin, global['highcharts/highstock'], global.highcharts, global['date-fns'], global['date-fns-tz'], global.locale, global.ng.forms, null, global.inputmask, null, global.ng.animations, global.loader));
-}(this, (function (exports, core, i0, i1, i1$1, rxjs, operators, common, Highcharts, chart_js, annotationPlugin, Highcharts$1, AnnotationsModule, dateFns, dateFnsTz, locale, forms, inputmask_date_extensions, Inputmask, inputmask_numeric_extensions, animations, loader) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@kirbydesign/core'), require('@angular/core'), require('@ionic/angular'), require('@angular/router'), require('rxjs'), require('rxjs/operators'), require('@angular/common'), require('highcharts'), require('date-fns'), require('ts-deepcopy'), require('chart.js'), require('chartjs-plugin-annotation'), require('chartjs-plugin-datalabels'), require('chart.js/helpers'), require('highcharts/highstock'), require('highcharts/modules/annotations'), require('date-fns-tz'), require('date-fns/locale'), require('@angular/forms'), require('inputmask/lib/extensions/inputmask.date.extensions'), require('inputmask/lib/inputmask'), require('inputmask/lib/extensions/inputmask.numeric.extensions'), require('@angular/animations'), require('@kirbydesign/core/loader')) :
+    typeof define === 'function' && define.amd ? define('@kirbydesign/designsystem', ['exports', '@kirbydesign/core', '@angular/core', '@ionic/angular', '@angular/router', 'rxjs', 'rxjs/operators', '@angular/common', 'highcharts', 'date-fns', 'ts-deepcopy', 'chart.js', 'chartjs-plugin-annotation', 'chartjs-plugin-datalabels', 'chart.js/helpers', 'highcharts/highstock', 'highcharts/modules/annotations', 'date-fns-tz', 'date-fns/locale', '@angular/forms', 'inputmask/lib/extensions/inputmask.date.extensions', 'inputmask/lib/inputmask', 'inputmask/lib/extensions/inputmask.numeric.extensions', '@angular/animations', '@kirbydesign/core/loader'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.kirbydesign = global.kirbydesign || {}, global.kirbydesign.designsystem = {}), global.core, global.ng.core, global.ionic, global.ng.router, global.rxjs, global.rxjs.operators, global.ng.common, global.highcharts, global['date-fns'], global._deepCopy, global.chart_js, global.annotationPlugin, global.ChartDataLabels, global.helpers, global['highcharts/highstock'], global.highcharts, global['date-fns-tz'], global.locale, global.ng.forms, null, global.inputmask, null, global.ng.animations, global.loader));
+}(this, (function (exports, core, i0, i1, i1$1, rxjs, operators, common, Highcharts, dateFns, _deepCopy, chart_js, annotationPlugin, ChartDataLabels, helpers, Highcharts$1, AnnotationsModule, dateFnsTz, locale, forms, inputmask_date_extensions, Inputmask, inputmask_numeric_extensions, animations, loader) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -27,7 +27,9 @@
     }
 
     var Highcharts__namespace = /*#__PURE__*/_interopNamespace(Highcharts);
+    var _deepCopy__default = /*#__PURE__*/_interopDefaultLegacy(_deepCopy);
     var annotationPlugin__default = /*#__PURE__*/_interopDefaultLegacy(annotationPlugin);
+    var ChartDataLabels__default = /*#__PURE__*/_interopDefaultLegacy(ChartDataLabels);
     var Highcharts__namespace$1 = /*#__PURE__*/_interopNamespace(Highcharts$1);
     var AnnotationsModule__default = /*#__PURE__*/_interopDefaultLegacy(AnnotationsModule);
     var Inputmask__default = /*#__PURE__*/_interopDefaultLegacy(Inputmask);
@@ -3845,10 +3847,42 @@
         cssClass: [{ type: i0.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__default['default'](obj);
     }
 
+    /*
+      Utility function to check if a given element
+      has an ancestor with a specific node name.
+
+      Can be given a 'stopNodeName' to limit the search
+      as to not climb all the way up through the DOM tree.
+
+      Returns true when element has the ancestorNodeName
+      or an ancestor has the ancestorNodeName.
+
+      Returns false otherwise.
+    */
+    var elementHasAncestor = function (element, ancestorNodeName, stopNodeName) {
+        switch (element === null || element === void 0 ? void 0 : element.nodeName) {
+            case undefined:
+            case stopNodeName === null || stopNodeName === void 0 ? void 0 : stopNodeName.toUpperCase():
+                return false;
+            case ancestorNodeName.toUpperCase():
+                return true;
+            default:
+                return elementHasAncestor(element.parentElement, ancestorNodeName, stopNodeName);
+        }
+    };
+
     // re-export helpers from core, to preserve backwards compatability
 
     var getThemeColorHexString = core.ColorHelper.getThemeColorHexString;
@@ -3898,6 +3932,13 @@
 
     var fontSize$2 = core.DesignTokenHelper.fontSize;
     var getThemeColorHexString$1 = core.ColorHelper.getThemeColorHexString, getThemeColorRgbString = core.ColorHelper.getThemeColorRgbString;
+    /**
+     * A filter to read a chartpoint from a Chart.js point context (used for chartdata points). Context is provided by Chart.js.
+     */
+    var getChartPointFromContext = function (context) {
+        return context.dataset.data[context.dataIndex];
+    };
+    var ɵ0$6 = getChartPointFromContext;
     var CHART_TYPES_CONFIG = {
         bar: {
             type: 'bar',
@@ -3992,6 +4033,115 @@
                 },
             },
         },
+        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: function (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: function (context) { return 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: function (context) { var _a; return (_a = getChartPointFromContext(context)) === null || _a === void 0 ? void 0 : _a.datalabel.position; },
+                        display: function (context) { var _a; return !!((_a = getChartPointFromContext(context)) === null || _a === void 0 ? void 0 : _a.datalabel); },
+                        formatter: function (value) { return value.datalabel.value; },
+                    },
+                },
+            },
+        },
     };
 
     var ChartConfigService = /** @class */ (function () {
@@ -4020,6 +4170,205 @@
         { type: i0.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,
+        },
+    };
+    var hasMarkerConfiguration = function (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
+    };
+    var ɵ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 helpers.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;
+            }
+            var 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;
+                }
+            }
+        },
+    };
+
     var getThemeColorHexString$2 = core.ColorHelper.getThemeColorHexString;
     var hoverBackgroundColor = getThemeColorHexString$2('primary');
     var backgroundColor = getThemeColorHexString$2('secondary');
@@ -4079,13 +4428,19 @@
             legend: {
                 display: false,
             },
+            datalabels: {
+                display: false,
+            },
+            tooltip: {
+                enabled: false,
+            },
         },
     };
 
     var CHART_SCALES = [chart_js.CategoryScale, chart_js.LinearScale];
     var CHART_ELEMENTS = [chart_js.BarElement, chart_js.LineElement, chart_js.PointElement];
     var CHART_CONTROLLERS = [chart_js.BarController, chart_js.LineController];
-    var CHART_PLUGINS = [annotationPlugin__default['default'], chart_js.Filler];
+    var CHART_PLUGINS = [annotationPlugin__default['default'], chart_js.Filler, ChartDataLabels__default['default'], chart_js.Tooltip, MarkerPlugin];
     /* Order matters; defaults must be merged after register as
        register modifies the Chart.defaults objects */
     chart_js.Chart.register.apply(chart_js.Chart, __spread([chart_js.Legend], CHART_SCALES, CHART_ELEMENTS, CHART_CONTROLLERS, CHART_PLUGINS));
@@ -4097,14 +4452,23 @@
         chart_js.Chart.defaults[key] = mergedDefaults[key];
     });
 
+    var CHART_LOCALE_DEFAULT = 'en-US';
     var ChartJSService = /** @class */ (function () {
         function ChartJSService(chartConfigService) {
             this.chartConfigService = chartConfigService;
         }
         ChartJSService.prototype.renderChart = function (args) {
-            var targetElement = args.targetElement, type = args.type, data = args.data, dataLabels = args.dataLabels, customOptions = args.customOptions, annotations = args.annotations, highlightedElements = args.highlightedElements;
-            var datasets = this.createDatasets(data, highlightedElements);
-            var options = this.createOptionsObject({ type: type, customOptions: customOptions, annotations: annotations });
+            var targetElement = args.targetElement, type = args.type, data = args.data, dataLabels = args.dataLabels, customOptions = args.customOptions, annotations = args.annotations, dataLabelOptions = args.dataLabelOptions, highlightedElements = args.highlightedElements;
+            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;
+            var datasets = this.createDatasets(data);
+            var options = this.createOptionsObject({
+                customOptions: customOptions,
+                annotations: annotations,
+                dataLabelOptions: dataLabelOptions,
+            });
             var config = this.createConfigurationObject(type, datasets, options, dataLabels);
             this.initializeNewChart(targetElement.nativeElement, config);
         };
@@ -4128,15 +4492,20 @@
                 this.nonDestructivelyUpdateType(type, customOptions);
             }
         };
+        ChartJSService.prototype.setDataLabelOptions = function (dataLabelOptions) {
+            this.dataLabelOptions = dataLabelOptions;
+        };
         ChartJSService.prototype.updateOptions = function (customOptions, type) {
             var annotations = this.getExistingChartAnnotations();
-            this.chart.options = this.createOptionsObject({ type: type, customOptions: customOptions, annotations: annotations });
+            this.chartType = type;
+            this.chart.options = this.createOptionsObject({ customOptions: customOptions, annotations: annotations });
         };
         ChartJSService.prototype.updateAnnotations = function (annotations) {
             var annotationsWithDefaults = this.applyDefaultsToAnnotations(annotations);
             this.chart.options.plugins.annotation.annotations = annotationsWithDefaults;
         };
         ChartJSService.prototype.updateHighlightedElements = function (highlightedElements) {
+            this.highlightedElements = highlightedElements;
             var oldDatasets = this.chart.data.datasets;
             // Clear old datasets of highlighted elements
             oldDatasets.map(function (dataset) {
@@ -4145,7 +4514,7 @@
                     delete dataset.kirbyOptions.highlightedElements;
                 }
             });
-            this.chart.data.datasets = this.createDatasets(oldDatasets, highlightedElements);
+            this.chart.data.datasets = this.createDatasets(oldDatasets);
         };
         ChartJSService.prototype.getExistingChartAnnotations = function () {
             var _a, _b;
@@ -4164,7 +4533,8 @@
             var datasets = this.chart.data.datasets;
             var dataLabels = this.chart.data.labels;
             var annotations = this.getExistingChartAnnotations();
-            var options = this.createOptionsObject({ type: type, customOptions: customOptions, annotations: annotations });
+            this.chartType = type;
+            var options = this.createOptionsObject({ customOptions: customOptions, annotations: annotations });
             var config = this.createConfigurationObject(type, datasets, options, dataLabels);
             var canvasElement = this.chart.canvas;
             this.chart.destroy();
@@ -4172,8 +4542,8 @@
         };
         ChartJSService.prototype.nonDestructivelyUpdateType = function (chartType, customOptions) {
             var annotations = this.getExistingChartAnnotations();
+            this.chartType = chartType;
             var options = this.createOptionsObject({
-                type: chartType,
                 customOptions: customOptions,
                 annotations: annotations,
             });
@@ -4206,8 +4576,8 @@
         };
         ChartJSService.prototype.applyInteractionFunctionsExtensions = function (options) {
             var interactionFunctionsExtensions = this.chartConfigService.getInteractionFunctionsExtensions();
-            Object.entries(interactionFunctionsExtensions).forEach(function (_c) {
-                var _d = __read(_c, 2), key = _d[0], _ = _d[1];
+            Object.entries(interactionFunctionsExtensions).forEach(function (_d) {
+                var _e = __read(_d, 2), key = _e[0], _ = _e[1];
                 var callback = options[key];
                 options[key] = function (e, a, c) {
                     interactionFunctionsExtensions[key](e, a, c, callback);
@@ -4215,21 +4585,74 @@
             });
             return options;
         };
+        ChartJSService.prototype.createStockOptionsObject = function (dataLabelOptions) {
+            var _this = this;
+            return {
+                locale: this.locale,
+                plugins: {
+                    tooltip: {
+                        callbacks: {
+                            title: function (tooltipItems) {
+                                var _a, _b;
+                                var date = dateFns.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: function (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: function (value) {
+                                return value + (dataLabelOptions.valueSuffix || '');
+                            },
+                        },
+                    },
+                },
+            };
+        };
         ChartJSService.prototype.createOptionsObject = function (args) {
-            var type = args.type, customOptions = args.customOptions, annotations = args.annotations;
-            var typeConfig = this.chartConfigService.getTypeConfig(type);
+            var customOptions = args.customOptions, annotations = args.annotations, chartDataLabelOptions = args.dataLabelOptions;
+            var typeConfig = this.chartConfigService.getTypeConfig(this.chartType);
             var typeConfigOptions = typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.options;
             var annotationPluginOptions = annotations
                 ? this.createAnnotationPluginOptionsObject(annotations)
                 : {};
-            var options = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
+            var stockOptions = this.chartType === 'stock' ? this.createStockOptionsObject(chartDataLabelOptions) : {};
+            var options = mergeDeepAll(stockOptions, typeConfigOptions, customOptions, annotationPluginOptions);
             return this.applyInteractionFunctionsExtensions(options);
         };
+        ChartJSService.prototype.getDefaultStockLabels = function (datasets, locale) {
+            var largestDataset = datasets.reduce(function (previousDataset, currentDataset) { return previousDataset.data.length > currentDataset.data.length ? previousDataset : currentDataset; });
+            return largestDataset.data.map(function (point) { return dateFns.toDate(point.x).toLocaleDateString(locale, {
+                month: 'short',
+                day: 'numeric',
+            }); });
+        };
         ChartJSService.prototype.createConfigurationObject = function (type, datasets, options, dataLabels) {
-            /* chartJS requires labels; if none is provided create an empty string array
-            to make it optional for consumer */
-            var labels = !dataLabels ? this.createBlankLabels(datasets) : dataLabels;
             var 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.
+            var isStockType = type === 'stock';
+            var labels = !dataLabels
+                ? isStockType
+                    ? this.getDefaultStockLabels(datasets, this.locale)
+                    : this.createBlankLabels(datasets)
+                : dataLabels;
             return mergeDeepAll(typeConfig, {
                 data: {
                     labels: labels,
@@ -4239,8 +4662,8 @@
             });
         };
         ChartJSService.prototype.addHighlightedElementsToDatasets = function (highlightedElements, datasets) {
-            highlightedElements.forEach(function (_c) {
-                var _d = __read(_c, 2), datasetIndex = _d[0], dataIndex = _d[1];
+            highlightedElements.forEach(function (_d) {
+                var _e = __read(_d, 2), datasetIndex = _e[0], dataIndex = _e[1];
                 var _a;
                 var dataset = datasets[datasetIndex];
                 if (!dataset)
@@ -4253,12 +4676,63 @@
                 }
             });
         };
-        ChartJSService.prototype.createDatasets = function (data, highlightedElements) {
+        ChartJSService.prototype.createDatasets = function (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);
+            }
             var datasets = isNumberArray(data) ? [{ 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[]
+         */
+        ChartJSService.prototype.addDataLabelsData = function (data) {
+            var _this = this;
+            if (isNumberArray(data)) {
+                throw Error("Currently it's impossible to add dataLabels to non ScatterDataPoint datasets");
+            }
+            var decorateDataPoint = function (set, axis, direction, position) {
+                var _d = _this.locateValueIndexInDataset(set, axis, direction), value = _d.value, pointer = _d.pointer;
+                set.data[pointer] = Object.assign(Object.assign({}, set.data[pointer]), { datalabel: {
+                        value: value + (_this.dataLabelOptions.valueSuffix || ''),
+                        position: position,
+                    } });
+            };
+            data.map(function (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;
+        };
+        ChartJSService.prototype.locateValueIndexInDataset = function (dataset, axis, direction) {
+            var pointer;
+            var value;
+            dataset.data.forEach(function (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: value, pointer: pointer };
+        };
         return ChartJSService;
     }());
     ChartJSService.decorators = [
@@ -4340,6 +4814,7 @@
                 dataLabels: this.dataLabels,
                 customOptions: this.customOptions,
                 annotations: this.annotations,
+                dataLabelOptions: this.dataLabelOptions,
                 highlightedElements: this.highlightedElements,
             });
         };
@@ -4383,6 +4858,7 @@
         data: [{ type: i0.Input }],
         dataLabels: [{ type: i0.Input }],
         customOptions: [{ type: i0.Input }],
+        dataLabelOptions: [{ type: i0.Input }],
         annotations: [{ type: i0.Input }],
         highlightedElements: [{ type: i0.Input }],
         _height: [{ type: i0.HostBinding, args: ['style.--kirby-chart-height',] }],
@@ -4391,7 +4867,7 @@
     };
 
     var stockChartDeprecatedOptions = function (locale, height) {
-        var options = defaultOptions(locale);
+        var options = defaultOptions$1(locale);
         var transparentColor = 'rgba(255,255,255,0)';
         options.chart.backgroundColor = transparentColor;
         options.chart.height = height;
@@ -4487,7 +4963,7 @@
             },
         };
     };
-    var defaultOptions = function (locale) {
+    var defaultOptions$1 = function (locale) {
         return {
             chart: {
                 zoomType: 'x',
@@ -4569,7 +5045,7 @@
             ],
         };
     };
-    var ɵ0$6 = defaultOptions;
+    var ɵ0$8 = defaultOptions$1;
 
     // @ts-ignore
     AnnotationsModule__default['default'](Highcharts__namespace$1);
@@ -5189,6 +5665,41 @@
         _hasYearNavigator: [{ type: i0.HostBinding, args: ['class.has-year-navigator',] }]
     };
 
+    var ItemSlidingComponent = /** @class */ (function () {
+        function ItemSlidingComponent() {
+            this._side = 'start';
+        }
+        Object.defineProperty(ItemSlidingComponent.prototype, "side", {
+            set: function (value) {
+                this._side = value === 'left' ? 'start' : 'end';
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ItemSlidingComponent.prototype, "_hasSwipeActions", {
+            get: function () {
+                var _a;
+                // Using '>' instead of '!==';
+                // will only return true when swipeActions is an array
+                return ((_a = this.swipeActions) === null || _a === void 0 ? void 0 : _a.length) > 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ItemSlidingComponent;
+    }());
+    ItemSlidingComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kirby-item-sliding',
+                    template: "<ion-item-sliding>\n  <ng-content></ng-content>\n\n  <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n    <ng-container *ngFor=\"let swipeAction of swipeActions\">\n      <ion-item-option\n        *ngIf=\"!swipeAction.isDisabled\"\n        [ngClass]=\"swipeAction.type\"\n        (click)=\"swipeAction.onSelected()\"\n      >\n        <kirby-icon\n          *ngIf=\"swipeAction.icon !== undefined\"\n          [name]=\"swipeAction.icon\"\n          slot=\"top\"\n        ></kirby-icon>\n        <ion-label>{{ swipeAction.title }}</ion-label>\n      </ion-item-option>\n    </ng-container>\n  </ion-item-options>\n</ion-item-sliding>\n",
+                    styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option{min-width:92px}"]
+                },] }
+    ];
+    ItemSlidingComponent.propDecorators = {
+        swipeActions: [{ type: i0.Input }],
+        side: [{ type: i0.Input }]
+    };
+
     var UniqueIdGenerator = /** @class */ (function () {
         function UniqueIdGenerator(scope) {
             this.scope = scope;
@@ -7181,7 +7692,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-label',
                     template: "<ion-label>\n  <ng-content></ng-content>\n</ion-label>\n",
-                    styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ion-label ::ng-deep>data,:host-context(kirby-item) ion-label ::ng-deep>h1,:host-context(kirby-item) ion-label ::ng-deep>h2,:host-context(kirby-item) ion-label ::ng-deep>h3,:host-context(kirby-item) ion-label ::ng-deep>h4,:host-context(kirby-item) ion-label ::ng-deep>h5,:host-context(kirby-item) ion-label ::ng-deep>h6,:host-context(kirby-item) ion-label ::ng-deep>p{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host-context(kirby-item) ion-label ::ng-deep>data.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h1.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h2.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h3.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h4.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h5.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h6.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>p.kirby-text-bold{font-weight:700}:host-context(kirby-item) ion-label ::ng-deep>p{font-size:14px}:host-context(kirby-item) ion-label ::ng-deep>[detail],:host-context(kirby-item) ion-label ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host-context(kirby-item) ion-label ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ion-label ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host([slot=end]) ion-label ::ng-deep>[detail],:host([slot=end]) ion-label ::ng-deep>data{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]),:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]){font-weight:700}"]
+                    styles: [":host.horizontal ion-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center}:host.horizontal ion-label ::ng-deep>:not(:first-child){margin-left:12px}:host-context(kirby-item) ion-label ::ng-deep>data,:host-context(kirby-item) ion-label ::ng-deep>h1,:host-context(kirby-item) ion-label ::ng-deep>h2,:host-context(kirby-item) ion-label ::ng-deep>h3,:host-context(kirby-item) ion-label ::ng-deep>h4,:host-context(kirby-item) ion-label ::ng-deep>h5,:host-context(kirby-item) ion-label ::ng-deep>h6,:host-context(kirby-item) ion-label ::ng-deep>p{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host-context(kirby-item) ion-label ::ng-deep>data.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h1.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h2.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h3.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h4.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h5.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>h6.kirby-text-bold,:host-context(kirby-item) ion-label ::ng-deep>p.kirby-text-bold{font-weight:700}:host-context(kirby-item) ion-label ::ng-deep>p{font-size:14px}:host-context(kirby-item) ion-label ::ng-deep>[detail],:host-context(kirby-item) ion-label ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host-context(kirby-item) ion-label ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host-context(kirby-item) ion-label ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host-context(kirby-section-header) ion-label{--padding-end:16px;--padding-start:16px}:host-context(kirby-section-header) ion-label ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host-context(kirby-section-header) ion-label ::ng-deep>[detail],:host-context(kirby-section-header) ion-label ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([slot=end]) ion-label ::ng-deep>[detail],:host([slot=end]) ion-label ::ng-deep>data{margin-inline-start:16px}:host-context(kirby-item.selected) ion-label ::ng-deep>data:not([detail]),:host-context(kirby-item.selected) ion-label ::ng-deep>h1,:host-context(kirby-item.selected) ion-label ::ng-deep>h2,:host-context(kirby-item.selected) ion-label ::ng-deep>h3,:host-context(kirby-item.selected) ion-label ::ng-deep>h4,:host-context(kirby-item.selected) ion-label ::ng-deep>h5,:host-context(kirby-item.selected) ion-label ::ng-deep>h6,:host-context(kirby-item.selected) ion-label ::ng-deep>p:not([detail]){font-weight:700}"]
                 },] }
     ];
     LabelComponent.propDecorators = {
@@ -7625,7 +8136,7 @@
                     selector: 'kirby-list',
                     template: "<ion-list\n  #list\n  kirbyInfiniteScroll\n  (scrollEnd)=\"_onLoadOnDemand()\"\n  [disabled]=\"!isLoadOnDemandEnabled\"\n  class=\"list\"\n  [class.has-header]=\"headerTemplate\"\n  [class.has-footer]=\"footerTemplate\"\n  [class.has-divider]=\"showDivider\"\n>\n  <ion-list-header *ngIf=\"headerTemplate\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  </ion-list-header>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      _isSectionsEnabled ? groupedListTemplate : itemsTemplate;\n      context: { $implicit: items }\n    \"\n  ></ng-container>\n\n  <div *ngIf=\"footerTemplate\" class=\"footer\">\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n  </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n  {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n  <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n  <ion-item-group *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\">\n    <ion-item-divider>\n      <ng-container\n        *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n      ></ng-container>\n    </ion-item-divider>\n\n    <div class=\"list-items\">\n      <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n      ></ng-container>\n    </div>\n  </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n  <kirby-list-item\n    *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n    [item]=\"item\"\n    [itemTemplate]=\"itemTemplate\"\n    [swipeActions]=\"swipeActions\"\n    [boundaryClass]=\"_getBoundaryClass(i, items)\"\n    [isSelectable]=\"_isSelectable\"\n    [getItemColor]=\"getItemColor\"\n    [isSelected]=\"_isSelectable && item === _selectedItem\"\n    (itemSelect)=\"onItemSelect($event)\"\n    (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n    [class.is-single]=\"items.length === 1\"\n  >\n  </kirby-list-item>\n</ng-template>\n",
                     providers: [ListHelper, GroupByPipe],
-                    styles: [":host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action .primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}.swipe-action .secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}.swipe-action .tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}.swipe-action .success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}.swipe-action .warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}.swipe-action .danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}.swipe-action .light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}.swipe-action .medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}.swipe-action .dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}"]
+                    styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}"]
                 },] }
     ];
     /** @nocollapse */
@@ -7792,7 +8303,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-list-item',
                     template: "<ion-item-sliding\n  [class.selected]=\"isSelected\"\n  [kirbyListItemColor]=\"getItemColor\"\n  [item]=\"item\"\n  [disabled]=\"_isSwipingEnabled ? null : true\"\n  keyHandler\n  [ngClass]=\"boundaryClass\"\n  (click)=\"_onItemSelect(item)\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n  ></ng-container>\n  <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n  <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n    <div class=\"swipe-action\">\n      <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n        <ion-item-option\n          [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n          (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n        >\n          <div class=\"item-content\">\n            <kirby-icon\n              *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n              size=\"sm\"\n              [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n            >\n            </kirby-icon>\n            <ion-label>\n              {{ _getSwipeActionTitle(swipeAction, item) }}\n            </ion-label>\n          </div>\n        </ion-item-option>\n      </ng-container>\n    </div>\n  </ion-item-options>\n</ng-template>\n",
-                    styles: [":host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action .primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}.swipe-action .secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}.swipe-action .tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}.swipe-action .success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}.swipe-action .warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}.swipe-action .danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}.swipe-action .light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}.swipe-action .medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}.swipe-action .dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}"]
+                    styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}"]
                 },] }
     ];
     /** @nocollapse */
@@ -7841,6 +8352,11 @@
     var ListExperimentalComponent = /** @class */ (function () {
         function ListExperimentalComponent() {
         }
+        ListExperimentalComponent.prototype.closeAllSlidingItems = function (e) {
+            if (elementHasAncestor(e.target, 'ion-item-option', 'ion-list')) {
+                this.list.closeSlidingItems();
+            }
+        };
         return ListExperimentalComponent;
     }());
     ListExperimentalComponent.decorators = [
@@ -7849,6 +8365,10 @@
                     template: "<ion-list>\n  <ng-content></ng-content>\n</ion-list>\n"
                 },] }
     ];
+    ListExperimentalComponent.propDecorators = {
+        list: [{ type: i0.ViewChild, args: [i1.IonList, { static: true },] }],
+        closeAllSlidingItems: [{ type: i0.HostListener, args: ['click', ['$event'],] }]
+    };
 
     var ReorderEvent = /** @class */ (function () {
         function ReorderEvent(ev, parentItem) {
@@ -8622,6 +9142,19 @@
                 },] }
     ];
 
+    var SectionHeaderComponent = /** @class */ (function () {
+        function SectionHeaderComponent() {
+        }
+        return SectionHeaderComponent;
+    }());
+    SectionHeaderComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kirby-section-header',
+                    template: "<ion-item-divider>\n  <ng-content></ng-content>\n</ion-item-divider>\n",
+                    styles: [":host{--kirby-section-header-color:var(--kirby-text-color-black)}:host ion-item-divider{--inner-padding-end:0;--background:transparent;--padding-end:16px;--padding-start:16px;font-weight:inherit;min-height:0}:host ion-item-divider ::ng-deep>[heading]{font-weight:700;font-size:18px;line-height:24px;color:var(--kirby-section-header-color);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host ion-item-divider ::ng-deep>[detail],:host ion-item-divider ::ng-deep>[label]{font-weight:300;font-size:14px;line-height:20px;color:var(--kirby-section-header-color);margin:4px 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}"]
+                },] }
+    ];
+
     (function (SegmentedControlMode) {
         SegmentedControlMode["chip"] = "chip";
         SegmentedControlMode["compactChip"] = "compactChip";
@@ -9832,11 +10365,13 @@
         SlideDirective,
         AccordionDirective,
         AccordionItemComponent,
+        ItemSlidingComponent,
         RadioComponent,
         RadioGroupComponent,
         RangeComponent,
         ElementAsButtonDirective,
         ItemGroupComponent,
+        SectionHeaderComponent,
     ];
     var declarations$1 = __spread(exportedDeclarations$1, [
         KeyHandlerDirective,
@@ -10021,6 +10556,7 @@
     exports.ItemComponent = ItemComponent;
     exports.ItemGroupComponent = ItemGroupComponent;
     exports.ItemModule = ItemModule;
+    exports.ItemSlidingComponent = ItemSlidingComponent;
     exports.KeyHandlerDirective = KeyHandlerDirective;
     exports.KirbyModule = KirbyModule;
     exports.LabelComponent = LabelComponent;
@@ -10065,6 +10601,7 @@
     exports.RouterOutletComponent = RouterOutletComponent;
     exports.RouterOutletModule = RouterOutletModule;
     exports.ScssHelper = ScssHelper;
+    exports.SectionHeaderComponent = SectionHeaderComponent;
     exports.SegmentedControlComponent = SegmentedControlComponent;
     exports.SlideButtonComponent = SlideButtonComponent;
     exports.SlideDirective = SlideDirective;
@@ -10082,10 +10619,11 @@
     exports.ToggleComponent = ToggleComponent;
     exports.annotations = annotations;
     exports.defaultIcons = defaultIcons;
+    exports.elementHasAncestor = elementHasAncestor;
     exports.isNumberArray = isNumberArray;
     exports.selectedTabClickEvent = selectedTabClickEvent;
     exports.stockChartDeprecatedOptions = stockChartDeprecatedOptions;
-    exports.ɵ0 = ɵ0$6;
+    exports.ɵ0 = ɵ0$8;
     exports.ɵa = ProxyCmp;
     exports.ɵb = AppModule;
     exports.ɵba = ModalWrapperComponent;
@@ -10183,20 +10721,22 @@
     exports.ɵem = SlidesComponent;
     exports.ɵen = AccordionDirective;
     exports.ɵeo = AccordionItemComponent;
-    exports.ɵep = RangeComponent;
-    exports.ɵeq = ElementAsButtonDirective;
-    exports.ɵer = ItemGroupComponent;
-    exports.ɵes = KeyHandlerDirective;
-    exports.ɵet = FormFieldMessageComponent;
-    exports.ɵeu = AlertComponent;
-    exports.ɵev = ModalCompactWrapperComponent;
-    exports.ɵew = ProgressCircleRingComponent;
-    exports.ɵex = ToastHelper;
-    exports.ɵey = ToastController;
-    exports.ɵez = LoadingOverlayService;
+    exports.ɵep = ItemSlidingComponent;
+    exports.ɵeq = RangeComponent;
+    exports.ɵer = ElementAsButtonDirective;
+    exports.ɵes = ItemGroupComponent;
+    exports.ɵet = SectionHeaderComponent;
+    exports.ɵeu = KeyHandlerDirective;
+    exports.ɵev = FormFieldMessageComponent;
+    exports.ɵew = AlertComponent;
+    exports.ɵex = ModalCompactWrapperComponent;
+    exports.ɵey = ProgressCircleRingComponent;
+    exports.ɵez = ToastHelper;
     exports.ɵf = ModalHelper;
-    exports.ɵfa = appInitialize;
-    exports.ɵfb = customElementsInitializer;
+    exports.ɵfa = ToastController;
+    exports.ɵfb = LoadingOverlayService;
+    exports.ɵfc = appInitialize;
+    exports.ɵfd = customElementsInitializer;
     exports.ɵg = ModalAnimationBuilderService;
     exports.ɵh = PlatformService;
     exports.ɵi = WindowRef;