@kirbydesign/designsystem 4.0.17 → 4.0.21

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('ngx-ui-scroll'), 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', 'ngx-ui-scroll', '@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['ngx-ui-scroll'], 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, ngxUiScroll, 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('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';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -2881,7 +2881,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-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);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 */
@@ -7497,33 +7497,21 @@
                 },] }
     ];
 
-    var __awaiter$9 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-        return new (P || (P = Promise))(function (resolve, reject) {
-            function fulfilled(value) { try {
-                step(generator.next(value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function rejected(value) { try {
-                step(generator["throw"](value));
-            }
-            catch (e) {
-                reject(e);
-            } }
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-            step((generator = generator.apply(thisArg, _arguments || [])).next());
-        });
-    };
-    var INTERVAL = 400;
     var ListComponent = /** @class */ (function () {
         function ListComponent(listHelper, groupBy) {
-            var _this = this;
             this.listHelper = listHelper;
             this.groupBy = groupBy;
+            /**
+             * Provide items for the list to render. Items must be provided in the order you expect them to be rendered.
+             */
             this.items = [];
+            /**
+             * Determines if dividers (bottom-border on list items) should be shown or not.
+             */
             this.showDivider = false;
+            /**
+             * Determines if list row text should turn bold on selection
+             */
             this.markSelectedRow = false;
             /**
              * Determine outline shape of:
@@ -7533,16 +7521,19 @@
              * `square` means **without** rounded corners, `rounded` means **with** rounded corners.,  `none` means **without** padding, border, box-shadow and background.
              */
             this.shape = 'rounded';
-            this.useVirtualScroll = false;
-            this.virtualScrollViewportHeight = 500;
-            this.virtualScrollSettings = {};
-            this.virtualScrollTimeout = 5000;
-            this._virtualScrollData = {
-                get: function (index, count) { return _this.getVirtualDataset(index, count); },
-                settings: Object.assign({ minIndex: this.virtualScrollSettings.minIndex || 0, startIndex: this.virtualScrollSettings.startIndex || 0, bufferSize: this.virtualScrollSettings.bufferSize || 10 }, this.virtualScrollSettings),
-            };
+            /**
+             * Emitting event when more items are to be loaded.
+             */
             this.loadOnDemand = new i0.EventEmitter();
+            /**
+             * Determines if list items should have swipe actions or not
+             * - the order of swipe actions is used to determine edge actions,
+             * as well as their order of appearance on the screen.
+             */
             this.swipeActions = [];
+            /**
+             * Emitting event when an item is selected (tapped on mobile, clicked on web)
+             */
             this.itemSelect = new i0.EventEmitter();
         }
         Object.defineProperty(ListComponent.prototype, "isShapeRounded", {
@@ -7559,47 +7550,6 @@
             enumerable: false,
             configurable: true
         });
-        ListComponent.prototype.getVirtualDataset = function (index, count) {
-            return __awaiter$9(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
-                        case 0: return [4 /*yield*/, new Promise(function (resolve) {
-                                setTimeout(function () {
-                                    var itemSlice = _this.getItemsSlice(index, count);
-                                    // If we return less items than count, virtual scroll will interprete it as EOF and stop asking for more
-                                    if (itemSlice.length < count && _this.isLoadOnDemandEnabled) {
-                                        var elapsedTime_1 = 0;
-                                        /* As virtual scroll fixes the viewport causing ScrollEnd to not be emitted; do it manually to trigger load on demand */
-                                        _this.scrollDirective.scrollEnd.emit();
-                                        var poller_1 = setInterval(function () {
-                                            elapsedTime_1 += INTERVAL;
-                                            if (_this._isLoading) {
-                                                // Just a failsafe in case this.isLoading for some reason is not reset
-                                                if (elapsedTime_1 > _this.virtualScrollTimeout) {
-                                                    clearInterval(poller_1);
-                                                    resolve([]);
-                                                }
-                                                return;
-                                            }
-                                            clearInterval(poller_1);
-                                            resolve(_this.getItemsSlice(index, count));
-                                        }, INTERVAL);
-                                    }
-                                    else {
-                                        resolve(itemSlice);
-                                    }
-                                }, INTERVAL);
-                            })];
-                        case 1: return [2 /*return*/, _c.sent()];
-                    }
-                });
-            });
-        };
-        ListComponent.prototype.getItemsSlice = function (index, count) {
-            var _items = this._isSectionsEnabled ? this._virtualGroupedItems : this.items;
-            return _items.slice(index, index + count);
-        };
         ListComponent.prototype.ngOnInit = function () {
             this._isSelectable = this.itemSelect.observers.length > 0;
             if (this.isLoadOnDemandEnabled === undefined) {
@@ -7621,13 +7571,6 @@
             this._groupedItems = this._isSectionsEnabled
                 ? this.groupBy.transform(this.items, this.getSectionName)
                 : null;
-            this._virtualGroupedItems =
-                this.useVirtualScroll && this._groupedItems
-                    ? this._groupedItems.reduce(function (accumulator, group) {
-                        accumulator.push({ headingName: group.name });
-                        return accumulator.concat.apply(accumulator, __spread(group.items));
-                    }, [])
-                    : null;
         };
         ListComponent.prototype._onLoadOnDemand = function (event) {
             this.listHelper.onLoadOnDemand(this, event);
@@ -7650,9 +7593,6 @@
         ListComponent.prototype._getBoundaryClass = function (index, section) {
             var _a, _b;
             var _items = section || this.items;
-            if (this._isSectionsEnabled && this.useVirtualScroll) {
-                _items = this._virtualGroupedItems;
-            }
             if (index === 0 || ((_a = _items[index - 1]) === null || _a === void 0 ? void 0 : _a.headingName))
                 return this.headerTemplate ? null : 'first';
             if (index === _items.length - 1 || ((_b = _items[index + 1]) === null || _b === void 0 ? void 0 : _b.headingName))
@@ -7663,9 +7603,9 @@
     ListComponent.decorators = [
         { type: i0.Component, args: [{
                     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  <div\n    *ngIf=\"useVirtualScroll\"\n    #viewport\n    [style.height]=\"virtualScrollViewportHeight + 'px'\"\n    class=\"viewport\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"virtualItemsTemplate; context: { $implicit: _virtualScrollData }\"\n    ></ng-container>\n  </div>\n\n  <ng-container *ngIf=\"!useVirtualScroll\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        _isSectionsEnabled ? groupedListTemplate : itemsTemplate;\n        context: { $implicit: items }\n      \"\n    ></ng-container>\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\n<ng-template #virtualItemsTemplate let-virtualScrollData>\n  <div *uiScroll=\"let item of virtualScrollData; let i = index\">\n    <div [class.item-wrapper]=\"!item.headingName\" [class.section-header]=\"item.headingName\">\n      <ion-item-divider *ngIf=\"item.headingName\" class=\"virtual-group\">\n        <ng-container\n          *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: item.headingName }\"\n        ></ng-container>\n      </ion-item-divider>\n      <kirby-list-item\n        *ngIf=\"!item.headingName\"\n        [item]=\"item\"\n        [itemTemplate]=\"itemTemplate\"\n        [swipeActions]=\"swipeActions\"\n        [boundaryClass]=\"_getBoundaryClass(i)\"\n        [isSelectable]=\"_isSelectable\"\n        [getItemColor]=\"getItemColor\"\n        [isSelected]=\"_isSelectable && item === _selectedItem\"\n        (itemSelect)=\"onItemSelect($event)\"\n        (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n      >\n      </kirby-list-item>\n    </div>\n  </div>\n</ng-template>\n",
+                    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}.viewport{overflow-y:auto}.item-wrapper{min-height:56px}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) .virtual-group{margin-top:24px}:host-context(.has-sections) .section-header{overflow:hidden}: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: [":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}"]
                 },] }
     ];
     /** @nocollapse */
@@ -7687,10 +7627,6 @@
         isShapeRounded: [{ type: i0.HostBinding, args: ['class.shape-rounded',] }],
         isShapeNone: [{ type: i0.HostBinding, args: ['class.shape-none',] }],
         hasItemSpacing: [{ type: i0.HostBinding, args: ['class.item-spacing',] }, { type: i0.Input }],
-        useVirtualScroll: [{ type: i0.Input }],
-        virtualScrollViewportHeight: [{ type: i0.Input }],
-        virtualScrollSettings: [{ type: i0.Input }],
-        virtualScrollTimeout: [{ type: i0.Input }],
         isLoadOnDemandEnabled: [{ type: i0.Input }],
         loadOnDemand: [{ type: i0.Output }],
         swipeActions: [{ type: i0.Input }],
@@ -7835,7 +7771,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}.viewport{overflow-y:auto}.item-wrapper{min-height:56px}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) .virtual-group{margin-top:24px}:host-context(.has-sections) .section-header{overflow:hidden}: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: [":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)}"]
                 },] }
     ];
     /** @nocollapse */
@@ -7881,6 +7817,18 @@
         color: [{ type: i0.HostBinding, args: ['class',] }]
     };
 
+    var ListExperimentalComponent = /** @class */ (function () {
+        function ListExperimentalComponent() {
+        }
+        return ListExperimentalComponent;
+    }());
+    ListExperimentalComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'kirby-list-experimental',
+                    template: "<ion-list>\n  <ng-content></ng-content>\n</ion-list>\n"
+                },] }
+    ];
+
     var ReorderEvent = /** @class */ (function () {
         function ReorderEvent(ev, parentItem) {
             this.origEvent = ev;
@@ -8909,7 +8857,7 @@
                 },] }
     ];
 
-    var __awaiter$a = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    var __awaiter$9 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
         return new (P || (P = Promise))(function (resolve, reject) {
             function fulfilled(value) { try {
@@ -8933,7 +8881,7 @@
             this.toastController = toastController;
         }
         ToastHelper.prototype.showToast = function (config) {
-            return __awaiter$a(this, void 0, void 0, function () {
+            return __awaiter$9(this, void 0, void 0, function () {
                 var toast;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
@@ -9654,6 +9602,7 @@
         ListHeaderDirective,
         ListHeaderComponent,
         ListFooterDirective,
+        ListExperimentalComponent,
     ];
     var declarations = __spread(exportedDeclarations, [
         ListItemColorDirective,
@@ -9668,7 +9617,7 @@
     ListModule.decorators = [
         { type: i0.NgModule, args: [{
                     declarations: declarations,
-                    imports: [common.CommonModule, IconModule, i1.IonicModule, SpinnerModule, ngxUiScroll.UiScrollModule],
+                    imports: [common.CommonModule, IconModule, i1.IonicModule, SpinnerModule],
                     exports: exportedDeclarations,
                     providers: [],
                 },] }
@@ -9763,6 +9712,40 @@
         };
     }
 
+    var ElementAsButtonDirective = /** @class */ (function () {
+        function ElementAsButtonDirective(card, clickableElement) {
+            this.card = card;
+            this.clickableElement = clickableElement;
+            this.role = 'button';
+            this.tabindex = 0;
+        }
+        ElementAsButtonDirective.prototype.ngOnInit = function () {
+            if (this.card) {
+                this.card.flat = false;
+            }
+        };
+        ElementAsButtonDirective.prototype._onKeydownHandler = function (event) {
+            this.clickableElement.nativeElement.click(event);
+        };
+        return ElementAsButtonDirective;
+    }());
+    ElementAsButtonDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    // tslint:disable-next-line
+                    selector: 'kirby-card[click]',
+                },] }
+    ];
+    /** @nocollapse */
+    ElementAsButtonDirective.ctorParameters = function () { return [
+        { type: CardComponent, decorators: [{ type: i0.Optional }] },
+        { type: i0.ElementRef }
+    ]; };
+    ElementAsButtonDirective.propDecorators = {
+        role: [{ type: i0.HostBinding, args: ['attr.role',] }],
+        tabindex: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
+        _onKeydownHandler: [{ type: i0.HostListener, args: ['keydown.space', ['$event'],] }, { type: i0.HostListener, args: ['keydown.enter', ['$event'],] }]
+    };
+
     var ModalRouterLinkDirective = /** @class */ (function () {
         function ModalRouterLinkDirective(modalNavigationService) {
             this.modalNavigationService = modalNavigationService;
@@ -9831,6 +9814,7 @@
         RadioComponent,
         RadioGroupComponent,
         RangeComponent,
+        ElementAsButtonDirective,
     ];
     var declarations$1 = __spread(exportedDeclarations$1, [
         KeyHandlerDirective,
@@ -9897,7 +9881,6 @@
                     imports: __spread([
                         common.CommonModule,
                         i1$1.RouterModule,
-                        ngxUiScroll.UiScrollModule,
                         i1.IonicModule.forRoot({
                             mode: 'ios',
                             inputShims: true,
@@ -10019,6 +10002,7 @@
     exports.KirbyModule = KirbyModule;
     exports.LabelComponent = LabelComponent;
     exports.ListComponent = ListComponent;
+    exports.ListExperimentalComponent = ListExperimentalComponent;
     exports.ListFlexItemDirective = ListFlexItemDirective;
     exports.ListFooterDirective = ListFooterDirective;
     exports.ListHeaderComponent = ListHeaderComponent;
@@ -10117,76 +10101,78 @@
     exports.ɵch = ListItemComponent;
     exports.ɵci = ListSectionHeaderComponent;
     exports.ɵcj = ListHeaderComponent;
-    exports.ɵck = ListItemColorDirective;
-    exports.ɵcl = ChartModule;
-    exports.ɵcm = ChartComponent;
-    exports.ɵcn = ChartJSService;
-    exports.ɵco = ChartConfigService;
-    exports.ɵcp = CardComponent;
-    exports.ɵcq = CardHeaderComponent;
-    exports.ɵcr = CardFooterComponent;
-    exports.ɵcs = ChartDeprecatedComponent;
-    exports.ɵct = ChartDeprecatedHelper;
-    exports.ɵcu = DONUT_OPTIONS;
-    exports.ɵcv = DonutOptions;
-    exports.ɵcw = AREASPLINE_OPTIONS;
-    exports.ɵcx = AreaSplineOptions;
-    exports.ɵcy = TIMESERIES_OPTIONS;
-    exports.ɵcz = TimeSeriesOptions;
+    exports.ɵck = ListExperimentalComponent;
+    exports.ɵcl = ListItemColorDirective;
+    exports.ɵcm = ChartModule;
+    exports.ɵcn = ChartComponent;
+    exports.ɵco = ChartJSService;
+    exports.ɵcp = ChartConfigService;
+    exports.ɵcq = CardComponent;
+    exports.ɵcr = CardHeaderComponent;
+    exports.ɵcs = CardFooterComponent;
+    exports.ɵct = ChartDeprecatedComponent;
+    exports.ɵcu = ChartDeprecatedHelper;
+    exports.ɵcv = DONUT_OPTIONS;
+    exports.ɵcw = DonutOptions;
+    exports.ɵcx = AREASPLINE_OPTIONS;
+    exports.ɵcy = AreaSplineOptions;
+    exports.ɵcz = TIMESERIES_OPTIONS;
     exports.ɵd = RouterOutletComponent;
-    exports.ɵda = ACTIVITYGAUGE_OPTIONS;
-    exports.ɵdb = ActivityGaugeOptions;
-    exports.ɵdc = StockChartDeprecatedComponent;
-    exports.ɵdd = GridComponent;
-    exports.ɵde = BreakpointHelperService;
-    exports.ɵdf = ComponentLoaderDirective;
-    exports.ɵdg = AvatarComponent;
-    exports.ɵdh = CalendarComponent;
-    exports.ɵdi = CalendarHelper;
-    exports.ɵdj = CheckboxComponent;
-    exports.ɵdk = ActionSheetComponent;
-    exports.ɵdl = ModalFooterComponent;
-    exports.ɵdm = ModalRouterLinkDirective;
-    exports.ɵdn = SegmentedControlComponent;
-    exports.ɵdo = ChipComponent;
-    exports.ɵdp = ThemeColorDirective;
-    exports.ɵdq = DateInputDirective;
-    exports.ɵdr = DecimalMaskDirective;
-    exports.ɵds = SlideButtonComponent;
-    exports.ɵdt = ToggleComponent;
-    exports.ɵdu = EmptyStateComponent;
-    exports.ɵdv = FormFieldComponent;
-    exports.ɵdw = InputCounterComponent;
-    exports.ɵdx = RadioGroupComponent;
-    exports.ɵdy = RadioComponent;
-    exports.ɵdz = InputComponent;
+    exports.ɵda = TimeSeriesOptions;
+    exports.ɵdb = ACTIVITYGAUGE_OPTIONS;
+    exports.ɵdc = ActivityGaugeOptions;
+    exports.ɵdd = StockChartDeprecatedComponent;
+    exports.ɵde = GridComponent;
+    exports.ɵdf = BreakpointHelperService;
+    exports.ɵdg = ComponentLoaderDirective;
+    exports.ɵdh = AvatarComponent;
+    exports.ɵdi = CalendarComponent;
+    exports.ɵdj = CalendarHelper;
+    exports.ɵdk = CheckboxComponent;
+    exports.ɵdl = ActionSheetComponent;
+    exports.ɵdm = ModalFooterComponent;
+    exports.ɵdn = ModalRouterLinkDirective;
+    exports.ɵdo = SegmentedControlComponent;
+    exports.ɵdp = ChipComponent;
+    exports.ɵdq = ThemeColorDirective;
+    exports.ɵdr = DateInputDirective;
+    exports.ɵds = DecimalMaskDirective;
+    exports.ɵdt = SlideButtonComponent;
+    exports.ɵdu = ToggleComponent;
+    exports.ɵdv = EmptyStateComponent;
+    exports.ɵdw = FormFieldComponent;
+    exports.ɵdx = InputCounterComponent;
+    exports.ɵdy = RadioGroupComponent;
+    exports.ɵdz = RadioComponent;
     exports.ɵe = ModalController;
-    exports.ɵea = TextareaComponent;
-    exports.ɵeb = FabSheetComponent;
-    exports.ɵec = DividerComponent;
-    exports.ɵed = ReorderListComponent;
-    exports.ɵee = DropdownComponent;
-    exports.ɵef = PopoverComponent;
-    exports.ɵeg = KeyboardHandlerService;
-    exports.ɵeh = LoadingOverlayComponent;
-    exports.ɵei = ProgressCircleComponent;
-    exports.ɵej = FlagComponent;
-    exports.ɵek = SlideDirective;
-    exports.ɵel = SlidesComponent;
-    exports.ɵem = AccordionDirective;
-    exports.ɵen = AccordionItemComponent;
-    exports.ɵeo = RangeComponent;
-    exports.ɵep = KeyHandlerDirective;
-    exports.ɵeq = FormFieldMessageComponent;
-    exports.ɵer = AlertComponent;
-    exports.ɵes = ModalCompactWrapperComponent;
-    exports.ɵet = ProgressCircleRingComponent;
-    exports.ɵeu = ToastHelper;
-    exports.ɵev = ToastController;
-    exports.ɵew = LoadingOverlayService;
-    exports.ɵex = appInitialize;
-    exports.ɵey = customElementsInitializer;
+    exports.ɵea = InputComponent;
+    exports.ɵeb = TextareaComponent;
+    exports.ɵec = FabSheetComponent;
+    exports.ɵed = DividerComponent;
+    exports.ɵee = ReorderListComponent;
+    exports.ɵef = DropdownComponent;
+    exports.ɵeg = PopoverComponent;
+    exports.ɵeh = KeyboardHandlerService;
+    exports.ɵei = LoadingOverlayComponent;
+    exports.ɵej = ProgressCircleComponent;
+    exports.ɵek = FlagComponent;
+    exports.ɵel = SlideDirective;
+    exports.ɵem = SlidesComponent;
+    exports.ɵen = AccordionDirective;
+    exports.ɵeo = AccordionItemComponent;
+    exports.ɵep = RangeComponent;
+    exports.ɵeq = ElementAsButtonDirective;
+    exports.ɵer = KeyHandlerDirective;
+    exports.ɵes = FormFieldMessageComponent;
+    exports.ɵet = AlertComponent;
+    exports.ɵeu = ModalCompactWrapperComponent;
+    exports.ɵev = ProgressCircleRingComponent;
+    exports.ɵew = ToastHelper;
+    exports.ɵex = ToastController;
+    exports.ɵey = LoadingOverlayService;
+    exports.ɵez = appInitialize;
     exports.ɵf = ModalHelper;
+    exports.ɵfa = customElementsInitializer;
     exports.ɵg = ModalAnimationBuilderService;
     exports.ɵh = PlatformService;
     exports.ɵi = WindowRef;