@kirbydesign/designsystem 5.2.2 → 5.4.1

package/fesm2015/kirbydesign-designsystem.js

@@ -74,7 +74,7 @@ ActionSheetComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-action-sheet',
                 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",
-                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)}"]
+                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)}"]
             },] }
 ];
 ActionSheetComponent.propDecorators = {
@@ -355,9 +355,7 @@ class ModalNavigationService {
         return routePathsWithoutChildSegments;
     }
     findChildRouteForUrl(url, routes) {
-        const moduleRelativePaths = this.getRoutePaths(routes, [''])
-            .sort()
-            .reverse(); // Ensure child paths are evaluated first
+        const moduleRelativePaths = this.getRoutePaths(routes, ['']).sort().reverse(); // Ensure child paths are evaluated first
         let matchedChildRoute = moduleRelativePaths.find((path) => url.endsWith(path));
         if (!matchedChildRoute) {
             // No static child route found matching current route - look for child route with url params:
@@ -826,7 +824,7 @@ IconComponent.decorators = [
                 template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n",
                 // tslint:disable-next-line: no-host-metadata-property
                 host: { '[class.kirby-icon]': 'true' },
-                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}"]
+                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}"]
             },] }
 ];
 /** @nocollapse */
@@ -1421,7 +1419,7 @@ ModalWrapperComponent.decorators = [
                 selector: 'kirby-modal-wrapper',
                 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",
                 providers: [{ provide: Modal, useExisting: ModalWrapperComponent }],
-                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}}"]
+                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:0px;--footer-height:0px}: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}}"]
             },] }
 ];
 /** @nocollapse */
@@ -2171,7 +2169,7 @@ CardHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-card-header',
                 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",
-                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}"]
+                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:0px}"]
             },] }
 ];
 CardHeaderComponent.propDecorators = {
@@ -2927,8 +2925,8 @@ class ChartDeprecatedComponent {
         }
     }
     setPieInput() {
-        this.mergedOptions.plotOptions.pie
-            .dataLabels.enabled = this.showDataLabels;
+        this.mergedOptions.plotOptions.pie.dataLabels.enabled =
+            this.showDataLabels;
         this.setSeries('pie');
     }
     setBarInput() {
@@ -3699,6 +3697,8 @@ class ChartJSService {
         this.chart.data.datasets = datasets;
     }
     updateLabels(labels) {
+        /* As labels provided via the 'labels' input property always has
+        highest priority - we can just set the property directly */
         this.chart.data.labels = labels;
     }
     updateType(type, customOptions) {
@@ -3750,7 +3750,7 @@ class ChartJSService {
     }
     destructivelyUpdateType(type, customOptions) {
         const datasets = this.chart.data.datasets;
-        const labels = this.chart.data.labels;
+        const labels = this.chart.data.labels; // chart.js stores labels as unknown[]; cast it to ChartLabel[]
         const annotations = this.getExistingChartAnnotations();
         this.chartType = type;
         const options = this.createOptionsObject({ customOptions, annotations });
@@ -3857,32 +3857,42 @@ class ChartJSService {
             day: 'numeric',
         }));
     }
+    getLabelsToApply(args) {
+        const { datasets, labels, type, indexAxis } = args;
+        const datasetHasLabels = ({ data }) => !!(data === null || data === void 0 ? void 0 : data.some((datapoint) => typeof datapoint === 'object' && typeof datapoint[indexAxis] === 'string'));
+        /*
+           Labels can be provided by the user two ways:
+           1. As a seperate ChartLabel[] via the 'labels' input prop - this has highest priority
+           2. Together with the dataset via the 'data' input prop - here each datapoint contains
+           a label for the indexAxis.
+           For example: { x: 'label1', y: 1} in the case where the index axis is 'x'.
+    
+           If no labels are provided then default labels are used.
+        */
+        const labelsAreGivenAsSeperateArray = labels !== undefined;
+        const labelsAreGivenTogetherWithDataset = datasets.some(datasetHasLabels);
+        if (labelsAreGivenAsSeperateArray) {
+            return labels;
+        }
+        else if (labelsAreGivenTogetherWithDataset) {
+            return null;
+        }
+        else {
+            /*
+              Chart.js requires labels along the index axis to render anything therefore
+              all other types than stock uses empty labels as default. The stock type
+              displays day & month as default.
+            */
+            return type === 'stock'
+                ? this.getDefaultStockLabels(datasets, this.locale)
+                : this.createBlankLabels(datasets);
+        }
+    }
     createConfigurationObject(type, datasets, options, labels) {
+        var _a, _b;
         const typeConfig = this.chartConfigService.getTypeConfig(type);
-        const labelsToApply = (() => {
-            var _a, _b;
-            if (type === 'stock') {
-                /*
-                   The time scale will auto generate labels based on data.
-                   It should be possible to pass an empty array to get the default
-                   behaviour of chart.js when using stock chart.
-        
-                   TODO: Simplify to always pass labels, if given, to chart.js.
-                   Would be a breaking change. See issue:
-                   https://github.com/kirbydesign/designsystem/issues/2085
-                */
-                const shouldUseTimescaleLabels = (labels === null || labels === void 0 ? void 0 : labels.length) === 0 && ((_b = (_a = options === null || options === void 0 ? void 0 : options.scales) === null || _a === void 0 ? void 0 : _a.x) === null || _b === void 0 ? void 0 : _b.type) === 'time';
-                if (shouldUseTimescaleLabels)
-                    return labels;
-                return this.getDefaultStockLabels(datasets, this.locale);
-            }
-            else if ((labels === null || labels === void 0 ? void 0 : labels.length) > 0) {
-                return labels;
-            }
-            else {
-                return this.createBlankLabels(datasets);
-            }
-        })();
+        const indexAxis = (_b = (_a = typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.options) === null || _a === void 0 ? void 0 : _a.indexAxis) !== null && _b !== void 0 ? _b : 'x';
+        const labelsToApply = this.getLabelsToApply({ labels, datasets, type, indexAxis });
         return mergeDeepAll(typeConfig, {
             data: {
                 labels: labelsToApply,
@@ -4714,10 +4724,10 @@ class CalendarComponent {
     _onDateSelected(newDay) {
         if (newDay.isSelectable && newDay.date) {
             let newDate = new Date(this.activeMonth);
+            newDate.setDate(newDay.date);
             if (this.timezone === 'UTC') {
                 newDate = zonedTimeToUtc(this.subtractTimezoneOffset(newDate), this.timeZoneName);
             }
-            newDate.setDate(newDay.date);
             const dateToEmit = newDate;
             if (this.hasDateChanged(newDate, this._selectedDate)) {
                 this.onSelectedDateChange(newDate);
@@ -5062,15 +5072,8 @@ class PopoverComponent {
             return this.target;
         }
     }
-    _backdropClick() {
-        this.willHide.emit();
-        this.hide();
-    }
     _onWindowResize() {
-        if (this.isShowing) {
-            this.willHide.emit();
-            this.hide();
-        }
+        this.hide();
     }
     ngAfterViewInit() {
         this.placePopoverAboveClosestModal();
@@ -5090,8 +5093,13 @@ class PopoverComponent {
         }
     }
     // document.removeEventListener needs the exact same event handler & options reference:
-    preventEvent(event) {
-        event.preventDefault();
+    static preventEventOutsidePopover(event) {
+        if (event.target instanceof HTMLElement) {
+            const targetIsInPopover = !!event.target.closest('kirby-popover');
+            if (!targetIsInPopover) {
+                event.preventDefault();
+            }
+        }
     }
     preventScroll() {
         this.isFirstToLockScroll = !this.document.body.classList.contains('backdrop-no-scroll');
@@ -5099,13 +5107,13 @@ class PopoverComponent {
             this.renderer.addClass(this.document.body, 'backdrop-no-scroll');
         }
         // preventDefault does not work with Renderer2.listen method; add event listener directly to document instead
-        this.document.addEventListener('touchmove', this.preventEvent, this.preventScrollEventListenerOptions);
+        this.document.addEventListener('touchmove', PopoverComponent.preventEventOutsidePopover, this.preventScrollEventListenerOptions);
     }
     releaseScroll() {
         if (this.isFirstToLockScroll) {
             this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
         }
-        this.document.removeEventListener('touchmove', this.preventEvent, this.preventScrollEventListenerOptions);
+        this.document.removeEventListener('touchmove', PopoverComponent.preventEventOutsidePopover, this.preventScrollEventListenerOptions);
     }
     show() {
         this.renderer.addClass(this.elementRef.nativeElement, 'is-opening');
@@ -5117,7 +5125,10 @@ class PopoverComponent {
         this.isShowing = true;
     }
     hide() {
-        this.renderer.removeChild(this.document.body, this.elementRef.nativeElement);
+        if (!this.isShowing)
+            return;
+        this.willHide.emit();
+        this.renderer.removeChild(this.elementRef.nativeElement.parentElement, this.elementRef.nativeElement);
         this.releaseScroll();
         this.renderer.removeStyle(this.targetElement, 'z-index');
         this.renderer.removeStyle(this.targetElement, 'pointer-events');
@@ -5169,9 +5180,7 @@ class PopoverComponent {
 PopoverComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-popover',
-                template: `
-    <div #wrapper class="wrapper"><ng-content></ng-content></div>
-  `,
+                template: ` <div #wrapper class="wrapper"><ng-content></ng-content></div> `,
                 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}"]
             },] }
 ];
@@ -5185,7 +5194,6 @@ PopoverComponent.propDecorators = {
     popout: [{ type: Input }],
     target: [{ type: Input }],
     willHide: [{ type: Output }],
-    _backdropClick: [{ type: HostListener, args: ['click',] }],
     _onWindowResize: [{ type: HostListener, args: ['window:resize',] }]
 };
 
@@ -5627,7 +5635,7 @@ DropdownComponent.decorators = [
                         multi: true,
                     },
                 ],
-                styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:0;max-width:none}@media (hover:hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height:352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);min-width:288px;max-width:calc(100vw - 32px)}@media (min-width:321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.is-open)>button{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:medium}:host-context(kirby-calendar).is-open>button{box-shadow:none}"]
+                styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:0;max-width:none}@media (hover:hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height:352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);min-width:288px;max-width:calc(100vw - 32px)}@media (min-width:321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:medium}:host-context(kirby-calendar).is-open>button{box-shadow:none}"]
             },] }
 ];
 /** @nocollapse */
@@ -5997,8 +6005,7 @@ class InputCounterComponent {
 InputCounterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-input-counter',
-                template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n",
-                styles: [""]
+                template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n"
             },] }
 ];
 InputCounterComponent.propDecorators = {
@@ -6046,7 +6053,7 @@ InputComponent.decorators = [
                 // tslint:disable-next-line:component-selector
                 selector: 'input[kirby-input]',
                 template: '',
-                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}"]
+                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}"]
             },] }
 ];
 InputComponent.propDecorators = {
@@ -6088,7 +6095,7 @@ TextareaComponent.decorators = [
                 // tslint:disable-next-line:component-selector
                 selector: 'textarea[kirby-textarea]',
                 template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n",
-                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}}"]
+                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}}"]
             },] }
 ];
 TextareaComponent.propDecorators = {
@@ -6429,6 +6436,7 @@ class FabSheetComponent {
             const closeIcon = fabButtonElement.shadowRoot.querySelector('.close-icon ion-icon');
             if (closeIcon) {
                 const closeIconSvgLoaded = closeIcon.shadowRoot.querySelector('.icon-inner svg');
+                // prettier-ignore
                 const ionCloseIcon = closeIcon;
                 if (ionCloseIcon && closeIconSvgLoaded) {
                     ionCloseIcon.src = kirbyCloseIcon.svg;
@@ -7025,7 +7033,7 @@ ListComponent.decorators = [
                 selector: 'kirby-list',
                 template: "<ion-list\n  #list\n  kirbyInfiniteScroll\n  (scrollEnd)=\"_onLoadOnDemand()\"\n  [disabled]=\"!isLoadOnDemandEnabled\"\n  class=\"list\"\n  [class.has-header]=\"headerTemplate\"\n  [class.has-footer]=\"footerTemplate\"\n  [class.has-divider]=\"showDivider\"\n>\n  <ion-list-header *ngIf=\"headerTemplate\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  </ion-list-header>\n\n  <ng-container\n    *ngTemplateOutlet=\"\n      _isSectionsEnabled ? groupedListTemplate : itemsTemplate;\n      context: { $implicit: items }\n    \"\n  ></ng-container>\n\n  <div *ngIf=\"footerTemplate\" class=\"footer\">\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n  </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n  {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n  <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n  <ion-item-group *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\">\n    <ion-item-divider>\n      <ng-container\n        *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n      ></ng-container>\n    </ion-item-divider>\n\n    <div class=\"list-items\">\n      <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n      ></ng-container>\n    </div>\n  </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n  <kirby-list-item\n    *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n    [item]=\"item\"\n    [itemTemplate]=\"itemTemplate\"\n    [swipeActions]=\"swipeActions\"\n    [boundaryClass]=\"_getBoundaryClass(i, items)\"\n    [isSelectable]=\"_isSelectable\"\n    [getItemColor]=\"getItemColor\"\n    [isSelected]=\"_isSelectable && item === _selectedItem\"\n    (itemSelect)=\"onItemSelect($event)\"\n    (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n    [class.is-single]=\"items.length === 1\"\n  >\n  </kirby-list-item>\n</ng-template>\n",
                 providers: [ListHelper, GroupByPipe],
-                styles: ["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}"]
+                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}"]
             },] }
 ];
 /** @nocollapse */
@@ -7080,8 +7088,7 @@ class ListSectionHeaderComponent {
 ListSectionHeaderComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-list-section-header',
-                template: "<div class=\"header\">\n  <span class=\"kirby-text-small\">{{ title }}</span>\n</div>\n",
-                styles: [""]
+                template: "<div class=\"header\">\n  <span class=\"kirby-text-small\">{{ title }}</span>\n</div>\n"
             },] }
 ];
 /** @nocollapse */
@@ -7186,7 +7193,7 @@ ListItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-list-item',
                 template: "<ion-item-sliding\n  [class.selected]=\"isSelected\"\n  [kirbyListItemColor]=\"getItemColor\"\n  [item]=\"item\"\n  [disabled]=\"_isSwipingEnabled ? null : true\"\n  keyHandler\n  [ngClass]=\"boundaryClass\"\n  (click)=\"_onItemSelect(item)\"\n>\n  <ng-container\n    *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n  ></ng-container>\n  <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n  <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n    <div class=\"swipe-action\">\n      <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n        <ion-item-option\n          [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n          (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n        >\n          <div class=\"item-content\">\n            <kirby-icon\n              *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n              size=\"sm\"\n              [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n            >\n            </kirby-icon>\n            <ion-label>\n              {{ _getSwipeActionTitle(swipeAction, item) }}\n            </ion-label>\n          </div>\n        </ion-item-option>\n      </ng-container>\n    </div>\n  </ion-item-options>\n</ng-template>\n",
-                styles: ["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)}"]
+                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)}"]
             },] }
 ];
 /** @nocollapse */
@@ -7311,8 +7318,8 @@ class ReorderListComponent {
 ReorderListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-reorder-list',
-                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",
-                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)}"]
+                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",
+                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)}"]
             },] }
 ];
 /** @nocollapse */
@@ -7339,7 +7346,7 @@ ModalFooterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-modal-footer',
                 template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n",
-                styles: ["ion-footer{box-shadow:0 20px 30px -15px rgba(28,28,28,.3),0 0 5px 0 rgba(28,28,28,.08);display:flex;justify-content:var(--kirby-modal-footer-justify-content,center);align-items:center;background-color:var(--kirby-modal-footer-background,var(--kirby-white));color:var(--kirby-modal-footer-color,var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width:720px){:host{--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom:var(--kirby-safe-area-bottom)}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}"]
+                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)}"]
             },] }
 ];
 ModalFooterComponent.propDecorators = {
@@ -7465,9 +7472,7 @@ class PageProgressComponent {
 PageProgressComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-page-progress',
-                template: `
-    <ng-content></ng-content>
-  `,
+                template: ` <ng-content></ng-content> `,
                 styles: [':host {display: flex}']
             },] }
 ];
@@ -7483,9 +7488,7 @@ class PageTitleComponent {
 PageTitleComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-page-title',
-                template: `
-    <ng-content></ng-content>
-  `
+                template: ` <ng-content></ng-content> `
             },] }
 ];
 class PageContentComponent {
@@ -7493,9 +7496,7 @@ class PageContentComponent {
 PageContentComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-page-content',
-                template: `
-    <ng-content></ng-content>
-  `
+                template: ` <ng-content></ng-content> `
             },] }
 ];
 class PageActionsComponent {
@@ -7503,9 +7504,7 @@ class PageActionsComponent {
 PageActionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-page-actions',
-                template: `
-    <ng-content select="button[kirby-button]"></ng-content>
-  `
+                template: ` <ng-content select="button[kirby-button]"></ng-content> `
             },] }
 ];
 class PageComponent {
@@ -7980,6 +7979,7 @@ class SegmentedControlComponent {
         this.mode = SegmentedControlMode.default;
         this._items = [];
         this._selectedIndex = -1;
+        this._disableChangeOnSwipe = false;
         this.segmentSelect = new EventEmitter();
     }
     preventWrapperClick(event) {
@@ -8034,6 +8034,12 @@ class SegmentedControlComponent {
     set size(size) {
         this.isSmallSize = size === 'sm';
     }
+    get disableChangeOnSwipe() {
+        return this._disableChangeOnSwipe;
+    }
+    set disableChangeOnSwipe(value) {
+        this._disableChangeOnSwipe = value;
+    }
     onSegmentSelect(selectedId) {
         const selectedItemIndex = this.items.findIndex((item) => selectedId === item.id);
         if (selectedItemIndex !== this.selectedIndex) {
@@ -8045,7 +8051,7 @@ class SegmentedControlComponent {
 SegmentedControlComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-segmented-control',
-                template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n",
+                template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n",
                 // tslint:disable-next-line: no-host-metadata-property
                 host: { role: 'group' },
                 styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation:0 5px 10px -10px rgba(28,28,28,0.3),0 0 5px 0 rgba(28,28,28,0.08);--kirby-badge-position:absolute;--kirby-badge-top:-8px;--kirby-badge-right:8px;--kirby-badge-z-index:2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start:16px;--padding-end:16px}:host.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer:coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background:var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius:999px;--border-style:none;--background:none;--color:var(--kirby-white-contrast);--indicator-color:var(--kirby-black);--color-checked:var(--kirby-black-contrast);--color-hover:var(--kirby-black-tint);--indicator-box-shadow:none;--padding-start:24px;--padding-end:24px;--margin-bottom:0;--margin-end:0;--margin-start:0;--margin-top:0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}"]
@@ -8063,6 +8069,7 @@ SegmentedControlComponent.propDecorators = {
     value: [{ type: Input }],
     isSmallSize: [{ type: HostBinding, args: ['class.sm',] }],
     size: [{ type: Input }],
+    disableChangeOnSwipe: [{ type: Input }],
     segmentSelect: [{ type: Output }]
 };
 
@@ -8126,7 +8133,7 @@ SlideButtonComponent.decorators = [
                 selector: 'kirby-slide-button',
                 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",
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                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}"]
+                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}"]
             },] }
 ];
 /** @nocollapse */
@@ -8382,11 +8389,9 @@ class FlagComponent {
 FlagComponent.decorators = [
     { type: Component, args: [{
                 selector: 'kirby-flag',
-                template: `
-    <ng-content></ng-content>
-  `,
+                template: ` <ng-content></ng-content> `,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                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)}"]
+                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)}"]
             },] }
 ];
 FlagComponent.propDecorators = {
@@ -8576,7 +8581,7 @@ RangeComponent.decorators = [
                         useExisting: forwardRef(() => RangeComponent),
                     },
                 ],
-                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}"]
+                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}"]
             },] }
 ];
 RangeComponent.propDecorators = {