@kirbydesign/designsystem 5.2.2 → 5.2.3-beta.0

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 (176) hide show
  1. package/bundles/kirbydesign-designsystem-testing-base.umd.js +1 -0
  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-testing-jasmine.umd.js.map +1 -1
  6. package/bundles/kirbydesign-designsystem-testing-jasmine.umd.min.js.map +1 -1
  7. package/bundles/kirbydesign-designsystem-testing-jest.umd.js.map +1 -1
  8. package/bundles/kirbydesign-designsystem-testing-jest.umd.min.js.map +1 -1
  9. package/bundles/kirbydesign-designsystem.umd.js +29 -32
  10. package/bundles/kirbydesign-designsystem.umd.js.map +1 -1
  11. package/bundles/kirbydesign-designsystem.umd.min.js +1 -1
  12. package/bundles/kirbydesign-designsystem.umd.min.js.map +1 -1
  13. package/esm2015/lib/components/avatar/avatar.component.js +1 -1
  14. package/esm2015/lib/components/button/button.component.js +1 -1
  15. package/esm2015/lib/components/calendar/calendar.component.js +2 -2
  16. package/esm2015/lib/components/card/card-header/card-header.component.js +1 -1
  17. package/esm2015/lib/components/card/card-header/card-header.component.metadata.json +1 -1
  18. package/esm2015/lib/components/chart/chart-js/chart-js.service.js +1 -1
  19. package/esm2015/lib/components/chart/chart-js/chartjs-plugin-marker/chartjs-plugin-marker.js +1 -1
  20. package/esm2015/lib/components/chart-deprecated/chart-deprecated.component.js +3 -3
  21. package/esm2015/lib/components/chart-deprecated/options/areaspline.js +1 -1
  22. package/esm2015/lib/components/chart-deprecated/options/timeseries.js +1 -1
  23. package/esm2015/lib/components/dropdown/dropdown.component.js +1 -1
  24. package/esm2015/lib/components/dropdown/dropdown.component.metadata.json +1 -1
  25. package/esm2015/lib/components/fab-sheet/fab-sheet.component.js +4 -3
  26. package/esm2015/lib/components/fab-sheet/fab-sheet.component.metadata.json +1 -1
  27. package/esm2015/lib/components/flag/flag.component.js +4 -6
  28. package/esm2015/lib/components/flag/flag.component.metadata.json +1 -1
  29. package/esm2015/lib/components/form-field/form-field.component.js +1 -1
  30. package/esm2015/lib/components/form-field/form-field.component.metadata.json +1 -1
  31. package/esm2015/lib/components/form-field/input/input.component.js +2 -2
  32. package/esm2015/lib/components/form-field/input/input.component.metadata.json +1 -1
  33. package/esm2015/lib/components/form-field/input-counter/input-counter.component.js +2 -3
  34. package/esm2015/lib/components/form-field/input-counter/input-counter.component.metadata.json +1 -1
  35. package/esm2015/lib/components/form-field/textarea/textarea.component.js +1 -1
  36. package/esm2015/lib/components/form-field/textarea/textarea.component.metadata.json +1 -1
  37. package/esm2015/lib/components/icon/icon.component.js +2 -2
  38. package/esm2015/lib/components/icon/icon.component.metadata.json +1 -1
  39. package/esm2015/lib/components/item/item.component.js +1 -1
  40. package/esm2015/lib/components/list/list-item/list-item.component.js +1 -1
  41. package/esm2015/lib/components/list/list-item/list-item.component.metadata.json +1 -1
  42. package/esm2015/lib/components/list/list-section-header/list-section-header.component.js +2 -3
  43. package/esm2015/lib/components/list/list-section-header/list-section-header.component.metadata.json +1 -1
  44. package/esm2015/lib/components/list/list.component.js +1 -1
  45. package/esm2015/lib/components/list/list.component.metadata.json +1 -1
  46. package/esm2015/lib/components/modal/action-sheet/action-sheet.component.js +1 -1
  47. package/esm2015/lib/components/modal/action-sheet/action-sheet.component.metadata.json +1 -1
  48. package/esm2015/lib/components/modal/footer/modal-footer.component.js +1 -1
  49. package/esm2015/lib/components/modal/footer/modal-footer.component.metadata.json +1 -1
  50. package/esm2015/lib/components/modal/modal-wrapper/modal-wrapper.component.js +2 -2
  51. package/esm2015/lib/components/modal/modal-wrapper/modal-wrapper.component.metadata.json +1 -1
  52. package/esm2015/lib/components/modal/services/modal-navigation.service.js +2 -4
  53. package/esm2015/lib/components/page/page.component.js +5 -13
  54. package/esm2015/lib/components/page/page.component.metadata.json +1 -1
  55. package/esm2015/lib/components/popover/popover.component.js +2 -4
  56. package/esm2015/lib/components/popover/popover.component.metadata.json +1 -1
  57. package/esm2015/lib/components/radio/radio.component.js +2 -2
  58. package/esm2015/lib/components/radio/radio.component.metadata.json +1 -1
  59. package/esm2015/lib/components/range/range.component.js +1 -1
  60. package/esm2015/lib/components/range/range.component.metadata.json +1 -1
  61. package/esm2015/lib/components/reorder-list/reorder-list.component.js +3 -3
  62. package/esm2015/lib/components/reorder-list/reorder-list.component.metadata.json +1 -1
  63. package/esm2015/lib/components/segmented-control/segmented-control.component.js +1 -1
  64. package/esm2015/lib/components/slide-button/slide-button.component.js +1 -1
  65. package/esm2015/lib/components/slide-button/slide-button.component.metadata.json +1 -1
  66. package/esm2015/lib/components/stock-chart-deprecated/options/stock-chart-deprecated-options.js +1 -1
  67. package/esm2015/lib/components/tabs/tabs.component.js +1 -1
  68. package/esm2015/lib/components/tabs/tabs.component.metadata.json +1 -1
  69. package/esm2015/testing-base/lib/components/mock.accordion-item.component.js +1 -1
  70. package/esm2015/testing-base/lib/components/mock.action-sheet.component.js +1 -1
  71. package/esm2015/testing-base/lib/components/mock.app.component.js +1 -1
  72. package/esm2015/testing-base/lib/components/mock.avatar.component.js +2 -2
  73. package/esm2015/testing-base/lib/components/mock.button.component.js +2 -2
  74. package/esm2015/testing-base/lib/components/mock.calendar.component.js +2 -1
  75. package/esm2015/testing-base/lib/components/mock.calendar.component.metadata.json +1 -1
  76. package/esm2015/testing-base/lib/components/mock.card-footer.component.js +1 -1
  77. package/esm2015/testing-base/lib/components/mock.card-header.component.js +1 -1
  78. package/esm2015/testing-base/lib/components/mock.card.component.js +1 -1
  79. package/esm2015/testing-base/lib/components/mock.chart-deprecated.component.js +1 -1
  80. package/esm2015/testing-base/lib/components/mock.chart.component.js +1 -1
  81. package/esm2015/testing-base/lib/components/mock.checkbox.component.js +1 -1
  82. package/esm2015/testing-base/lib/components/mock.chip.component.js +1 -1
  83. package/esm2015/testing-base/lib/components/mock.divider.component.js +1 -1
  84. package/esm2015/testing-base/lib/components/mock.dropdown.component.js +2 -2
  85. package/esm2015/testing-base/lib/components/mock.empty-state.component.js +1 -1
  86. package/esm2015/testing-base/lib/components/mock.fab-sheet.component.js +1 -1
  87. package/esm2015/testing-base/lib/components/mock.flag.component.js +1 -1
  88. package/esm2015/testing-base/lib/components/mock.form-field-message.component.js +1 -1
  89. package/esm2015/testing-base/lib/components/mock.form-field.component.js +1 -1
  90. package/esm2015/testing-base/lib/components/mock.grid.component.js +1 -1
  91. package/esm2015/testing-base/lib/components/mock.icon.component.js +2 -2
  92. package/esm2015/testing-base/lib/components/mock.input-counter.component.js +1 -1
  93. package/esm2015/testing-base/lib/components/mock.input.component.js +2 -2
  94. package/esm2015/testing-base/lib/components/mock.item-group.component.js +1 -1
  95. package/esm2015/testing-base/lib/components/mock.item-sliding.component.js +1 -1
  96. package/esm2015/testing-base/lib/components/mock.item.component.js +2 -2
  97. package/esm2015/testing-base/lib/components/mock.label.component.js +1 -1
  98. package/esm2015/testing-base/lib/components/mock.list-experimental.component.js +1 -1
  99. package/esm2015/testing-base/lib/components/mock.list-header.component.js +1 -1
  100. package/esm2015/testing-base/lib/components/mock.list-item.component.js +1 -1
  101. package/esm2015/testing-base/lib/components/mock.list-section-header.component.js +1 -1
  102. package/esm2015/testing-base/lib/components/mock.list.component.js +1 -1
  103. package/esm2015/testing-base/lib/components/mock.loading-overlay.component.js +1 -1
  104. package/esm2015/testing-base/lib/components/mock.modal-footer.component.js +1 -1
  105. package/esm2015/testing-base/lib/components/mock.page-footer.component.js +1 -1
  106. package/esm2015/testing-base/lib/components/mock.page.component.js +1 -1
  107. package/esm2015/testing-base/lib/components/mock.popover.component.js +2 -2
  108. package/esm2015/testing-base/lib/components/mock.progress-circle.component.js +1 -1
  109. package/esm2015/testing-base/lib/components/mock.radio-group.component.js +1 -1
  110. package/esm2015/testing-base/lib/components/mock.radio.component.js +1 -1
  111. package/esm2015/testing-base/lib/components/mock.range.component.js +1 -1
  112. package/esm2015/testing-base/lib/components/mock.reorder-list.component.js +1 -1
  113. package/esm2015/testing-base/lib/components/mock.router-outlet.component.js +1 -1
  114. package/esm2015/testing-base/lib/components/mock.section-header.component.js +1 -1
  115. package/esm2015/testing-base/lib/components/mock.segmented-control.component.js +2 -2
  116. package/esm2015/testing-base/lib/components/mock.slide-button.component.js +1 -1
  117. package/esm2015/testing-base/lib/components/mock.spinner.component.js +1 -1
  118. package/esm2015/testing-base/lib/components/mock.tab-button.component.js +1 -1
  119. package/esm2015/testing-base/lib/components/mock.tabs.component.js +1 -1
  120. package/esm2015/testing-base/lib/components/mock.textarea.component.js +1 -1
  121. package/esm2015/testing-base/lib/components/mock.toggle-button.component.js +1 -1
  122. package/esm2015/testing-base/lib/components/mock.toggle.component.js +1 -1
  123. package/esm2015/testing-base/lib/mock-components.js +1 -1
  124. package/esm2015/testing-jasmine/lib/mock-providers.js +1 -1
  125. package/esm2015/testing-jest/lib/mock-providers.js +1 -1
  126. package/fesm2015/kirbydesign-designsystem-testing-base.js +1 -0
  127. package/fesm2015/kirbydesign-designsystem-testing-base.js.map +1 -1
  128. package/fesm2015/kirbydesign-designsystem-testing-jasmine.js.map +1 -1
  129. package/fesm2015/kirbydesign-designsystem-testing-jest.js.map +1 -1
  130. package/fesm2015/kirbydesign-designsystem.js +29 -44
  131. package/fesm2015/kirbydesign-designsystem.js.map +1 -1
  132. package/kirbydesign-designsystem.metadata.json +1 -1
  133. package/lib/components/avatar/avatar.component.d.ts +2 -2
  134. package/lib/components/button/button.component.d.ts +2 -2
  135. package/lib/components/dropdown/dropdown.component.d.ts +2 -2
  136. package/lib/components/form-field/input/input.component.d.ts +1 -1
  137. package/lib/components/form-field/input-counter/input-counter.component.d.ts +2 -2
  138. package/lib/components/icon/icon.component.d.ts +1 -1
  139. package/lib/components/item/item.component.d.ts +1 -1
  140. package/lib/components/popover/popover.component.d.ts +1 -1
  141. package/lib/components/segmented-control/segmented-control.component.d.ts +1 -1
  142. package/package.json +2 -2
  143. package/polyfills/intersection-observer-polyfill-loader.js +12 -12
  144. package/polyfills/resize-observer-polyfill-loader.js +1 -1
  145. package/scss/_trigger-publish.scss +1 -0
  146. package/scss/_trigger.scss +1 -0
  147. package/scss/awesome-stylesheet.scss +1 -0
  148. package/scss/base/_awesome-partial.scss +1 -0
  149. package/scss/base/_index.scss +1 -0
  150. package/scss/base/_interaction-states.scss +1 -0
  151. package/scss/base/_link.scss +1 -0
  152. package/scss/base/index.scss +1 -0
  153. package/scss/interaction-state/_focus.scss +1 -0
  154. package/scss/interaction-state/_hover.scss +1 -0
  155. package/scss/interaction-state/_index.scss +1 -0
  156. package/scss/interaction-state/_layer.scss +1 -0
  157. package/scss/interaction-state/_state-layer.scss +1 -0
  158. package/scss/interaction-state/_utilities.scss +1 -0
  159. package/scss/interaction-state/ionic/_active.scss +1 -0
  160. package/scss/interaction-state/ionic/_hover.scss +1 -0
  161. package/scss/interaction-state/ionic/_index.scss +1 -0
  162. package/scss/interaction-states/_hover.scss +1 -0
  163. package/scss/interaction-states/_index.scss +1 -0
  164. package/scss/opt-out/_index.scss +1 -0
  165. package/scss/opt-out/_link.scss +1 -0
  166. package/testing-base/kirbydesign-designsystem-testing-base.metadata.json +1 -1
  167. package/testing-base/lib/components/mock.avatar.component.d.ts +1 -1
  168. package/testing-base/lib/components/mock.button.component.d.ts +1 -1
  169. package/testing-base/lib/components/mock.calendar.component.d.ts +1 -0
  170. package/testing-base/lib/components/mock.dropdown.component.d.ts +1 -1
  171. package/testing-base/lib/components/mock.icon.component.d.ts +1 -1
  172. package/testing-base/lib/components/mock.input.component.d.ts +1 -1
  173. package/testing-base/lib/components/mock.item.component.d.ts +1 -1
  174. package/testing-base/lib/components/mock.popover.component.d.ts +1 -1
  175. package/testing-base/lib/components/mock.segmented-control.component.d.ts +1 -1
  176. package/README.md +0 -7
@@ -74,7 +74,7 @@ ActionSheetComponent.decorators = [
74
74
  { type: Component, args: [{
75
75
  selector: 'kirby-action-sheet',
76
76
  template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [subtitle]=\"subheader\">\n </kirby-card-header>\n <button\n kirby-button\n expand=\"block\"\n size=\"lg\"\n attentionLevel=\"4\"\n (click)=\"onItemSelect(item)\"\n *ngFor=\"let item of items\"\n >\n {{ item.text }}\n </button>\n</kirby-card>\n<button\n *ngIf=\"!hideCancel\"\n kirby-button\n class=\"cancel-btn\"\n size=\"lg\"\n attentionLevel=\"2\"\n (click)=\"onCancel()\"\n>\n {{ cancelButtonText }}\n</button>\n",
77
- styles: [":host{--kirby_internal_margin_horizontal_default:32px;--kirby_internal_margin_horizontal_total:calc(2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby_internal_margin_horizontal_default)))}@media (max-width:320px){:host{--kirby_internal_margin_horizontal_default:16px}}:host{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby_internal_margin_horizontal_total));max-width:calc(375px - var(--kirby_internal_margin_horizontal_total))}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}"]
77
+ styles: [":host{--kirby-internal-margin-horizontal-default:32px;--kirby-internal-margin-horizontal-total:calc(2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)));display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total))}@media (max-width:320px){:host{--kirby-internal-margin-horizontal-default:16px}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}"]
78
78
  },] }
79
79
  ];
80
80
  ActionSheetComponent.propDecorators = {
@@ -355,9 +355,7 @@ class ModalNavigationService {
355
355
  return routePathsWithoutChildSegments;
356
356
  }
357
357
  findChildRouteForUrl(url, routes) {
358
- const moduleRelativePaths = this.getRoutePaths(routes, [''])
359
- .sort()
360
- .reverse(); // Ensure child paths are evaluated first
358
+ const moduleRelativePaths = this.getRoutePaths(routes, ['']).sort().reverse(); // Ensure child paths are evaluated first
361
359
  let matchedChildRoute = moduleRelativePaths.find((path) => url.endsWith(path));
362
360
  if (!matchedChildRoute) {
363
361
  // No static child route found matching current route - look for child route with url params:
@@ -826,7 +824,7 @@ IconComponent.decorators = [
826
824
  template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n",
827
825
  // tslint:disable-next-line: no-host-metadata-property
828
826
  host: { '[class.kirby-icon]': 'true' },
829
- styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size,24px);margin-left:var(--kirby-icon-margin-left,unset);margin-right:var(--kirby-icon-margin-right,unset)}:host svg path{fill:currentColor;stroke:currentColor}:host(.xs){--kirby-icon-font-size:16px}:host(.sm){--kirby-icon-font-size:24px}:host(.md){--kirby-icon-font-size:32px}:host(.lg){--kirby-icon-font-size:56px}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host-context(kirby-item)[slot=start]{margin-inline-end:8px}:host-context(kirby-item)[slot=end]{margin-inline-start:8px}"]
827
+ styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size,24px);margin-left:var(--kirby-icon-margin-left,unset);margin-right:var(--kirby-icon-margin-right,unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size:16px}:host(.sm){--kirby-icon-font-size:24px}:host(.md){--kirby-icon-font-size:32px}:host(.lg){--kirby-icon-font-size:56px}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host-context(kirby-item)[slot=start]{margin-inline-end:8px}:host-context(kirby-item)[slot=end]{margin-inline-start:8px}"]
830
828
  },] }
831
829
  ];
832
830
  /** @nocollapse */
@@ -1421,7 +1419,7 @@ ModalWrapperComponent.decorators = [
1421
1419
  selector: 'kirby-modal-wrapper',
1422
1420
  template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title>{{ config.title }}</ion-title>\n <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n <ng-container\n *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n ></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n <ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n ></ng-container>\n <router-outlet\n name=\"kirbyModalWrapperOutlet\"\n [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"4\" size=\"sm\" (click)=\"close()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n <button kirby-button attentionLevel=\"2\" size=\"sm\" (click)=\"btn.action($event)\">\n <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n </button>\n</ng-template>\n",
1423
1421
  providers: [{ provide: Modal, useExisting: ModalWrapperComponent }],
1424
- styles: ["@media (min-width:721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host{--vh100:var(--vh,1vh) * 100;--header-height:0px;--footer-height:0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}ion-header ion-toolbar{--padding-start:16px;--padding-end:16px;--padding-bottom:16px;--padding-top:16px;--border-width:0;--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width:721px){ion-header ion-toolbar{padding-top:8px}}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top,0)}@media (min-width:721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black));display:flex;flex-direction:column;--padding-top:24px;--padding-bottom:24px;--padding-start:16px;--padding-end:16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width:721px){ion-content{--padding-start:56px;--padding-end:56px}}"]
1422
+ styles: ["ion-header ion-toolbar{--padding-start:16px;--padding-end:16px;--padding-bottom:16px;--padding-top:16px;--border-width:0;--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width:721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100:var(--vh,1vh) * 100;--header-height:0;--footer-height:0}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width:721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top,0))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top,0)}@media (min-width:721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background:transparent;--color:var(--kirby-modal-color,var(--kirby-black));display:flex;flex-direction:column;--padding-top:24px;--padding-bottom:24px;--padding-start:16px;--padding-end:16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width:721px){ion-content{--padding-start:56px;--padding-end:56px}}"]
1425
1423
  },] }
1426
1424
  ];
1427
1425
  /** @nocollapse */
@@ -2171,7 +2169,7 @@ CardHeaderComponent.decorators = [
2171
2169
  { type: Component, args: [{
2172
2170
  selector: 'kirby-card-header',
2173
2171
  template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n",
2174
- styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:var(--kirby_internal_card-header-padding,16px);color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby_internal_card-header-margin-bottom,8px);line-height:var(--kirby_internal_card-header-line-height,28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color:var(--kirby-danger);--kirby-card-header-color:var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color:var(--kirby-warning);--kirby-card-header-color:var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color:var(--kirby-success);--kirby-card-header-color:var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color:var(--kirby-semi-light);--kirby-card-header-color:var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby_internal_card-header-padding:2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby_internal_card-header-line-height:24px;--kirby_internal_card-header-margin-bottom:0}"]
2172
+ styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:var(--kirby-internal-card-header-padding,16px);color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom,8px);line-height:var(--kirby-internal-card-header-line-height,28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color:var(--kirby-danger);--kirby-card-header-color:var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color:var(--kirby-warning);--kirby-card-header-color:var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color:var(--kirby-success);--kirby-card-header-color:var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color:var(--kirby-semi-light);--kirby-card-header-color:var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding:2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height:24px;--kirby-internal-card-header-margin-bottom:0}"]
2175
2173
  },] }
2176
2174
  ];
2177
2175
  CardHeaderComponent.propDecorators = {
@@ -2927,8 +2925,8 @@ class ChartDeprecatedComponent {
2927
2925
  }
2928
2926
  }
2929
2927
  setPieInput() {
2930
- this.mergedOptions.plotOptions.pie
2931
- .dataLabels.enabled = this.showDataLabels;
2928
+ this.mergedOptions.plotOptions.pie.dataLabels.enabled =
2929
+ this.showDataLabels;
2932
2930
  this.setSeries('pie');
2933
2931
  }
2934
2932
  setBarInput() {
@@ -4714,10 +4712,10 @@ class CalendarComponent {
4714
4712
  _onDateSelected(newDay) {
4715
4713
  if (newDay.isSelectable && newDay.date) {
4716
4714
  let newDate = new Date(this.activeMonth);
4715
+ newDate.setDate(newDay.date);
4717
4716
  if (this.timezone === 'UTC') {
4718
4717
  newDate = zonedTimeToUtc(this.subtractTimezoneOffset(newDate), this.timeZoneName);
4719
4718
  }
4720
- newDate.setDate(newDay.date);
4721
4719
  const dateToEmit = newDate;
4722
4720
  if (this.hasDateChanged(newDate, this._selectedDate)) {
4723
4721
  this.onSelectedDateChange(newDate);
@@ -5169,9 +5167,7 @@ class PopoverComponent {
5169
5167
  PopoverComponent.decorators = [
5170
5168
  { type: Component, args: [{
5171
5169
  selector: 'kirby-popover',
5172
- template: `
5173
- <div #wrapper class="wrapper"><ng-content></ng-content></div>
5174
- `,
5170
+ template: ` <div #wrapper class="wrapper"><ng-content></ng-content></div> `,
5175
5171
  styles: [":host{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:850}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:4px;margin-bottom:4px}"]
5176
5172
  },] }
5177
5173
  ];
@@ -5733,7 +5729,7 @@ RadioComponent.decorators = [
5733
5729
  { type: Component, args: [{
5734
5730
  selector: 'kirby-radio',
5735
5731
  template: "<div class=\"wrapper\">\n <ion-radio\n [value]=\"value\"\n [disabled]=\"disabled\"\n mode=\"md\"\n [attr.aria-labelledby]=\"text ? _labelId : null\"\n ></ion-radio>\n <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n",
5736
- styles: [":host{display:inline-block}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label div.wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label.xs .wrapper,:host.has-label :host-context(.radio-xs) .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label.sm .wrapper,:host.has-label :host-context(.radio-sm) .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label.md .wrapper,:host.has-label :host-context(.radio-md) .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-radio{position:static;margin-left:16px;margin-right:12px}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{opacity:1;--color:var(--kirby-medium);--color-checked:var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}ion-radio{min-height:24px;min-width:24px;padding:2px;box-sizing:border-box;--border-width:1px;--color:var(--kirby-semi-dark);--color-checked:var(--kirby-success)}ion-radio::part(container){background-color:var(--kirby-white)}ion-radio::part(mark){width:60%;height:60%}ion-radio:active{--color:transparent}ion-radio:active::part(container){background-color:var(--kirby-white-shade)}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color:var(--kirby-danger)}@media (hover:hover){ion-radio:focus::part(container){box-shadow:0 0 0 1px var(--kirby-background-color),0 0 0 3px #4d90fe}}ion-radio.radio-checked{--border-width:0px}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}"]
5732
+ styles: [":host{display:inline-block}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label div.wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label.xs .wrapper,:host.has-label :host-context(.radio-xs) .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label.sm .wrapper,:host.has-label :host-context(.radio-sm) .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label.md .wrapper,:host.has-label :host-context(.radio-md) .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-radio{position:static;margin-left:16px;margin-right:12px}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{opacity:1;--color:var(--kirby-medium);--color-checked:var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}ion-radio{min-height:24px;min-width:24px;padding:2px;box-sizing:border-box;--border-width:1px;--color:var(--kirby-semi-dark);--color-checked:var(--kirby-success)}ion-radio::part(container){background-color:var(--kirby-white)}ion-radio::part(mark){width:60%;height:60%}ion-radio:active{--color:transparent}ion-radio:active::part(container){background-color:var(--kirby-white-shade)}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color:var(--kirby-danger)}@media (hover:hover){ion-radio:focus::part(container){box-shadow:0 0 0 1px var(--kirby-background-color),0 0 0 3px #4d90fe}}ion-radio.radio-checked{--border-width:0}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}"]
5737
5733
  },] }
5738
5734
  ];
5739
5735
  RadioComponent.propDecorators = {
@@ -5997,8 +5993,7 @@ class InputCounterComponent {
5997
5993
  InputCounterComponent.decorators = [
5998
5994
  { type: Component, args: [{
5999
5995
  selector: 'kirby-input-counter',
6000
- template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n",
6001
- styles: [""]
5996
+ template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n"
6002
5997
  },] }
6003
5998
  ];
6004
5999
  InputCounterComponent.propDecorators = {
@@ -6046,7 +6041,7 @@ InputComponent.decorators = [
6046
6041
  // tslint:disable-next-line:component-selector
6047
6042
  selector: 'input[kirby-input]',
6048
6043
  template: '',
6049
- styles: [":host(.error){border:1px solid var(--kirby-danger)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:16px;line-height:24px;outline:none;margin:0;-webkit-appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);padding:16px;width:100%}:host.borderless,:host:host-context(kirby-item){border-radius:0;box-shadow:none;padding:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host::-ms-input-placeholder,:host::-webkit-input-placeholder{color:var(--kirby-text-color-semi-dark)}:host{height:56px}:host[type=number]{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}:host::-webkit-inner-spin-button,:host::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:host(.md){height:40px;border-radius:24px}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);font-size:16px;line-height:24px;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;margin:16px}"]
6044
+ styles: [":host(.error){border:1px solid var(--kirby-danger)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:16px;line-height:24px;outline:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);padding:16px;width:100%}:host.borderless,:host:host-context(kirby-item){border-radius:0;box-shadow:none;padding:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{height:56px}:host[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host::-webkit-inner-spin-button,:host::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){height:40px;border-radius:24px}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);font-size:16px;line-height:24px;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;margin:16px}"]
6050
6045
  },] }
6051
6046
  ];
6052
6047
  InputComponent.propDecorators = {
@@ -6088,7 +6083,7 @@ TextareaComponent.decorators = [
6088
6083
  // tslint:disable-next-line:component-selector
6089
6084
  selector: 'textarea[kirby-textarea]',
6090
6085
  template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n",
6091
- styles: [":host(.error){border:1px solid var(--kirby-danger)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-size:16px;line-height:24px;outline:none;margin:0;-webkit-appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);padding:16px;width:100%}:host.borderless,:host:host-context(kirby-item){border-radius:0;box-shadow:none;padding:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host::-ms-input-placeholder,:host::-webkit-input-placeholder{color:var(--kirby-text-color-semi-dark)}:host{font-family:var(--kirby-font-family);resize:none}@media (min-width:721px){:host{resize:vertical}}"]
6086
+ styles: [":host(.error){border:1px solid var(--kirby-danger)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-size:16px;line-height:24px;outline:none;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);padding:16px;width:100%}:host.borderless,:host:host-context(kirby-item){border-radius:0;box-shadow:none;padding:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{font-family:var(--kirby-font-family);resize:none}@media (min-width:721px){:host{resize:vertical}}"]
6092
6087
  },] }
6093
6088
  ];
6094
6089
  TextareaComponent.propDecorators = {
@@ -6429,6 +6424,7 @@ class FabSheetComponent {
6429
6424
  const closeIcon = fabButtonElement.shadowRoot.querySelector('.close-icon ion-icon');
6430
6425
  if (closeIcon) {
6431
6426
  const closeIconSvgLoaded = closeIcon.shadowRoot.querySelector('.icon-inner svg');
6427
+ // prettier-ignore
6432
6428
  const ionCloseIcon = closeIcon;
6433
6429
  if (ionCloseIcon && closeIconSvgLoaded) {
6434
6430
  ionCloseIcon.src = kirbyCloseIcon.svg;
@@ -7025,7 +7021,7 @@ ListComponent.decorators = [
7025
7021
  selector: 'kirby-list',
7026
7022
  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",
7027
7023
  providers: [ListHelper, GroupByPipe],
7028
- styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}"]
7024
+ styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-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;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image: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:radial-gradient(#fff,#000);mask-image: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}"]
7029
7025
  },] }
7030
7026
  ];
7031
7027
  /** @nocollapse */
@@ -7080,8 +7076,7 @@ class ListSectionHeaderComponent {
7080
7076
  ListSectionHeaderComponent.decorators = [
7081
7077
  { type: Component, args: [{
7082
7078
  selector: 'kirby-list-section-header',
7083
- template: "<div class=\"header\">\n <span class=\"kirby-text-small\">{{ title }}</span>\n</div>\n",
7084
- styles: [""]
7079
+ template: "<div class=\"header\">\n <span class=\"kirby-text-small\">{{ title }}</span>\n</div>\n"
7085
7080
  },] }
7086
7081
  ];
7087
7082
  /** @nocollapse */
@@ -7186,7 +7181,7 @@ ListItemComponent.decorators = [
7186
7181
  { type: Component, args: [{
7187
7182
  selector: 'kirby-list-item',
7188
7183
  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",
7189
- styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-divider{font-weight:inherit}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}ion-item-sliding.light{--kirby-item-background:var(--kirby-light);--kirby-item-background-activated:var(--kirby-light-shade);--kirby-item-background-focused:var(--kirby-light-shade);--kirby-item-background-hover:var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background:var(--kirby-light);--color:var(--kirby-light-contrast);--background-activated:var(--kirby-light-shade);--background-focused:var(--kirby-light-shade);--background-hover:var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end:0;--color:unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) .footer,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) ion-item.last{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding,:host-context(.shape-rounded) ion-item-sliding>ion-item{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;--inner-padding-start:0;--inner-padding-end:0;--inner-padding-top:0;--inner-padding-bottom:0;--background:none;--background-activated:none;--background-hover:none;--background-focused:none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item:last-child,:host-context(.item-spacing) .list kirby-list-item>ion-item{margin-bottom:0}", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}"]
7184
+ styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host{display:block}.list{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background:var(--kirby-white);--background-activated:var(--kirby-white-shade);--background-hover:var(--kirby-background-color);--background-focused:var(--kirby-background-color);--inner-border-width:0;--ion-safe-area-right:0;--min-height:56px;--padding-bottom:8px;--padding-end:16px;--padding-start:16px;--padding-top:8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-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;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.loading,.no-more-items{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background:unset;--color:unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list{box-shadow:none}:host-context(.has-sections) .list-items{box-shadow:0 5px 10px -10px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);border-radius:16px}:host-context(.has-sections) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(#fff,#000);mask-image: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:radial-gradient(#fff,#000);mask-image: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)}"]
7190
7185
  },] }
7191
7186
  ];
7192
7187
  /** @nocollapse */
@@ -7311,8 +7306,8 @@ class ReorderListComponent {
7311
7306
  ReorderListComponent.decorators = [
7312
7307
  { type: Component, args: [{
7313
7308
  selector: 'kirby-reorder-list',
7314
- template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outerGroup\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n",
7315
- 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)}"]
7309
+ template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n",
7310
+ 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}.outer-group{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)}"]
7316
7311
  },] }
7317
7312
  ];
7318
7313
  /** @nocollapse */
@@ -7339,7 +7334,7 @@ ModalFooterComponent.decorators = [
7339
7334
  { type: Component, args: [{
7340
7335
  selector: 'kirby-modal-footer',
7341
7336
  template: "<ion-footer>\n <ng-content></ng-content>\n</ion-footer>\n",
7342
- styles: ["ion-footer{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);display:flex;justify-content:var(--kirby-modal-footer-justify-content,center);align-items:center;background-color:var(--kirby-modal-footer-background,var(--kirby-white));color:var(--kirby-modal-footer-color,var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width:720px){:host{--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}"]
7337
+ styles: ["ion-footer{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);display:flex;justify-content:var(--kirby-modal-footer-justify-content,center);align-items:center;background-color:var(--kirby-modal-footer-background,var(--kirby-white));color:var(--kirby-modal-footer-color,var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width:720px){:host{--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}"]
7343
7338
  },] }
7344
7339
  ];
7345
7340
  ModalFooterComponent.propDecorators = {
@@ -7378,7 +7373,7 @@ TabsComponent.decorators = [
7378
7373
  { type: Component, args: [{
7379
7374
  selector: 'kirby-tab-bar',
7380
7375
  template: "<ion-tabs>\n <ion-tab-bar [class.bottom-hidden]=\"tabBarBottomHidden\">\n <ng-content></ng-content>\n </ion-tab-bar>\n</ion-tabs>\n",
7381
- styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom:0px}ion-tabs ion-tab-bar{--background:rgba(var(--kirby-white-rgb),0.94);--border:1px solid var(--kirby-light);--color:var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width,none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width:721px){ion-tabs{--kirby-tab-bar-height:70px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom:initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}"]
7376
+ styles: [":host(:not(.tab-bar-bottom-hidden)){--kirby-page-footer-safe-area-bottom:0}ion-tabs ion-tab-bar{--background:rgba(var(--kirby-white-rgb),0.94);--border:1px solid var(--kirby-light);--color:var(--kirby-black);display:flex;max-width:var(--kirby-tab-bar-max-width,none);justify-content:center;height:var(--kirby-tab-bar-height);padding-left:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);padding-right:calc((100vw - var(--kirby-tab-bar-max-width, none)) / 2);width:100%}ion-tabs ion-tab-bar.bottom-hidden{display:none}@media (min-width:721px){ion-tabs{--kirby-tab-bar-height:70px}}@media (min-width:1025px) and (hover:hover) and (pointer:fine){ion-tabs{flex-direction:column-reverse;--kirby-page-footer-safe-area-bottom:initial}ion-tabs ion-tab-bar{margin:0 auto;justify-content:flex-end}ion-tabs ion-tab-bar.bottom-hidden{display:flex}}"]
7382
7377
  },] }
7383
7378
  ];
7384
7379
  /** @nocollapse */
@@ -7465,9 +7460,7 @@ class PageProgressComponent {
7465
7460
  PageProgressComponent.decorators = [
7466
7461
  { type: Component, args: [{
7467
7462
  selector: 'kirby-page-progress',
7468
- template: `
7469
- <ng-content></ng-content>
7470
- `,
7463
+ template: ` <ng-content></ng-content> `,
7471
7464
  styles: [':host {display: flex}']
7472
7465
  },] }
7473
7466
  ];
@@ -7483,9 +7476,7 @@ class PageTitleComponent {
7483
7476
  PageTitleComponent.decorators = [
7484
7477
  { type: Component, args: [{
7485
7478
  selector: 'kirby-page-title',
7486
- template: `
7487
- <ng-content></ng-content>
7488
- `
7479
+ template: ` <ng-content></ng-content> `
7489
7480
  },] }
7490
7481
  ];
7491
7482
  class PageContentComponent {
@@ -7493,9 +7484,7 @@ class PageContentComponent {
7493
7484
  PageContentComponent.decorators = [
7494
7485
  { type: Component, args: [{
7495
7486
  selector: 'kirby-page-content',
7496
- template: `
7497
- <ng-content></ng-content>
7498
- `
7487
+ template: ` <ng-content></ng-content> `
7499
7488
  },] }
7500
7489
  ];
7501
7490
  class PageActionsComponent {
@@ -7503,9 +7492,7 @@ class PageActionsComponent {
7503
7492
  PageActionsComponent.decorators = [
7504
7493
  { type: Component, args: [{
7505
7494
  selector: 'kirby-page-actions',
7506
- template: `
7507
- <ng-content select="button[kirby-button]"></ng-content>
7508
- `
7495
+ template: ` <ng-content select="button[kirby-button]"></ng-content> `
7509
7496
  },] }
7510
7497
  ];
7511
7498
  class PageComponent {
@@ -8126,7 +8113,7 @@ SlideButtonComponent.decorators = [
8126
8113
  selector: 'kirby-slide-button',
8127
8114
  template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n",
8128
8115
  changeDetection: ChangeDetectionStrategy.OnPush,
8129
- styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:50%;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{-webkit-appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:50%;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}"]
8116
+ styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:50%;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{-moz-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:50%;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}"]
8130
8117
  },] }
8131
8118
  ];
8132
8119
  /** @nocollapse */
@@ -8382,11 +8369,9 @@ class FlagComponent {
8382
8369
  FlagComponent.decorators = [
8383
8370
  { type: Component, args: [{
8384
8371
  selector: 'kirby-flag',
8385
- template: `
8386
- <ng-content></ng-content>
8387
- `,
8372
+ template: ` <ng-content></ng-content> `,
8388
8373
  changeDetection: ChangeDetectionStrategy.OnPush,
8389
- styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color,transparent);color:var(--kirby-flag-color,var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color,var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px}:host.sm{font-size:14px}:host.xs{font-size:12px;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color:var(--kirby-success);--kirby-flag-color:var(--kirby-success-contrast);--kirby-flag-border-color:var(--kirby-success)}:host(.warning){--kirby-flag-background-color:var(--kirby-warning);--kirby-flag-color:var(--kirby-warning-contrast);--kirby-flag-border-color:var(--kirby-warning)}:host(.danger){--kirby-flag-background-color:var(--kirby-danger);--kirby-flag-color:var(--kirby-danger-contrast);--kirby-flag-border-color:var(--kirby-danger)}:host(.semi-light){--kirby-flag-background-color:var(--kirby-semi-light);--kirby-flag-color:var(--kirby-semi-light-contrast);--kirby-flag-border-color:var(--kirby-semi-light)}"]
8374
+ styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color,transparent);color:var(--kirby-flag-color,var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color,var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500}:host.sm{font-size:14px}:host.xs{font-size:12px;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color:#2cf287;--kirby-flag-color:var(--kirby-success-contrast);--kirby-flag-border-color:#2cf287}:host(.warning){--kirby-flag-background-color:#ffca3a;--kirby-flag-color:var(--kirby-warning-contrast);--kirby-flag-border-color:#ffca3a}:host(.danger){--kirby-flag-background-color:#ff878a;--kirby-flag-color:var(--kirby-danger-contrast);--kirby-flag-border-color:#ff878a}:host(.semi-light){--kirby-flag-background-color:var(--kirby-semi-light);--kirby-flag-color:var(--kirby-semi-light-contrast);--kirby-flag-border-color:var(--kirby-semi-light)}"]
8390
8375
  },] }
8391
8376
  ];
8392
8377
  FlagComponent.propDecorators = {
@@ -8576,7 +8561,7 @@ RangeComponent.decorators = [
8576
8561
  useExisting: forwardRef(() => RangeComponent),
8577
8562
  },
8578
8563
  ],
8579
- styles: [":host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range{--knob-background:var(--kirby-white);--knob-box-shadow:0 5px 10px 0px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--knob-size:24px;--pin-color:var(--kirby-text-color-black);--pin-background:var(--kirby-semi-light);--bar-background:var(--kirby-medium);--bar-background-active:var(--kirby-dark);--bar-border-radius:4px;--bar-height:2px;flex:1 1 100%;padding:0}ion-range.range-disabled{--knob-background:var(--kirby-semi-light);--knob-box-shadow:none;--bar-background:var(--kirby-semi-light);--bar-background-active:var(--kirby-semi-light)}ion-range.range-disabled::part(tick){background:var(--kirby-semi-light)}ion-range.range-has-pin{padding:0 3px}ion-range::part(pin){font-size:12px;color:var(--pin-color);background-color:var(--pin-background);padding:2px 4px;border-radius:4px;min-width:40px;position:relative}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translateX(-50%);display:block;border:6px solid transparent;border-top:6px solid var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:50%;width:6px;height:6px;z-index:1;margin-inline-start:-3px}ion-range::part(tick){background:var(--kirby-medium)}label{font-size:12px;line-height:16px;color:var(--kirby-text-color-semi-dark);margin-top:-4px}"]
8564
+ styles: [":host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range{--knob-background:var(--kirby-white);--knob-box-shadow:0 5px 10px 0 rgb(28 28 28/30%),0 0 5px 0 rgb(28 28 28/8%);--knob-size:24px;--pin-color:var(--kirby-text-color-black);--pin-background:var(--kirby-semi-light);--bar-background:var(--kirby-medium);--bar-background-active:var(--kirby-dark);--bar-border-radius:4px;--bar-height:2px;flex:1 1 100%;padding:0}ion-range.range-disabled{--knob-background:var(--kirby-semi-light);--knob-box-shadow:none;--bar-background:var(--kirby-semi-light);--bar-background-active:var(--kirby-semi-light)}ion-range.range-disabled::part(tick){background:var(--kirby-semi-light)}ion-range.range-has-pin{padding:0 3px}ion-range::part(pin){font-size:12px;color:var(--pin-color);background-color:var(--pin-background);padding:2px 4px;border-radius:4px;min-width:40px;position:relative}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translateX(-50%);display:block;border:6px solid transparent;border-top:6px solid var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:50%;width:6px;height:6px;z-index:1;margin-inline-start:-3px}ion-range::part(tick){background:var(--kirby-medium)}label{font-size:12px;line-height:16px;color:var(--kirby-text-color-semi-dark);margin-top:-4px}"]
8580
8565
  },] }
8581
8566
  ];
8582
8567
  RangeComponent.propDecorators = {