@kirbydesign/designsystem 4.0.16 → 4.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/bundles/kirbydesign-designsystem-testing-base.umd.js +0 -4
  2. package/bundles/kirbydesign-designsystem-testing-base.umd.js.map +1 -1
  3. package/bundles/kirbydesign-designsystem-testing-base.umd.min.js +1 -1
  4. package/bundles/kirbydesign-designsystem-testing-base.umd.min.js.map +1 -1
  5. package/bundles/kirbydesign-designsystem.umd.js +84 -107
  6. package/bundles/kirbydesign-designsystem.umd.js.map +1 -1
  7. package/bundles/kirbydesign-designsystem.umd.min.js +1 -1
  8. package/bundles/kirbydesign-designsystem.umd.min.js.map +1 -1
  9. package/esm2015/kirbydesign-designsystem.js +11 -10
  10. package/esm2015/kirbydesign-designsystem.metadata.json +1 -1
  11. package/esm2015/lib/components/card/card.component.js +3 -3
  12. package/esm2015/lib/components/card/card.component.metadata.json +1 -1
  13. package/esm2015/lib/components/list/index.js +1 -1
  14. package/esm2015/lib/components/list/index.metadata.json +1 -1
  15. package/esm2015/lib/components/list/list-item/list-item.component.js +1 -1
  16. package/esm2015/lib/components/list/list-item/list-item.component.metadata.json +1 -1
  17. package/esm2015/lib/components/list/list.component.js +23 -70
  18. package/esm2015/lib/components/list/list.component.metadata.json +1 -1
  19. package/esm2015/lib/components/list/list.module.js +2 -3
  20. package/esm2015/lib/components/list/list.module.metadata.json +1 -1
  21. package/esm2015/lib/components/reorder-list/reorder-list.component.js +9 -3
  22. package/esm2015/lib/components/reorder-list/reorder-list.component.metadata.json +1 -1
  23. package/esm2015/lib/directives/element-as-button/element-as-button.directive.js +35 -0
  24. package/esm2015/lib/directives/element-as-button/element-as-button.directive.metadata.json +1 -0
  25. package/esm2015/lib/kirby.module.js +3 -3
  26. package/esm2015/lib/kirby.module.metadata.json +1 -1
  27. package/esm2015/testing-base/lib/components/mock.list.component.js +1 -5
  28. package/esm2015/testing-base/lib/components/mock.list.component.metadata.json +1 -1
  29. package/fesm2015/kirbydesign-designsystem-testing-base.js +0 -4
  30. package/fesm2015/kirbydesign-designsystem-testing-base.js.map +1 -1
  31. package/fesm2015/kirbydesign-designsystem.js +69 -78
  32. package/fesm2015/kirbydesign-designsystem.js.map +1 -1
  33. package/kirbydesign-designsystem.d.ts +10 -9
  34. package/kirbydesign-designsystem.metadata.json +1 -1
  35. package/lib/components/card/card.component.d.ts +1 -1
  36. package/lib/components/list/index.d.ts +0 -1
  37. package/lib/components/list/list.component.d.ts +33 -10
  38. package/lib/components/reorder-list/reorder-list.component.d.ts +3 -1
  39. package/lib/directives/element-as-button/element-as-button.directive.d.ts +11 -0
  40. package/package.json +1 -2
  41. package/testing-base/kirbydesign-designsystem-testing-base.metadata.json +1 -1
  42. package/testing-base/lib/components/mock.list.component.d.ts +1 -5
  43. package/esm2015/lib/components/list/list-virtual-scroll-settings.type.js +0 -2
  44. package/esm2015/lib/components/list/list-virtual-scroll-settings.type.metadata.json +0 -1
  45. package/lib/components/list/list-virtual-scroll-settings.type.d.ts +0 -2
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
- 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')) :
3
- 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) :
4
- (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));
5
- }(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';
2
+ 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')) :
3
+ 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) :
4
+ (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));
5
+ }(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';
6
6
 
7
7
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
8
 
@@ -2881,7 +2881,7 @@
2881
2881
  { type: i0.Component, args: [{
2882
2882
  selector: 'kirby-card',
2883
2883
  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",
2884
- 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)}"]
2884
+ 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)}"]
2885
2885
  },] }
2886
2886
  ];
2887
2887
  /** @nocollapse */
@@ -7497,33 +7497,21 @@
7497
7497
  },] }
7498
7498
  ];
7499
7499
 
7500
- var __awaiter$9 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
7501
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
7502
- return new (P || (P = Promise))(function (resolve, reject) {
7503
- function fulfilled(value) { try {
7504
- step(generator.next(value));
7505
- }
7506
- catch (e) {
7507
- reject(e);
7508
- } }
7509
- function rejected(value) { try {
7510
- step(generator["throw"](value));
7511
- }
7512
- catch (e) {
7513
- reject(e);
7514
- } }
7515
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7516
- step((generator = generator.apply(thisArg, _arguments || [])).next());
7517
- });
7518
- };
7519
- var INTERVAL = 400;
7520
7500
  var ListComponent = /** @class */ (function () {
7521
7501
  function ListComponent(listHelper, groupBy) {
7522
- var _this = this;
7523
7502
  this.listHelper = listHelper;
7524
7503
  this.groupBy = groupBy;
7504
+ /**
7505
+ * Provide items for the list to render. Items must be provided in the order you expect them to be rendered.
7506
+ */
7525
7507
  this.items = [];
7508
+ /**
7509
+ * Determines if dividers (bottom-border on list items) should be shown or not.
7510
+ */
7526
7511
  this.showDivider = false;
7512
+ /**
7513
+ * Determines if list row text should turn bold on selection
7514
+ */
7527
7515
  this.markSelectedRow = false;
7528
7516
  /**
7529
7517
  * Determine outline shape of:
@@ -7533,16 +7521,19 @@
7533
7521
  * `square` means **without** rounded corners, `rounded` means **with** rounded corners., `none` means **without** padding, border, box-shadow and background.
7534
7522
  */
7535
7523
  this.shape = 'rounded';
7536
- this.useVirtualScroll = false;
7537
- this.virtualScrollViewportHeight = 500;
7538
- this.virtualScrollSettings = {};
7539
- this.virtualScrollTimeout = 5000;
7540
- this._virtualScrollData = {
7541
- get: function (index, count) { return _this.getVirtualDataset(index, count); },
7542
- settings: Object.assign({ minIndex: this.virtualScrollSettings.minIndex || 0, startIndex: this.virtualScrollSettings.startIndex || 0, bufferSize: this.virtualScrollSettings.bufferSize || 10 }, this.virtualScrollSettings),
7543
- };
7524
+ /**
7525
+ * Emitting event when more items are to be loaded.
7526
+ */
7544
7527
  this.loadOnDemand = new i0.EventEmitter();
7528
+ /**
7529
+ * Determines if list items should have swipe actions or not
7530
+ * - the order of swipe actions is used to determine edge actions,
7531
+ * as well as their order of appearance on the screen.
7532
+ */
7545
7533
  this.swipeActions = [];
7534
+ /**
7535
+ * Emitting event when an item is selected (tapped on mobile, clicked on web)
7536
+ */
7546
7537
  this.itemSelect = new i0.EventEmitter();
7547
7538
  }
7548
7539
  Object.defineProperty(ListComponent.prototype, "isShapeRounded", {
@@ -7559,47 +7550,6 @@
7559
7550
  enumerable: false,
7560
7551
  configurable: true
7561
7552
  });
7562
- ListComponent.prototype.getVirtualDataset = function (index, count) {
7563
- return __awaiter$9(this, void 0, void 0, function () {
7564
- var _this = this;
7565
- return __generator(this, function (_c) {
7566
- switch (_c.label) {
7567
- case 0: return [4 /*yield*/, new Promise(function (resolve) {
7568
- setTimeout(function () {
7569
- var itemSlice = _this.getItemsSlice(index, count);
7570
- // If we return less items than count, virtual scroll will interprete it as EOF and stop asking for more
7571
- if (itemSlice.length < count && _this.isLoadOnDemandEnabled) {
7572
- var elapsedTime_1 = 0;
7573
- /* As virtual scroll fixes the viewport causing ScrollEnd to not be emitted; do it manually to trigger load on demand */
7574
- _this.scrollDirective.scrollEnd.emit();
7575
- var poller_1 = setInterval(function () {
7576
- elapsedTime_1 += INTERVAL;
7577
- if (_this._isLoading) {
7578
- // Just a failsafe in case this.isLoading for some reason is not reset
7579
- if (elapsedTime_1 > _this.virtualScrollTimeout) {
7580
- clearInterval(poller_1);
7581
- resolve([]);
7582
- }
7583
- return;
7584
- }
7585
- clearInterval(poller_1);
7586
- resolve(_this.getItemsSlice(index, count));
7587
- }, INTERVAL);
7588
- }
7589
- else {
7590
- resolve(itemSlice);
7591
- }
7592
- }, INTERVAL);
7593
- })];
7594
- case 1: return [2 /*return*/, _c.sent()];
7595
- }
7596
- });
7597
- });
7598
- };
7599
- ListComponent.prototype.getItemsSlice = function (index, count) {
7600
- var _items = this._isSectionsEnabled ? this._virtualGroupedItems : this.items;
7601
- return _items.slice(index, index + count);
7602
- };
7603
7553
  ListComponent.prototype.ngOnInit = function () {
7604
7554
  this._isSelectable = this.itemSelect.observers.length > 0;
7605
7555
  if (this.isLoadOnDemandEnabled === undefined) {
@@ -7621,13 +7571,6 @@
7621
7571
  this._groupedItems = this._isSectionsEnabled
7622
7572
  ? this.groupBy.transform(this.items, this.getSectionName)
7623
7573
  : null;
7624
- this._virtualGroupedItems =
7625
- this.useVirtualScroll && this._groupedItems
7626
- ? this._groupedItems.reduce(function (accumulator, group) {
7627
- accumulator.push({ headingName: group.name });
7628
- return accumulator.concat.apply(accumulator, __spread(group.items));
7629
- }, [])
7630
- : null;
7631
7574
  };
7632
7575
  ListComponent.prototype._onLoadOnDemand = function (event) {
7633
7576
  this.listHelper.onLoadOnDemand(this, event);
@@ -7650,9 +7593,6 @@
7650
7593
  ListComponent.prototype._getBoundaryClass = function (index, section) {
7651
7594
  var _a, _b;
7652
7595
  var _items = section || this.items;
7653
- if (this._isSectionsEnabled && this.useVirtualScroll) {
7654
- _items = this._virtualGroupedItems;
7655
- }
7656
7596
  if (index === 0 || ((_a = _items[index - 1]) === null || _a === void 0 ? void 0 : _a.headingName))
7657
7597
  return this.headerTemplate ? null : 'first';
7658
7598
  if (index === _items.length - 1 || ((_b = _items[index + 1]) === null || _b === void 0 ? void 0 : _b.headingName))
@@ -7663,9 +7603,9 @@
7663
7603
  ListComponent.decorators = [
7664
7604
  { type: i0.Component, args: [{
7665
7605
  selector: 'kirby-list',
7666
- 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",
7606
+ 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",
7667
7607
  providers: [ListHelper, GroupByPipe],
7668
- 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}"]
7608
+ 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}"]
7669
7609
  },] }
7670
7610
  ];
7671
7611
  /** @nocollapse */
@@ -7687,10 +7627,6 @@
7687
7627
  isShapeRounded: [{ type: i0.HostBinding, args: ['class.shape-rounded',] }],
7688
7628
  isShapeNone: [{ type: i0.HostBinding, args: ['class.shape-none',] }],
7689
7629
  hasItemSpacing: [{ type: i0.HostBinding, args: ['class.item-spacing',] }, { type: i0.Input }],
7690
- useVirtualScroll: [{ type: i0.Input }],
7691
- virtualScrollViewportHeight: [{ type: i0.Input }],
7692
- virtualScrollSettings: [{ type: i0.Input }],
7693
- virtualScrollTimeout: [{ type: i0.Input }],
7694
7630
  isLoadOnDemandEnabled: [{ type: i0.Input }],
7695
7631
  loadOnDemand: [{ type: i0.Output }],
7696
7632
  swipeActions: [{ type: i0.Input }],
@@ -7835,7 +7771,7 @@
7835
7771
  { type: i0.Component, args: [{
7836
7772
  selector: 'kirby-list-item',
7837
7773
  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",
7838
- 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)}"]
7774
+ 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)}"]
7839
7775
  },] }
7840
7776
  ];
7841
7777
  /** @nocollapse */
@@ -7901,7 +7837,8 @@
7901
7837
  }());
7902
7838
 
7903
7839
  var ReorderListComponent = /** @class */ (function () {
7904
- function ReorderListComponent() {
7840
+ function ReorderListComponent(cdr) {
7841
+ this.cdr = cdr;
7905
7842
  this.itemReorder = new i0.EventEmitter();
7906
7843
  this.subItemReorder = new i0.EventEmitter();
7907
7844
  this.reorderActive = false;
@@ -7933,6 +7870,7 @@
7933
7870
  }
7934
7871
  finally { if (e_1) throw e_1.error; }
7935
7872
  }
7873
+ _this.cdr.detectChanges();
7936
7874
  };
7937
7875
  this.observer = new MutationObserver(callback);
7938
7876
  this.reorderGroupContainer.forEach(function (div) {
@@ -7965,6 +7903,10 @@
7965
7903
  styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px rgba(0,0,0,.4);transform:scale(1.05);border-radius:16px;overflow:hidden}.outerGroup{border-bottom:20px solid transparent}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}"]
7966
7904
  },] }
7967
7905
  ];
7906
+ /** @nocollapse */
7907
+ ReorderListComponent.ctorParameters = function () { return [
7908
+ { type: i0.ChangeDetectorRef }
7909
+ ]; };
7968
7910
  ReorderListComponent.propDecorators = {
7969
7911
  items: [{ type: i0.Input }],
7970
7912
  subItemsName: [{ type: i0.Input }],
@@ -8903,7 +8845,7 @@
8903
8845
  },] }
8904
8846
  ];
8905
8847
 
8906
- var __awaiter$a = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
8848
+ var __awaiter$9 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
8907
8849
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
8908
8850
  return new (P || (P = Promise))(function (resolve, reject) {
8909
8851
  function fulfilled(value) { try {
@@ -8927,7 +8869,7 @@
8927
8869
  this.toastController = toastController;
8928
8870
  }
8929
8871
  ToastHelper.prototype.showToast = function (config) {
8930
- return __awaiter$a(this, void 0, void 0, function () {
8872
+ return __awaiter$9(this, void 0, void 0, function () {
8931
8873
  var toast;
8932
8874
  return __generator(this, function (_a) {
8933
8875
  switch (_a.label) {
@@ -9662,7 +9604,7 @@
9662
9604
  ListModule.decorators = [
9663
9605
  { type: i0.NgModule, args: [{
9664
9606
  declarations: declarations,
9665
- imports: [common.CommonModule, IconModule, i1.IonicModule, SpinnerModule, ngxUiScroll.UiScrollModule],
9607
+ imports: [common.CommonModule, IconModule, i1.IonicModule, SpinnerModule],
9666
9608
  exports: exportedDeclarations,
9667
9609
  providers: [],
9668
9610
  },] }
@@ -9757,6 +9699,40 @@
9757
9699
  };
9758
9700
  }
9759
9701
 
9702
+ var ElementAsButtonDirective = /** @class */ (function () {
9703
+ function ElementAsButtonDirective(card, clickableElement) {
9704
+ this.card = card;
9705
+ this.clickableElement = clickableElement;
9706
+ this.role = 'button';
9707
+ this.tabindex = 0;
9708
+ }
9709
+ ElementAsButtonDirective.prototype.ngOnInit = function () {
9710
+ if (this.card) {
9711
+ this.card.flat = false;
9712
+ }
9713
+ };
9714
+ ElementAsButtonDirective.prototype._onKeydownHandler = function (event) {
9715
+ this.clickableElement.nativeElement.click(event);
9716
+ };
9717
+ return ElementAsButtonDirective;
9718
+ }());
9719
+ ElementAsButtonDirective.decorators = [
9720
+ { type: i0.Directive, args: [{
9721
+ // tslint:disable-next-line
9722
+ selector: 'kirby-card[click]',
9723
+ },] }
9724
+ ];
9725
+ /** @nocollapse */
9726
+ ElementAsButtonDirective.ctorParameters = function () { return [
9727
+ { type: CardComponent, decorators: [{ type: i0.Optional }] },
9728
+ { type: i0.ElementRef }
9729
+ ]; };
9730
+ ElementAsButtonDirective.propDecorators = {
9731
+ role: [{ type: i0.HostBinding, args: ['attr.role',] }],
9732
+ tabindex: [{ type: i0.HostBinding, args: ['attr.tabindex',] }],
9733
+ _onKeydownHandler: [{ type: i0.HostListener, args: ['keydown.space', ['$event'],] }, { type: i0.HostListener, args: ['keydown.enter', ['$event'],] }]
9734
+ };
9735
+
9760
9736
  var ModalRouterLinkDirective = /** @class */ (function () {
9761
9737
  function ModalRouterLinkDirective(modalNavigationService) {
9762
9738
  this.modalNavigationService = modalNavigationService;
@@ -9825,6 +9801,7 @@
9825
9801
  RadioComponent,
9826
9802
  RadioGroupComponent,
9827
9803
  RangeComponent,
9804
+ ElementAsButtonDirective,
9828
9805
  ];
9829
9806
  var declarations$1 = __spread(exportedDeclarations$1, [
9830
9807
  KeyHandlerDirective,
@@ -9891,7 +9868,6 @@
9891
9868
  imports: __spread([
9892
9869
  common.CommonModule,
9893
9870
  i1$1.RouterModule,
9894
- ngxUiScroll.UiScrollModule,
9895
9871
  i1.IonicModule.forRoot({
9896
9872
  mode: 'ios',
9897
9873
  inputShims: true,
@@ -10170,16 +10146,17 @@
10170
10146
  exports.ɵem = AccordionDirective;
10171
10147
  exports.ɵen = AccordionItemComponent;
10172
10148
  exports.ɵeo = RangeComponent;
10173
- exports.ɵep = KeyHandlerDirective;
10174
- exports.ɵeq = FormFieldMessageComponent;
10175
- exports.ɵer = AlertComponent;
10176
- exports.ɵes = ModalCompactWrapperComponent;
10177
- exports.ɵet = ProgressCircleRingComponent;
10178
- exports.ɵeu = ToastHelper;
10179
- exports.ɵev = ToastController;
10180
- exports.ɵew = LoadingOverlayService;
10181
- exports.ɵex = appInitialize;
10182
- exports.ɵey = customElementsInitializer;
10149
+ exports.ɵep = ElementAsButtonDirective;
10150
+ exports.ɵeq = KeyHandlerDirective;
10151
+ exports.ɵer = FormFieldMessageComponent;
10152
+ exports.ɵes = AlertComponent;
10153
+ exports.ɵet = ModalCompactWrapperComponent;
10154
+ exports.ɵeu = ProgressCircleRingComponent;
10155
+ exports.ɵev = ToastHelper;
10156
+ exports.ɵew = ToastController;
10157
+ exports.ɵex = LoadingOverlayService;
10158
+ exports.ɵey = appInitialize;
10159
+ exports.ɵez = customElementsInitializer;
10183
10160
  exports.ɵf = ModalHelper;
10184
10161
  exports.ɵg = ModalAnimationBuilderService;
10185
10162
  exports.ɵh = PlatformService;