@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
@@ -23,7 +23,6 @@ import 'inputmask/lib/extensions/inputmask.date.extensions';
23
23
  import Inputmask from 'inputmask/lib/inputmask';
24
24
  import 'inputmask/lib/extensions/inputmask.numeric.extensions';
25
25
  import { trigger, state, style, transition, animate } from '@angular/animations';
26
- import { UiScrollModule } from 'ngx-ui-scroll';
27
26
  import { defineCustomElements } from '@kirbydesign/core/loader';
28
27
 
29
28
  var KirbyAnimation;
@@ -2121,7 +2120,7 @@ CardComponent.decorators = [
2121
2120
  { type: Component, args: [{
2122
2121
  selector: 'kirby-card',
2123
2122
  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",
2124
- 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)}"]
2123
+ 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)}"]
2125
2124
  },] }
2126
2125
  ];
2127
2126
  /** @nocollapse */
@@ -6365,22 +6364,21 @@ GroupByPipe.decorators = [
6365
6364
  },] }
6366
6365
  ];
6367
6366
 
6368
- var __awaiter$8 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
6369
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
6370
- return new (P || (P = Promise))(function (resolve, reject) {
6371
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6372
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6373
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
6374
- step((generator = generator.apply(thisArg, _arguments || [])).next());
6375
- });
6376
- };
6377
- const INTERVAL = 400;
6378
6367
  class ListComponent {
6379
6368
  constructor(listHelper, groupBy) {
6380
6369
  this.listHelper = listHelper;
6381
6370
  this.groupBy = groupBy;
6371
+ /**
6372
+ * Provide items for the list to render. Items must be provided in the order you expect them to be rendered.
6373
+ */
6382
6374
  this.items = [];
6375
+ /**
6376
+ * Determines if dividers (bottom-border on list items) should be shown or not.
6377
+ */
6383
6378
  this.showDivider = false;
6379
+ /**
6380
+ * Determines if list row text should turn bold on selection
6381
+ */
6384
6382
  this.markSelectedRow = false;
6385
6383
  /**
6386
6384
  * Determine outline shape of:
@@ -6390,16 +6388,19 @@ class ListComponent {
6390
6388
  * `square` means **without** rounded corners, `rounded` means **with** rounded corners., `none` means **without** padding, border, box-shadow and background.
6391
6389
  */
6392
6390
  this.shape = 'rounded';
6393
- this.useVirtualScroll = false;
6394
- this.virtualScrollViewportHeight = 500;
6395
- this.virtualScrollSettings = {};
6396
- this.virtualScrollTimeout = 5000;
6397
- this._virtualScrollData = {
6398
- get: (index, count) => this.getVirtualDataset(index, count),
6399
- settings: Object.assign({ minIndex: this.virtualScrollSettings.minIndex || 0, startIndex: this.virtualScrollSettings.startIndex || 0, bufferSize: this.virtualScrollSettings.bufferSize || 10 }, this.virtualScrollSettings),
6400
- };
6391
+ /**
6392
+ * Emitting event when more items are to be loaded.
6393
+ */
6401
6394
  this.loadOnDemand = new EventEmitter();
6395
+ /**
6396
+ * Determines if list items should have swipe actions or not
6397
+ * - the order of swipe actions is used to determine edge actions,
6398
+ * as well as their order of appearance on the screen.
6399
+ */
6402
6400
  this.swipeActions = [];
6401
+ /**
6402
+ * Emitting event when an item is selected (tapped on mobile, clicked on web)
6403
+ */
6403
6404
  this.itemSelect = new EventEmitter();
6404
6405
  }
6405
6406
  get isShapeRounded() {
@@ -6408,41 +6409,6 @@ class ListComponent {
6408
6409
  get isShapeNone() {
6409
6410
  return this.shape === 'none';
6410
6411
  }
6411
- getVirtualDataset(index, count) {
6412
- return __awaiter$8(this, void 0, void 0, function* () {
6413
- return yield new Promise((resolve) => {
6414
- setTimeout(() => {
6415
- const itemSlice = this.getItemsSlice(index, count);
6416
- // If we return less items than count, virtual scroll will interprete it as EOF and stop asking for more
6417
- if (itemSlice.length < count && this.isLoadOnDemandEnabled) {
6418
- let elapsedTime = 0;
6419
- /* As virtual scroll fixes the viewport causing ScrollEnd to not be emitted; do it manually to trigger load on demand */
6420
- this.scrollDirective.scrollEnd.emit();
6421
- const poller = setInterval(() => {
6422
- elapsedTime += INTERVAL;
6423
- if (this._isLoading) {
6424
- // Just a failsafe in case this.isLoading for some reason is not reset
6425
- if (elapsedTime > this.virtualScrollTimeout) {
6426
- clearInterval(poller);
6427
- resolve([]);
6428
- }
6429
- return;
6430
- }
6431
- clearInterval(poller);
6432
- resolve(this.getItemsSlice(index, count));
6433
- }, INTERVAL);
6434
- }
6435
- else {
6436
- resolve(itemSlice);
6437
- }
6438
- }, INTERVAL);
6439
- });
6440
- });
6441
- }
6442
- getItemsSlice(index, count) {
6443
- const _items = this._isSectionsEnabled ? this._virtualGroupedItems : this.items;
6444
- return _items.slice(index, index + count);
6445
- }
6446
6412
  ngOnInit() {
6447
6413
  this._isSelectable = this.itemSelect.observers.length > 0;
6448
6414
  if (this.isLoadOnDemandEnabled === undefined) {
@@ -6463,13 +6429,6 @@ class ListComponent {
6463
6429
  this._groupedItems = this._isSectionsEnabled
6464
6430
  ? this.groupBy.transform(this.items, this.getSectionName)
6465
6431
  : null;
6466
- this._virtualGroupedItems =
6467
- this.useVirtualScroll && this._groupedItems
6468
- ? this._groupedItems.reduce((accumulator, group) => {
6469
- accumulator.push({ headingName: group.name });
6470
- return accumulator.concat(...group.items);
6471
- }, [])
6472
- : null;
6473
6432
  }
6474
6433
  _onLoadOnDemand(event) {
6475
6434
  this.listHelper.onLoadOnDemand(this, event);
@@ -6492,9 +6451,6 @@ class ListComponent {
6492
6451
  _getBoundaryClass(index, section) {
6493
6452
  var _a, _b;
6494
6453
  let _items = section || this.items;
6495
- if (this._isSectionsEnabled && this.useVirtualScroll) {
6496
- _items = this._virtualGroupedItems;
6497
- }
6498
6454
  if (index === 0 || ((_a = _items[index - 1]) === null || _a === void 0 ? void 0 : _a.headingName))
6499
6455
  return this.headerTemplate ? null : 'first';
6500
6456
  if (index === _items.length - 1 || ((_b = _items[index + 1]) === null || _b === void 0 ? void 0 : _b.headingName))
@@ -6504,9 +6460,9 @@ class ListComponent {
6504
6460
  ListComponent.decorators = [
6505
6461
  { type: Component, args: [{
6506
6462
  selector: 'kirby-list',
6507
- 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",
6463
+ 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",
6508
6464
  providers: [ListHelper, GroupByPipe],
6509
- 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}"]
6465
+ 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}"]
6510
6466
  },] }
6511
6467
  ];
6512
6468
  /** @nocollapse */
@@ -6528,10 +6484,6 @@ ListComponent.propDecorators = {
6528
6484
  isShapeRounded: [{ type: HostBinding, args: ['class.shape-rounded',] }],
6529
6485
  isShapeNone: [{ type: HostBinding, args: ['class.shape-none',] }],
6530
6486
  hasItemSpacing: [{ type: HostBinding, args: ['class.item-spacing',] }, { type: Input }],
6531
- useVirtualScroll: [{ type: Input }],
6532
- virtualScrollViewportHeight: [{ type: Input }],
6533
- virtualScrollSettings: [{ type: Input }],
6534
- virtualScrollTimeout: [{ type: Input }],
6535
6487
  isLoadOnDemandEnabled: [{ type: Input }],
6536
6488
  loadOnDemand: [{ type: Output }],
6537
6489
  swipeActions: [{ type: Input }],
@@ -6670,7 +6622,7 @@ ListItemComponent.decorators = [
6670
6622
  { type: Component, args: [{
6671
6623
  selector: 'kirby-list-item',
6672
6624
  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",
6673
- 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)}"]
6625
+ 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)}"]
6674
6626
  },] }
6675
6627
  ];
6676
6628
  /** @nocollapse */
@@ -6728,7 +6680,8 @@ class ReorderEvent {
6728
6680
  }
6729
6681
 
6730
6682
  class ReorderListComponent {
6731
- constructor() {
6683
+ constructor(cdr) {
6684
+ this.cdr = cdr;
6732
6685
  this.itemReorder = new EventEmitter();
6733
6686
  this.subItemReorder = new EventEmitter();
6734
6687
  this.reorderActive = false;
@@ -6747,6 +6700,7 @@ class ReorderListComponent {
6747
6700
  this.reorderActive = mutation.target['className'].includes('reorder-list-active');
6748
6701
  }
6749
6702
  }
6703
+ this.cdr.detectChanges();
6750
6704
  };
6751
6705
  this.observer = new MutationObserver(callback);
6752
6706
  this.reorderGroupContainer.forEach((div) => {
@@ -6778,6 +6732,10 @@ ReorderListComponent.decorators = [
6778
6732
  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)}"]
6779
6733
  },] }
6780
6734
  ];
6735
+ /** @nocollapse */
6736
+ ReorderListComponent.ctorParameters = () => [
6737
+ { type: ChangeDetectorRef }
6738
+ ];
6781
6739
  ReorderListComponent.propDecorators = {
6782
6740
  items: [{ type: Input }],
6783
6741
  subItemsName: [{ type: Input }],
@@ -7631,7 +7589,7 @@ TabsModule.decorators = [
7631
7589
  },] }
7632
7590
  ];
7633
7591
 
7634
- var __awaiter$9 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
7592
+ var __awaiter$8 = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
7635
7593
  function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
7636
7594
  return new (P || (P = Promise))(function (resolve, reject) {
7637
7595
  function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7645,7 +7603,7 @@ class ToastHelper {
7645
7603
  this.toastController = toastController;
7646
7604
  }
7647
7605
  showToast(config) {
7648
- return __awaiter$9(this, void 0, void 0, function* () {
7606
+ return __awaiter$8(this, void 0, void 0, function* () {
7649
7607
  const toast = yield this.toastController.create({
7650
7608
  animated: config.animated,
7651
7609
  message: config.message,
@@ -8261,7 +8219,7 @@ class ListModule {
8261
8219
  ListModule.decorators = [
8262
8220
  { type: NgModule, args: [{
8263
8221
  declarations: declarations,
8264
- imports: [CommonModule, IconModule, IonicModule, SpinnerModule, UiScrollModule],
8222
+ imports: [CommonModule, IconModule, IonicModule, SpinnerModule],
8265
8223
  exports: exportedDeclarations,
8266
8224
  providers: [],
8267
8225
  },] }
@@ -8336,6 +8294,39 @@ function customElementsInitializer() {
8336
8294
  };
8337
8295
  }
8338
8296
 
8297
+ class ElementAsButtonDirective {
8298
+ constructor(card, clickableElement) {
8299
+ this.card = card;
8300
+ this.clickableElement = clickableElement;
8301
+ this.role = 'button';
8302
+ this.tabindex = 0;
8303
+ }
8304
+ ngOnInit() {
8305
+ if (this.card) {
8306
+ this.card.flat = false;
8307
+ }
8308
+ }
8309
+ _onKeydownHandler(event) {
8310
+ this.clickableElement.nativeElement.click(event);
8311
+ }
8312
+ }
8313
+ ElementAsButtonDirective.decorators = [
8314
+ { type: Directive, args: [{
8315
+ // tslint:disable-next-line
8316
+ selector: 'kirby-card[click]',
8317
+ },] }
8318
+ ];
8319
+ /** @nocollapse */
8320
+ ElementAsButtonDirective.ctorParameters = () => [
8321
+ { type: CardComponent, decorators: [{ type: Optional }] },
8322
+ { type: ElementRef }
8323
+ ];
8324
+ ElementAsButtonDirective.propDecorators = {
8325
+ role: [{ type: HostBinding, args: ['attr.role',] }],
8326
+ tabindex: [{ type: HostBinding, args: ['attr.tabindex',] }],
8327
+ _onKeydownHandler: [{ type: HostListener, args: ['keydown.space', ['$event'],] }, { type: HostListener, args: ['keydown.enter', ['$event'],] }]
8328
+ };
8329
+
8339
8330
  class ModalRouterLinkDirective {
8340
8331
  constructor(modalNavigationService) {
8341
8332
  this.modalNavigationService = modalNavigationService;
@@ -8403,6 +8394,7 @@ const exportedDeclarations$1 = [
8403
8394
  RadioComponent,
8404
8395
  RadioGroupComponent,
8405
8396
  RangeComponent,
8397
+ ElementAsButtonDirective,
8406
8398
  ];
8407
8399
  const declarations$1 = [
8408
8400
  ...exportedDeclarations$1,
@@ -8469,7 +8461,6 @@ KirbyModule.decorators = [
8469
8461
  imports: [
8470
8462
  CommonModule,
8471
8463
  RouterModule,
8472
- UiScrollModule,
8473
8464
  IonicModule.forRoot({
8474
8465
  mode: 'ios',
8475
8466
  inputShims: true,
@@ -8494,5 +8485,5 @@ KirbyModule.ctorParameters = () => [
8494
8485
  * Generated bundle index. Do not edit.
8495
8486
  */
8496
8487
 
8497
- export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemModule, ItemSize, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, defaultIcons, isNumberArray, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, ProxyCmp as ɵa, AppModule as ɵb, ModalWrapperComponent as ɵba, Modal as ɵbb, ButtonComponent as ɵbc, IconComponent as ɵbd, IconRegistryService as ɵbe, ICON_SETTINGS as ɵbg, ResizeObserverService as ɵbh, ResizeObserverFactory as ɵbi, FitHeadingModule as ɵbj, FitHeadingDirective as ɵbk, LineClampHelper as ɵbl, SpinnerModule as ɵbm, SpinnerComponent as ɵbn, TabsModule as ɵbo, IconModule as ɵbp, TabButtonComponent as ɵbq, ItemModule as ɵbr, ItemComponent as ɵbs, LabelComponent as ɵbt, ToggleButtonModule as ɵbu, ToggleButtonComponent as ɵbv, ListModule as ɵbw, ListComponent as ɵbx, ListHelper as ɵby, GroupByPipe as ɵbz, AppComponent as ɵc, InfiniteScrollDirective as ɵca, ListItemDirective as ɵcb, ListFlexItemDirective as ɵcc, ListItemTemplateDirective as ɵcd, ListHeaderDirective as ɵce, ListSectionHeaderDirective as ɵcf, ListFooterDirective as ɵcg, ListItemComponent as ɵch, ListSectionHeaderComponent as ɵci, ListHeaderComponent as ɵcj, ListItemColorDirective as ɵck, ChartModule as ɵcl, ChartComponent as ɵcm, ChartJSService as ɵcn, ChartConfigService as ɵco, CardComponent as ɵcp, CardHeaderComponent as ɵcq, CardFooterComponent as ɵcr, ChartDeprecatedComponent as ɵcs, ChartDeprecatedHelper as ɵct, DONUT_OPTIONS as ɵcu, DonutOptions as ɵcv, AREASPLINE_OPTIONS as ɵcw, AreaSplineOptions as ɵcx, TIMESERIES_OPTIONS as ɵcy, TimeSeriesOptions as ɵcz, RouterOutletComponent as ɵd, ACTIVITYGAUGE_OPTIONS as ɵda, ActivityGaugeOptions as ɵdb, StockChartDeprecatedComponent as ɵdc, GridComponent as ɵdd, BreakpointHelperService as ɵde, ComponentLoaderDirective as ɵdf, AvatarComponent as ɵdg, CalendarComponent as ɵdh, CalendarHelper as ɵdi, CheckboxComponent as ɵdj, ActionSheetComponent as ɵdk, ModalFooterComponent as ɵdl, ModalRouterLinkDirective as ɵdm, SegmentedControlComponent as ɵdn, ChipComponent as ɵdo, ThemeColorDirective as ɵdp, DateInputDirective as ɵdq, DecimalMaskDirective as ɵdr, SlideButtonComponent as ɵds, ToggleComponent as ɵdt, EmptyStateComponent as ɵdu, FormFieldComponent as ɵdv, InputCounterComponent as ɵdw, RadioGroupComponent as ɵdx, RadioComponent as ɵdy, InputComponent as ɵdz, ModalController as ɵe, TextareaComponent as ɵea, FabSheetComponent as ɵeb, DividerComponent as ɵec, ReorderListComponent as ɵed, DropdownComponent as ɵee, PopoverComponent as ɵef, KeyboardHandlerService as ɵeg, LoadingOverlayComponent as ɵeh, ProgressCircleComponent as ɵei, FlagComponent as ɵej, SlideDirective as ɵek, SlidesComponent as ɵel, AccordionDirective as ɵem, AccordionItemComponent as ɵen, RangeComponent as ɵeo, KeyHandlerDirective as ɵep, FormFieldMessageComponent as ɵeq, AlertComponent as ɵer, ModalCompactWrapperComponent as ɵes, ProgressCircleRingComponent as ɵet, ToastHelper as ɵeu, ToastController as ɵev, LoadingOverlayService as ɵew, appInitialize as ɵex, customElementsInitializer as ɵey, ModalHelper as ɵf, ModalAnimationBuilderService as ɵg, PlatformService as ɵh, WindowRef as ɵi, ActionSheetHelper as ɵj, AlertHelper as ɵk, ModalNavigationService as ɵl, RouterOutletModule as ɵm, PageModule as ɵn, PageTitleDirective as ɵo, PageToolbarTitleDirective as ɵp, PageActionsDirective as ɵq, PageContentDirective as ɵr, PageProgressComponent as ɵs, PageTitleComponent as ɵt, PageContentComponent as ɵu, PageActionsComponent as ɵv, PageComponent as ɵw, TabsComponent as ɵx, TabsService as ɵy, PageFooterComponent as ɵz };
8488
+ export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartDeprecatedComponent, ChartDeprecatedType, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, GroupByPipe, HorizontalDirection, ICON_SETTINGS, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemModule, ItemSize, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListFlexItemDirective, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemDirective, ListItemTemplateDirective, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, StockChartDeprecatedComponent, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleComponent, annotations, defaultIcons, isNumberArray, selectedTabClickEvent, stockChartDeprecatedOptions, ɵ0$6 as ɵ0, ProxyCmp as ɵa, AppModule as ɵb, ModalWrapperComponent as ɵba, Modal as ɵbb, ButtonComponent as ɵbc, IconComponent as ɵbd, IconRegistryService as ɵbe, ICON_SETTINGS as ɵbg, ResizeObserverService as ɵbh, ResizeObserverFactory as ɵbi, FitHeadingModule as ɵbj, FitHeadingDirective as ɵbk, LineClampHelper as ɵbl, SpinnerModule as ɵbm, SpinnerComponent as ɵbn, TabsModule as ɵbo, IconModule as ɵbp, TabButtonComponent as ɵbq, ItemModule as ɵbr, ItemComponent as ɵbs, LabelComponent as ɵbt, ToggleButtonModule as ɵbu, ToggleButtonComponent as ɵbv, ListModule as ɵbw, ListComponent as ɵbx, ListHelper as ɵby, GroupByPipe as ɵbz, AppComponent as ɵc, InfiniteScrollDirective as ɵca, ListItemDirective as ɵcb, ListFlexItemDirective as ɵcc, ListItemTemplateDirective as ɵcd, ListHeaderDirective as ɵce, ListSectionHeaderDirective as ɵcf, ListFooterDirective as ɵcg, ListItemComponent as ɵch, ListSectionHeaderComponent as ɵci, ListHeaderComponent as ɵcj, ListItemColorDirective as ɵck, ChartModule as ɵcl, ChartComponent as ɵcm, ChartJSService as ɵcn, ChartConfigService as ɵco, CardComponent as ɵcp, CardHeaderComponent as ɵcq, CardFooterComponent as ɵcr, ChartDeprecatedComponent as ɵcs, ChartDeprecatedHelper as ɵct, DONUT_OPTIONS as ɵcu, DonutOptions as ɵcv, AREASPLINE_OPTIONS as ɵcw, AreaSplineOptions as ɵcx, TIMESERIES_OPTIONS as ɵcy, TimeSeriesOptions as ɵcz, RouterOutletComponent as ɵd, ACTIVITYGAUGE_OPTIONS as ɵda, ActivityGaugeOptions as ɵdb, StockChartDeprecatedComponent as ɵdc, GridComponent as ɵdd, BreakpointHelperService as ɵde, ComponentLoaderDirective as ɵdf, AvatarComponent as ɵdg, CalendarComponent as ɵdh, CalendarHelper as ɵdi, CheckboxComponent as ɵdj, ActionSheetComponent as ɵdk, ModalFooterComponent as ɵdl, ModalRouterLinkDirective as ɵdm, SegmentedControlComponent as ɵdn, ChipComponent as ɵdo, ThemeColorDirective as ɵdp, DateInputDirective as ɵdq, DecimalMaskDirective as ɵdr, SlideButtonComponent as ɵds, ToggleComponent as ɵdt, EmptyStateComponent as ɵdu, FormFieldComponent as ɵdv, InputCounterComponent as ɵdw, RadioGroupComponent as ɵdx, RadioComponent as ɵdy, InputComponent as ɵdz, ModalController as ɵe, TextareaComponent as ɵea, FabSheetComponent as ɵeb, DividerComponent as ɵec, ReorderListComponent as ɵed, DropdownComponent as ɵee, PopoverComponent as ɵef, KeyboardHandlerService as ɵeg, LoadingOverlayComponent as ɵeh, ProgressCircleComponent as ɵei, FlagComponent as ɵej, SlideDirective as ɵek, SlidesComponent as ɵel, AccordionDirective as ɵem, AccordionItemComponent as ɵen, RangeComponent as ɵeo, ElementAsButtonDirective as ɵep, KeyHandlerDirective as ɵeq, FormFieldMessageComponent as ɵer, AlertComponent as ɵes, ModalCompactWrapperComponent as ɵet, ProgressCircleRingComponent as ɵeu, ToastHelper as ɵev, ToastController as ɵew, LoadingOverlayService as ɵex, appInitialize as ɵey, customElementsInitializer as ɵez, ModalHelper as ɵf, ModalAnimationBuilderService as ɵg, PlatformService as ɵh, WindowRef as ɵi, ActionSheetHelper as ɵj, AlertHelper as ɵk, ModalNavigationService as ɵl, RouterOutletModule as ɵm, PageModule as ɵn, PageTitleDirective as ɵo, PageToolbarTitleDirective as ɵp, PageActionsDirective as ɵq, PageContentDirective as ɵr, PageProgressComponent as ɵs, PageTitleComponent as ɵt, PageContentComponent as ɵu, PageActionsComponent as ɵv, PageComponent as ɵw, TabsComponent as ɵx, TabsService as ɵy, PageFooterComponent as ɵz };
8498
8489
  //# sourceMappingURL=kirbydesign-designsystem.js.map