@kirbydesign/designsystem 5.0.22 → 5.2.2

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('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';
+    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-adapter-date-fns'), 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-adapter-date-fns', '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, null, 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, chartjsAdapterDateFns, 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 }; }
 
@@ -2829,6 +2829,13 @@
             this.flat = false;
             this.highlighted = false;
         }
+        Object.defineProperty(CardComponent.prototype, "backgroundImageUrl", {
+            set: function (value) {
+                this._backgroundImage = "url('" + value + "')";
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(CardComponent.prototype, "sizes", {
             set: function (value) {
                 if (typeof value === 'string') {
@@ -2883,7 +2890,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-card',
                     template: "<ng-content select=\"kirby-card-header\"></ng-content>\n<div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n  <ng-content></ng-content>\n</div>\n<ng-content select=\"kirby-card-footer\"></ng-content>\n",
-                    styles: [":host{--kirby-card-main-background-color:var(--kirby-white);--kirby-card-main-color:var(--kirby-white-contrast);--kirby-card-footer-background-color:var(--kirby-white);--kirby-card-footer-color:var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width,auto)}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host.flat{box-shadow:none}:host[role=button]{cursor:pointer;outline-offset:2px}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color:var(--kirby-primary);--kirby-card-main-color:var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color:var(--kirby-secondary);--kirby-card-main-color:var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color:var(--kirby-tertiary);--kirby-card-main-color:var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color:var(--kirby-success);--kirby-card-main-color:var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color:var(--kirby-warning);--kirby-card-main-color:var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color:var(--kirby-danger);--kirby-card-main-color:var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color:var(--kirby-light);--kirby-card-main-color:var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color:var(--kirby-medium);--kirby-card-main-color:var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color:var(--kirby-dark);--kirby-card-main-color:var(--kirby-dark-contrast)}"]
+                    styles: [":host{--kirby-card-main-background-color:var(--kirby-white);--kirby-card-main-color:var(--kirby-white-contrast);--kirby-card-footer-background-color:var(--kirby-white);--kirby-card-footer-color:var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat,no-repeat);background-position:var(--kirby-card-background-position,center);background-size:var(--kirby-card-background-size,cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width,auto)}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host.flat{box-shadow:none}:host[role=button]{cursor:pointer;outline-offset:2px}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color:var(--kirby-primary);--kirby-card-main-color:var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color:var(--kirby-secondary);--kirby-card-main-color:var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color:var(--kirby-tertiary);--kirby-card-main-color:var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color:var(--kirby-success);--kirby-card-main-color:var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color:var(--kirby-warning);--kirby-card-main-color:var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color:var(--kirby-danger);--kirby-card-main-color:var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color:var(--kirby-light);--kirby-card-main-color:var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color:var(--kirby-medium);--kirby-card-main-color:var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color:var(--kirby-dark);--kirby-card-main-color:var(--kirby-dark-contrast)}"]
                 },] }
     ];
     /** @nocollapse */
@@ -2895,6 +2902,8 @@
     CardComponent.propDecorators = {
         title: [{ type: i0.Input }],
         subtitle: [{ type: i0.Input }],
+        _backgroundImage: [{ type: i0.HostBinding, args: ['style.--kirby-card-background-image',] }],
+        backgroundImageUrl: [{ type: i0.Input }],
         hasPadding: [{ type: i0.Input }],
         sizes: [{ type: i0.Input }],
         flat: [{ type: i0.HostBinding, args: ['class.flat',] }],
@@ -4427,7 +4436,7 @@
         },
     };
 
-    var CHART_SCALES = [chart_js.CategoryScale, chart_js.LinearScale];
+    var CHART_SCALES = [chart_js.CategoryScale, chart_js.LinearScale, chart_js.TimeScale];
     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, ChartDataLabels__default['default'], chart_js.Tooltip, MarkerPlugin];
@@ -4635,12 +4644,28 @@
             var _this = this;
             var typeConfig = this.chartConfigService.getTypeConfig(type);
             var labelsToApply = (function () {
-                if ((labels === null || labels === void 0 ? void 0 : labels.length) > 0)
-                    return labels;
-                else if (type === 'stock')
+                var _a, _b;
+                if (type === 'stock') {
+                    /*
+                       The time scale will auto generate labels based on data.
+                       It should be possible to pass an empty array to get the default
+                       behaviour of chart.js when using stock chart.
+            
+                       TODO: Simplify to always pass labels, if given, to chart.js.
+                       Would be a breaking change. See issue:
+                       https://github.com/kirbydesign/designsystem/issues/2085
+                    */
+                    var shouldUseTimescaleLabels = (labels === null || labels === void 0 ? void 0 : labels.length) === 0 && ((_b = (_a = options === null || options === void 0 ? void 0 : options.scales) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.type) === 'time';
+                    if (shouldUseTimescaleLabels)
+                        return labels;
                     return _this.getDefaultStockLabels(datasets, _this.locale);
-                else
-                    return _this.createBlankLabels(datasets); // ChartJS requires labels
+                }
+                else if ((labels === null || labels === void 0 ? void 0 : labels.length) > 0) {
+                    return labels;
+                }
+                else {
+                    return _this.createBlankLabels(datasets);
+                }
             })();
             return mergeDeepAll(typeConfig, {
                 data: {
@@ -4746,6 +4771,7 @@
         function ChartComponent(chartJSService) {
             this.chartJSService = chartJSService;
             this.type = 'column';
+            this.chartHasBeenRendered = false;
         }
         Object.defineProperty(ChartComponent.prototype, "labels", {
             get: function () {
@@ -4804,28 +4830,31 @@
         };
         ChartComponent.prototype.ngOnChanges = function (simpleChanges) {
             var _this = this;
-            var shouldRedrawChart = false;
-            // TODO: Remove 'dataLabels' key when the input property is removed
-            var keyUpdateFnPairs = {
-                data: function () { return _this.updateData(); },
-                dataLabels: function () { return _this.updateLabels(); },
-                labels: function () { return _this.updateLabels(); },
-                type: function () { return _this.updateType(); },
-                customOptions: function () { return _this.updateCustomOptions(); },
-                annotations: function () { return _this.updateAnnotations(); },
-                highlightedElements: function () { return _this.updateHighlightedElements(); },
-            };
-            Object.entries(simpleChanges).forEach(function (_a) {
-                var _b = __read(_a, 1), key = _b[0];
-                if (simpleChanges[key].firstChange || !keyUpdateFnPairs[key])
-                    return;
-                shouldRedrawChart = true;
-                keyUpdateFnPairs[key]();
-            });
-            if (shouldRedrawChart)
-                this.redrawChart();
+            if (this.chartHasBeenRendered) {
+                var shouldRedrawChart_1 = false;
+                // TODO: Remove 'dataLabels' key when the input property is removed
+                var keyUpdateFnPairs_1 = {
+                    data: function () { return _this.updateData(); },
+                    dataLabels: function () { return _this.updateLabels(); },
+                    labels: function () { return _this.updateLabels(); },
+                    type: function () { return _this.updateType(); },
+                    customOptions: function () { return _this.updateCustomOptions(); },
+                    annotations: function () { return _this.updateAnnotations(); },
+                    highlightedElements: function () { return _this.updateHighlightedElements(); },
+                };
+                Object.entries(simpleChanges).forEach(function (_a) {
+                    var _b = __read(_a, 1), key = _b[0];
+                    if (simpleChanges[key].firstChange || !keyUpdateFnPairs_1[key])
+                        return;
+                    shouldRedrawChart_1 = true;
+                    keyUpdateFnPairs_1[key]();
+                });
+                if (shouldRedrawChart_1)
+                    this.redrawChart();
+            }
         };
         ChartComponent.prototype.renderChart = function () {
+            this.chartHasBeenRendered = true;
             this.chartJSService.renderChart({
                 targetElement: this.canvasElement,
                 type: this.type,
@@ -5260,6 +5289,11 @@
             this.disableFutureDates = false;
             this.alwaysEnableToday = false;
             this.customLocales = {};
+            /*
+              Experimental: Input property not documented on purpose.
+              For context see: https://github.com/kirbydesign/designsystem/issues/2087
+            */
+            this.usePopover = false;
             this._disabledDates = [];
             this.includedLocales = { da: locale.da, enGB: locale.enGB, enUS: locale.enUS };
             this.locale = this.mapLocale(locale$1);
@@ -5655,7 +5689,7 @@
     CalendarComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kirby-calendar',
-                    template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button [disabled]=\"!_canNavigateBack\" (click)=\"_changeMonth(-1)\">\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span\n      ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button [disabled]=\"!_canNavigateForward\" (click)=\"_changeMonth(1)\">\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  >\n  </kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }}\"\n          [class.selected]=\"day.isSelected\"\n        >\n          {{ day.date }}\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n",
+                    template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button [disabled]=\"!_canNavigateBack\" (click)=\"_changeMonth(-1)\">\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span\n      ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button [disabled]=\"!_canNavigateForward\" (click)=\"_changeMonth(1)\">\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  >\n  </kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }}\"\n          [class.selected]=\"day.isSelected\"\n        >\n          {{ day.date }}\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n",
                     providers: [CalendarHelper],
                     styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}td,th{text-align:center;padding:0}td:first-child,th:first-child{padding-left:8px}td:last-child,th:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,td,th{background-color:transparent}.header{margin:8px 8px 0}.header,.month-navigator{display:flex;justify-content:space-between}.month-navigator{flex-grow:1;align-items:center}.month-navigator button{background-color:transparent;outline:none;border:none;color:inherit;cursor:pointer;height:40px;width:40px;padding:0}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0}.day.selectable,.day.selected{cursor:pointer}.day.disabled,.day:not(.selectable){color:var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}.day:not(.current-month){visibility:hidden;pointer-events:none}.day.selectable:not(.selected):hover{color:var(--kirby-light-contrast);background-color:var(--kirby-light)}"]
                 },] }
@@ -5676,6 +5710,7 @@
         disableFutureDates: [{ type: i0.Input }],
         alwaysEnableToday: [{ type: i0.Input }],
         customLocales: [{ type: i0.Input }],
+        usePopover: [{ type: i0.Input }],
         yearNavigatorOptions: [{ type: i0.Input }],
         selectedDate: [{ type: i0.Input }],
         disabledDates: [{ type: i0.Input }],
@@ -5712,7 +5747,7 @@
         { 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}"]
+                    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}ion-item-option{min-width:92px}"]
                 },] }
     ];
     ItemSlidingComponent.propDecorators = {
@@ -5853,7 +5888,7 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-item',
                     template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n",
-                    styles: [":host{display:block;position:relative}:host ion-item{font-size:14px;--min-height:56px;--padding-start:16px;--inner-padding-top:8px;--inner-padding-bottom:8px;--inner-padding-end:16px;--background:var(--kirby-item-background,var(--kirby-white));--background-activated:var(--kirby-item-background-activated,var(--kirby-white-shade));--background-activated-opacity:0.99;--background-focused:var(--kirby-item-background-focused,var(--kirby-background-color));--background-focused-opacity:1;--background-hover:var(--kirby-item-background-hover,var(--kirby-background-color));--background-hover-opacity:1}@media screen and (orientation:landscape){:host ion-item{--ion-safe-area-left:0px;--ion-safe-area-right:0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>data,:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::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 ion-item ::ng-deep>data.kirby-text-bold,:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[detail],:host ion-item ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height:44px}:host.xs ion-item{--min-height:32px;--inner-padding-top:4px;--inner-padding-bottom:4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height:44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top:8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top:0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom:8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom:0}:host(.selected) ion-item ::ng-deep>data,:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius:16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}"]
+                    styles: [":host{display:block;position:relative}:host ion-item{--padding-top:var(--item-padding-top,0px);--padding-bottom:var(--item-padding-bottom,0px);font-size:14px;--min-height:56px;--padding-start:16px;--inner-padding-top:8px;--inner-padding-bottom:8px;--inner-padding-end:16px;--background:var(--kirby-item-background,var(--kirby-white));--background-activated:var(--kirby-item-background-activated,var(--kirby-white-shade));--background-activated-opacity:0.99;--background-focused:var(--kirby-item-background-focused,var(--kirby-background-color));--background-focused-opacity:1;--background-hover:var(--kirby-item-background-hover,var(--kirby-background-color));--background-hover-opacity:1}@media screen and (orientation:landscape){:host ion-item{--ion-safe-area-left:0px;--ion-safe-area-right:0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>data,:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::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 ion-item ::ng-deep>data.kirby-text-bold,:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[detail],:host ion-item ::ng-deep>[subtitle]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height:44px}:host.xs ion-item{--min-height:32px;--inner-padding-top:4px;--inner-padding-bottom:4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height:44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top:8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top:0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom:8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom:0}:host(.selected) ion-item ::ng-deep>data,:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius:16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}"]
                 },] }
     ];
     ItemComponent.propDecorators = {
@@ -8382,7 +8417,8 @@
     ListExperimentalComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'kirby-list-experimental',
-                    template: "<ion-list>\n  <ng-content></ng-content>\n</ion-list>\n"
+                    template: "<ng-content select=\"[outside]\"></ng-content>\n<div class=\"rounded shadow first-item-padding last-item-padding\">\n  <ng-content></ng-content>\n</div>\n",
+                    styles: [".rounded{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.shadow{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}.first-item-padding>::ng-deep :first-child{--item-padding-top:8px}.last-item-padding>::ng-deep :last-child{--item-padding-bottom:8px}.first-item{border-top-left-radius:16px;border-top-right-radius:16px;overflow:hidden}.first-item>::ng-deep :first-child{--item-padding-top:8px}.last-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.last-item>::ng-deep :last-child{--item-padding-bottom:8px}:host{display:block}"]
                 },] }
     ];
     ListExperimentalComponent.propDecorators = {
@@ -8493,6 +8529,7 @@
     var ModalFooterComponent = /** @class */ (function () {
         function ModalFooterComponent() {
             this.snapToKeyboard = false;
+            this.type = 'fixed';
         }
         return ModalFooterComponent;
     }());
@@ -8500,11 +8537,12 @@
         { type: i0.Component, args: [{
                     selector: 'kirby-modal-footer',
                     template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n",
-                    styles: ["ion-footer{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);display:flex;justify-content:var(--kirby-modal-footer-justify-content,center);align-items:center;background-color:var(--kirby-modal-footer-background,var(--kirby-white));color:var(--kirby-modal-footer-color,var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width:720px){:host{--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host(.light) ion-footer{background-color:var(--kirby-background-color)}"]
+                    styles: ["ion-footer{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);display:flex;justify-content:var(--kirby-modal-footer-justify-content,center);align-items:center;background-color:var(--kirby-modal-footer-background,var(--kirby-white));color:var(--kirby-modal-footer-color,var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width:720px){:host{--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}"]
                 },] }
     ];
     ModalFooterComponent.propDecorators = {
-        snapToKeyboard: [{ type: i0.HostBinding, args: ['class.snap-to-keyboard',] }, { type: i0.Input }]
+        snapToKeyboard: [{ type: i0.HostBinding, args: ['class.snap-to-keyboard',] }, { type: i0.Input }],
+        type: [{ type: i0.HostBinding, args: ['class',] }, { type: i0.Input }]
     };
 
     var selectedTabClickEvent = 'kirbySelectedTabClick';
@@ -9034,7 +9072,15 @@
         FitHeadingDirective.prototype.observeResize = function () {
             var _this = this;
             this.resizeObserverService.observe(this.elementRef, function () {
-                _this.scaleHeader();
+                /**
+                 * setTimeout is used here to avoid repeated size changes
+                 * while the first size change is still ongoing.
+                 * This would result in the ResizeObserver being called again,
+                 * giving 'ResizeObserver loop limit exceeded' types of errors.
+                 */
+                setTimeout(function () {
+                    _this.scaleHeader();
+                }, 0);
             });
         };
         FitHeadingDirective.prototype.scaleHeader = function () {