@kirbydesign/designsystem 7.1.1 → 7.2.1

package/fesm2015/kirbydesign-designsystem.mjs

@@ -1,12 +1,12 @@
 import { DesignTokenHelper, ColorHelper, capitalizeFirstLetter } from '@kirbydesign/core';
 export { ColorHelper, DesignTokenHelper, camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, kebabToTitleCase } from '@kirbydesign/core';
 import * as i0 from '@angular/core';
-import { Directive, Injectable, Component, ChangeDetectionStrategy, HostBinding, Input, Optional, InjectionToken, Injector, HostListener, ElementRef, ContentChild, RendererStyleFlags2, ViewChildren, ViewChild, EventEmitter, Output, ContentChildren, Inject, NgModule, ChangeDetectorRef, NgZone, forwardRef, TemplateRef, LOCALE_ID, SkipSelf, APP_INITIALIZER } from '@angular/core';
+import { Directive, Injectable, Component, ChangeDetectionStrategy, HostBinding, Input, Optional, InjectionToken, Injector, HostListener, ElementRef, ContentChild, RendererStyleFlags2, ViewChildren, ViewChild, ContentChildren, EventEmitter, Output, Inject, NgModule, ChangeDetectorRef, NgZone, forwardRef, TemplateRef, LOCALE_ID, ViewEncapsulation, SkipSelf, APP_INITIALIZER } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@ionic/angular';
-import { IonContent, IonHeader, IonToolbar, IonTitle, createAnimation, IonApp, IonicModule, IonRadio, IonFabButton, IonItemSliding, IonList, IonTabs, IonFooter, IonBackButtonDelegate } from '@ionic/angular';
+import { IonContent, IonHeader, IonToolbar, IonTitle, createAnimation, IonApp, IonicModule, IonRadio, IonFabButton, IonFab, IonItemSliding, IonList, IonTabs, IonFooter, IonBackButtonDelegate } from '@ionic/angular';
 export { IonRouterOutlet, NavController } from '@ionic/angular';
-import * as i2 from '@angular/common';
+import * as i5 from '@angular/common';
 import { CommonModule, getLocaleDateFormat, FormatWidth, getLocaleNumberSymbol, NumberSymbol, DOCUMENT } from '@angular/common';
 import { __awaiter, __rest } from 'tslib';
 import * as i1$1 from '@angular/router';
@@ -128,6 +128,7 @@ const kirbyIconSettings = {
         { name: 'information-decoration', svg: 'assets/kirby/icons/svg/information-decoration.svg' },
         { name: 'notification', svg: 'assets/kirby/icons/svg/notification.svg' },
         { name: 'transfer-ownership', svg: 'assets/kirby/icons/svg/transfer-ownership.svg' },
+        { name: 'update', svg: 'assets/kirby/icons/svg/update.svg' },
     ],
 };
 const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);
@@ -301,7 +302,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
 class RouterOutletComponent {
 }
 /** @nocollapse */ RouterOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RouterOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RouterOutletComponent, selector: "kirby-router-outlet", inputs: { main: "main" }, ngImport: i0, template: "<ng-container *ngIf=\"main\">\n  <ion-router-outlet main></ion-router-outlet>\n</ng-container>\n<ng-container *ngIf=\"!main\">\n  <ion-router-outlet></ion-router-outlet>\n</ng-container>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.IonRouterOutlet, selector: "ion-router-outlet", inputs: ["animated", "animation", "swipeGesture"], outputs: ["stackEvents", "activate", "deactivate"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ RouterOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RouterOutletComponent, selector: "kirby-router-outlet", inputs: { main: "main" }, ngImport: i0, template: "<ng-container *ngIf=\"main\">\n  <ion-router-outlet main></ion-router-outlet>\n</ng-container>\n<ng-container *ngIf=\"!main\">\n  <ion-router-outlet></ion-router-outlet>\n</ng-container>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.IonRouterOutlet, selector: "ion-router-outlet", inputs: ["animated", "animation", "swipeGesture"], outputs: ["stackEvents", "activate", "deactivate"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RouterOutletComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-router-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"main\">\n  <ion-router-outlet main></ion-router-outlet>\n</ng-container>\n<ng-container *ngIf=\"!main\">\n  <ion-router-outlet></ion-router-outlet>\n</ng-container>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"] }]
@@ -417,7 +418,7 @@ class ModalCompactWrapperComponent {
     }
 }
 /** @nocollapse */ ModalCompactWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalCompactWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ModalCompactWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalCompactWrapperComponent, selector: "kirby-modal-compact-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()" }, properties: { "class.ion-page": "false" } }, providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], ngImport: i0, template: "<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n", styles: [":host{display:block;padding:24px 16px}\n"], directives: [{ type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }] });
+/** @nocollapse */ ModalCompactWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalCompactWrapperComponent, selector: "kirby-modal-compact-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()" }, properties: { "class.ion-page": "false" } }, providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], ngImport: i0, template: "<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n", styles: [":host{display:block;padding:24px 16px}\n"], directives: [{ type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalCompactWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-modal-compact-wrapper', providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], host: { '[class.ion-page]': 'false' }, template: "<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n", styles: [":host{display:block;padding:24px 16px}\n"] }]
@@ -1089,7 +1090,7 @@ ModalWrapperComponent.KEYBOARD_HIDE_DELAY_IN_MS = 100;
 /** @nocollapse */ ModalWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalWrapperComponent, selector: "kirby-modal-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()", "window:ionKeyboardDidShow": "_onKeyboardShow($event.detail.keyboardHeight)", "window:keyboardWillShow": "_onKeyboardShow($event.keyboardHeight)", "window:ionKeyboardDidHide": "_onKeyboardHide()", "window:keyboardWillHide": "_onKeyboardHide()", "window:resize": "_onWindowResize()" }, properties: { "class.collapsible-title": "this._hasCollapsibleTitle", "class.drawer": "this._isDrawer" } }, providers: [
         { provide: Modal, useExisting: ModalWrapperComponent },
         { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
-    ], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "_contentTitleElement", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-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  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\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 [noDecoration]=\"true\" size=\"md\" (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 [noDecoration]=\"true\" size=\"md\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--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, 0px))}: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, 0px))}: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}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+    ], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "_contentTitleElement", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-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  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\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 [noDecoration]=\"true\" size=\"md\" (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 [noDecoration]=\"true\" size=\"md\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--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, 0px))}: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, 0px))}: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}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-modal-wrapper', providers: [
@@ -1413,285 +1414,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: PlatformService }]; } });
 
-class ModalHelper {
-    constructor(ionicModalController, modalAnimationBuilder, windowRef) {
-        this.ionicModalController = ionicModalController;
-        this.modalAnimationBuilder = modalAnimationBuilder;
-        this.windowRef = windowRef;
+class EmptyStateComponent {
+    ngAfterContentInit() {
+        this.enforceAttentionLevelRules();
+        /* setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention
+        levels of slotted buttons in this.enforceAttentionLevelRules */
+        this.slottedButtons.changes.subscribe(() => {
+            setTimeout(() => this.enforceAttentionLevelRules());
+        });
     }
-    showModalWindow(config) {
-        return __awaiter(this, void 0, void 0, function* () {
-            config.flavor = config.flavor || 'modal';
-            const modalPresentingElement = yield this.getPresentingElement(config.flavor);
-            let currentBackdrop;
-            const topMostModal = yield this.ionicModalController.getTop();
-            if (topMostModal) {
-                currentBackdrop =
-                    topMostModal.shadowRoot.querySelector('ion-backdrop');
-            }
-            const enterAnimation = this.modalAnimationBuilder.enterAnimation(currentBackdrop);
-            const leaveAnimation = this.modalAnimationBuilder.leaveAnimation(currentBackdrop);
-            const defaultModalSize = config.flavor === 'modal' ? 'medium' : null;
-            const modalSize = config.size || defaultModalSize;
-            const allow_scroll_class = 'allow-background-scroll';
-            let customCssClasses = [];
-            if (config.cssClass) {
-                customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];
-            }
-            if (config.interactWithBackground) {
-                this.windowRef.nativeWindow.document.body.classList.add(allow_scroll_class);
-            }
-            const ionModal = yield this.ionicModalController.create({
-                component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
-                cssClass: [
-                    'kirby-overlay',
-                    'kirby-modal',
-                    config.flavor === 'drawer' ? 'kirby-drawer' : null,
-                    config.flavor === 'compact' ? 'kirby-modal-compact' : null,
-                    modalSize ? 'kirby-modal-' + modalSize : null,
-                    config.interactWithBackground ? 'interact-with-background' : null,
-                    ...customCssClasses,
-                ],
-                backdropDismiss: config.flavor === 'compact' || config.interactWithBackground ? false : true,
-                showBackdrop: !config.interactWithBackground,
-                componentProps: { config: config },
-                swipeToClose: config.flavor != 'compact',
-                presentingElement: modalPresentingElement,
-                keyboardClose: false,
-                enterAnimation,
-                leaveAnimation,
-            });
-            if (config.interactWithBackground) {
-                ionModal.onDidDismiss().then(() => {
-                    this.windowRef.nativeWindow.document.body.classList.remove(allow_scroll_class);
-                });
+    /** Enforces that all slotted buttons will have their attention
+     * level set to 3, except the first button if it has
+     * level 1.
+     */
+    enforceAttentionLevelRules() {
+        this.slottedButtons.forEach((button, index) => {
+            if (index === 0 && button.isAttentionLevel1)
+                return;
+            if (!button.isAttentionLevel3) {
+                button.attentionLevel = '3';
             }
-            yield ionModal.present();
-            return {
-                dismiss: ionModal.dismiss.bind(ionModal),
-                onWillDismiss: ionModal.onWillDismiss(),
-                onDidDismiss: ionModal.onDidDismiss(),
-            };
         });
     }
-    registerPresentingElement(element) {
-        ModalHelper.presentingElement = element;
+}
+/** @nocollapse */ EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EmptyStateComponent, selector: "kirby-empty-state", inputs: { iconName: "iconName", customIconName: "customIconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<article>\n  <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n    <kirby-icon [name]=\"iconName\" [customName]=\"customIconName\" size=\"lg\"></kirby-icon>\n  </div>\n  <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n  <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</article>\n", styles: ["article{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}h3.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}\n"], components: [{ type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article>\n  <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n    <kirby-icon [name]=\"iconName\" [customName]=\"customIconName\" size=\"lg\"></kirby-icon>\n  </div>\n  <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n  <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</article>\n", styles: ["article{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}h3.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}\n"] }]
+        }], propDecorators: { iconName: [{
+                type: Input
+            }], customIconName: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], slottedButtons: [{
+                type: ContentChildren,
+                args: [ButtonComponent]
+            }] } });
+
+class ThemeColorDirective {
+    constructor() {
+        this._isDefault = true;
     }
-    getPresentingElement(flavor) {
-        return __awaiter(this, void 0, void 0, function* () {
-            let modalPresentingElement = undefined;
-            if (!flavor || flavor === 'modal') {
-                const topMostModal = yield this.ionicModalController.getTop();
-                if (!topMostModal) {
-                    modalPresentingElement = ModalHelper.presentingElement;
-                }
-                else if (!topMostModal.classList.contains('kirby-drawer') &&
-                    !topMostModal.classList.contains('kirby-modal-compact')) {
-                    modalPresentingElement = topMostModal;
-                }
-            }
-            return modalPresentingElement;
-        });
+    get isDefault() {
+        return this._isDefault;
     }
-    scrollToTop(noModalRegisteredErrorMessage, duration) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const modal = yield this.ionicModalController.getTop();
-            if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
-                throw new Error(noModalRegisteredErrorMessage);
-            }
-            modal.component.scrollToTop(duration);
-        });
+    get isPrimary() {
+        return this._isPrimary;
     }
-    scrollToBottom(noModalRegisteredErrorMessage, duration) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const modal = yield this.ionicModalController.getTop();
-            if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
-                throw new Error(noModalRegisteredErrorMessage);
-            }
-            modal.component.scrollToBottom(duration);
-        });
+    get isSecondary() {
+        return this._isSecondary;
     }
-}
-// TODO: Make presentingElement an instance field when
-// forRoot()/singleton services has been solved:
-ModalHelper.presentingElement = undefined;
-/** @nocollapse */ ModalHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, deps: [{ token: i1.ModalController }, { token: ModalAnimationBuilderService }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ ModalHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.ModalController }, { type: ModalAnimationBuilderService }, { type: WindowRef }]; } });
-
-class CardComponent {
-    constructor(elementRef, resizeObserverService, renderer) {
-        this.elementRef = elementRef;
-        this.resizeObserverService = resizeObserverService;
-        this.renderer = renderer;
-        this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint({
-            small: 360,
-            medium: 720,
-            large: 1024,
-        });
-        this.flat = false;
-        this.highlighted = false;
+    get isTertiary() {
+        return this._isTertiary;
     }
-    set backgroundImageUrl(value) {
-        this._backgroundImage = `url('${value}')`;
+    get isSuccess() {
+        return this._isSuccess;
     }
-    set sizes(value) {
-        if (typeof value === 'string') {
-            console.error('Sizes property cannot be a string. Please ensure the size property is bound as an expression:\n[sizes]="{...}"');
-        }
-        this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);
+    get isWarning() {
+        return this._isWarning;
     }
-    set mode(value) {
-        this.flat = value === 'flat';
-        this.highlighted = value === 'highlighted';
+    get isDanger() {
+        return this._isDanger;
     }
-    ngOnInit() {
-        this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));
+    get isLight() {
+        return this._isLight;
     }
-    ngOnDestroy() {
-        this.resizeObserverService.unobserve(this.elementRef);
+    get isMedium() {
+        return this._isMedium;
     }
-    sortSizesByBreakpoint(sizes) {
-        return Object.entries(sizes).sort(this.compareSizesByBreakpoint);
+    get isDark() {
+        return this._isDark;
     }
-    compareSizesByBreakpoint(a, b) {
-        return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;
+    get isWhite() {
+        return this._isWhite;
     }
-    handleResize(entry) {
-        const sizeAttributeName = 'size';
-        const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];
-        const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];
-        if (entry.contentRect.width < smallestBreakpointWidth) {
-            this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);
-        }
-        else {
-            this.sizesSortedByBreakpoint.forEach(([size, width]) => {
-                if (entry.contentRect.width >= width) {
-                    this.renderer.setAttribute(entry.target, sizeAttributeName, size);
-                }
-            });
-        }
+    get isBrightnessWhite() {
+        return this._isBrightnessWhite;
+    }
+    get isBrightnessLight() {
+        return this._isBrightnessLight;
+    }
+    get isBrightnessDark() {
+        return this._isBrightnessDark;
+    }
+    set themeColor(value) {
+        this._isDefault = !value;
+        this._isPrimary = value === 'primary';
+        this._isSecondary = value === 'secondary';
+        this._isTertiary = value === 'tertiary';
+        this._isSuccess = value === 'success';
+        this._isWarning = value === 'warning';
+        this._isDanger = value === 'danger';
+        this._isLight = value === 'light';
+        this._isMedium = value === 'medium';
+        this._isDark = value === 'dark';
+        this._isWhite = value === 'white';
+        const colorBrightness = ColorHelper.getColorBrightness(value);
+        this._isBrightnessWhite = colorBrightness === 'white';
+        this._isBrightnessLight = colorBrightness === 'light';
+        this._isBrightnessDark = colorBrightness === 'dark';
     }
 }
-/** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode", hasDarkBackgroundColor: "hasDarkBackgroundColor" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat", "class.highlighted": "this.highlighted", "class.interaction-state-make-lighter-and-louder": "this.hasDarkBackgroundColor" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], _backgroundImage: [{
+/** @nocollapse */ ThemeColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ ThemeColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, host: { properties: { "class.default": "this.isDefault", "class.primary": "this.isPrimary", "class.secondary": "this.isSecondary", "class.tertiary": "this.isTertiary", "class.success": "this.isSuccess", "class.warning": "this.isWarning", "class.danger": "this.isDanger", "class.light": "this.isLight", "class.medium": "this.isMedium", "class.dark": "this.isDark", "class.white": "this.isWhite", "class.kirby-color-brightness-white": "this.isBrightnessWhite", "class.kirby-color-brightness-light": "this.isBrightnessLight", "class.kirby-color-brightness-dark": "this.isBrightnessDark" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ThemeColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: `kirby-avatar[themeColor],
+             kirby-card[themeColor],
+             kirby-icon[themeColor],
+             kirby-progress-circle-ring[themeColor],
+             kirby-modal-footer[themeColor],
+             kirby-empty-state[themeColor]`,
+                }]
+        }], propDecorators: { isDefault: [{
                 type: HostBinding,
-                args: ['style.--kirby-card-background-image']
-            }], backgroundImageUrl: [{
-                type: Input
-            }], hasPadding: [{
-                type: Input
-            }], sizes: [{
-                type: Input
-            }], flat: [{
+                args: ['class.default']
+            }], isPrimary: [{
                 type: HostBinding,
-                args: ['class.flat']
-            }], highlighted: [{
+                args: ['class.primary']
+            }], isSecondary: [{
                 type: HostBinding,
-                args: ['class.highlighted']
-            }], mode: [{
-                type: Input
-            }], hasDarkBackgroundColor: [{
+                args: ['class.secondary']
+            }], isTertiary: [{
                 type: HostBinding,
-                args: ['class.interaction-state-make-lighter-and-louder']
-            }, {
-                type: Input
-            }] } });
-
-class CardHeaderComponent {
-    constructor() {
-        this.flagged = null;
-    }
-}
-/** @nocollapse */ CardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged" }, host: { properties: { "class": "this.flagged" } }, ngImport: i0, 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: 0px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, 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: 0px}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], isTitleBold: [{
-                type: Input
-            }], flagged: [{
+                args: ['class.tertiary']
+            }], isSuccess: [{
+                type: HostBinding,
+                args: ['class.success']
+            }], isWarning: [{
+                type: HostBinding,
+                args: ['class.warning']
+            }], isDanger: [{
+                type: HostBinding,
+                args: ['class.danger']
+            }], isLight: [{
                 type: HostBinding,
-                args: ['class']
-            }, {
+                args: ['class.light']
+            }], isMedium: [{
+                type: HostBinding,
+                args: ['class.medium']
+            }], isDark: [{
+                type: HostBinding,
+                args: ['class.dark']
+            }], isWhite: [{
+                type: HostBinding,
+                args: ['class.white']
+            }], isBrightnessWhite: [{
+                type: HostBinding,
+                args: ['class.kirby-color-brightness-white']
+            }], isBrightnessLight: [{
+                type: HostBinding,
+                args: ['class.kirby-color-brightness-light']
+            }], isBrightnessDark: [{
+                type: HostBinding,
+                args: ['class.kirby-color-brightness-dark']
+            }], themeColor: [{
                 type: Input
             }] } });
 
-class ActionSheetComponent {
-    constructor() {
-        this.cancelButtonText = 'Cancel';
-        this.hideCancel = false;
-        this.disabled = false;
-        this.cancel = new EventEmitter();
-        this.itemSelect = new EventEmitter();
+class AlertComponent {
+    constructor(elementRef, windowRef) {
+        this.elementRef = elementRef;
+        this.windowRef = windowRef;
+        this.BLUR_WRAPPER_DELAY_IN_MS = 50;
+        this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
     }
-    onItemSelect(selection) {
-        this.itemSelect.emit(selection);
+    set title(title) {
+        this.title$ = typeof title === 'string' ? of(title) : title;
+    }
+    set message(message) {
+        this.message$ = typeof message === 'string' ? of(message) : message;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.alertWrapper.nativeElement.focus();
+            this.alertWrapper.nativeElement.blur();
+        }, this.BLUR_WRAPPER_DELAY_IN_MS);
+    }
+    onFocusChange() {
+        // This fixes an undesired scroll behaviour occurring on keyboard-tabbing
+        this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
     }
     onCancel() {
-        this.cancel.emit();
+        const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
+        ionModalElement && ionModalElement.dismiss(false);
+    }
+    onOk() {
+        const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
+        ionModalElement && ionModalElement.dismiss(true);
     }
 }
-/** @nocollapse */ ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, 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    [noDecoration]=\"true\"\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)) );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}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}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}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"], components: [{ type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, decorators: [{
+/** @nocollapse */ AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AlertComponent, selector: "kirby-alert", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okBtn: "okBtn", okBtnIsDestructive: "okBtnIsDestructive", cancelBtn: "cancelBtn" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    <button\n      kirby-button\n      *ngIf=\"cancelBtn\"\n      attentionLevel=\"3\"\n      class=\"cancel-btn\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelBtn }}\n    </button>\n    <button\n      kirby-button\n      [size]=\"cancelBtn ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [isDestructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn }}\n    </button>\n  </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"], components: [{ type: EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "customIconName", "title", "subtitle"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: ThemeColorDirective, selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, 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    [noDecoration]=\"true\"\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)) );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}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}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}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"] }]
-        }], propDecorators: { cancelButtonText: [{
+            args: [{ selector: 'kirby-alert', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    <button\n      kirby-button\n      *ngIf=\"cancelBtn\"\n      attentionLevel=\"3\"\n      class=\"cancel-btn\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelBtn }}\n    </button>\n    <button\n      kirby-button\n      [size]=\"cancelBtn ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [isDestructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn }}\n    </button>\n  </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: WindowRef }]; }, propDecorators: { alertWrapper: [{
+                type: ViewChild,
+                args: ['alertWrapper', { static: true }]
+            }], title: [{
                 type: Input
-            }], hideCancel: [{
+            }], message: [{
                 type: Input
-            }], disabled: [{
+            }], iconName: [{
                 type: Input
-            }], header: [{
+            }], iconThemeColor: [{
                 type: Input
-            }], subheader: [{
+            }], okBtn: [{
                 type: Input
-            }], items: [{
+            }], okBtnIsDestructive: [{
+                type: Input
+            }], cancelBtn: [{
                 type: Input
-            }], cancel: [{
-                type: Output
-            }], itemSelect: [{
-                type: Output
             }] } });
 
-class ActionSheetHelper {
+class AlertHelper {
     constructor(ionicModalController) {
         this.ionicModalController = ionicModalController;
     }
-    showActionSheet(config) {
+    showAlert(config) {
         return __awaiter(this, void 0, void 0, function* () {
-            const cancel = new EventEmitter();
-            const itemSelect = new EventEmitter();
             const ionModal = yield this.ionicModalController.create({
-                component: ActionSheetComponent,
-                cssClass: ['kirby-overlay', 'kirby-action-sheet'],
-                componentProps: Object.assign(Object.assign({}, config), { cancel: cancel, itemSelect: itemSelect }),
-                backdropDismiss: true,
-            });
-            // Remove 'modal-shadow' element as we are no longer able to hide it with CSS in Ionic 6.
-            // We need to remove it so it does not obstruct the backdrop-click to dismiss functionality.
-            ionModal.shadowRoot.querySelector('.modal-shadow').remove();
-            const cancelSubscription = cancel.subscribe(() => ionModal.dismiss());
-            const itemSelectSubscription = itemSelect.subscribe((item) => ionModal.dismiss(item));
-            const onDidDismiss = ionModal.onDidDismiss();
-            onDidDismiss.then((_) => {
-                cancelSubscription.unsubscribe();
-                itemSelectSubscription.unsubscribe();
+                component: AlertComponent,
+                componentProps: this.getComponentProps(config),
+                cssClass: ['kirby-overlay', 'kirby-alert'],
+                mode: 'ios',
+                backdropDismiss: false,
             });
             yield ionModal.present();
             return {
@@ -1701,245 +1655,326 @@ class ActionSheetHelper {
             };
         });
     }
+    getComponentProps(config) {
+        return Object.assign(Object.assign({}, config), { okBtn: this.getOkBtn(config), cancelBtn: config.cancelBtn, okBtnIsDestructive: this.getOkBtnIsDestructive(config), iconName: config.icon && config.icon.name, iconThemeColor: config.icon && config.icon.themeColor });
+    }
+    getOkBtn(config) {
+        let text;
+        if (config.okBtn) {
+            if (typeof config.okBtn === 'string') {
+                text = config.okBtn;
+            }
+            else {
+                text = config.okBtn.text;
+            }
+        }
+        return text;
+    }
+    getOkBtnIsDestructive(config) {
+        return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
+    }
 }
-/** @nocollapse */ ActionSheetHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ ActionSheetHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper, decorators: [{
+/** @nocollapse */ AlertHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ AlertHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.ModalController }]; } });
 
-class EmptyStateComponent {
-    ngAfterContentInit() {
-        this.enforceAttentionLevelRules();
-        /* setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention
-        levels of slotted buttons in this.enforceAttentionLevelRules */
-        this.slottedButtons.changes.subscribe(() => {
-            setTimeout(() => this.enforceAttentionLevelRules());
-        });
+class ModalHelper {
+    constructor(ionicModalController, modalAnimationBuilder, windowRef, alertHelper) {
+        this.ionicModalController = ionicModalController;
+        this.modalAnimationBuilder = modalAnimationBuilder;
+        this.windowRef = windowRef;
+        this.alertHelper = alertHelper;
     }
-    /** Enforces that all slotted buttons will have their attention
-     * level set to 3, except the first button if it has
-     * level 1.
-     */
-    enforceAttentionLevelRules() {
-        this.slottedButtons.forEach((button, index) => {
-            if (index === 0 && button.isAttentionLevel1)
-                return;
-            if (!button.isAttentionLevel3) {
-                button.attentionLevel = '3';
+    showModalWindow(config, alertConfig) {
+        return __awaiter(this, void 0, void 0, function* () {
+            config.flavor = config.flavor || 'modal';
+            const modalPresentingElement = yield this.getPresentingElement(config.flavor);
+            let currentBackdrop;
+            const topMostModal = yield this.ionicModalController.getTop();
+            if (topMostModal) {
+                currentBackdrop =
+                    topMostModal.shadowRoot.querySelector('ion-backdrop');
+            }
+            const enterAnimation = this.modalAnimationBuilder.enterAnimation(currentBackdrop);
+            const leaveAnimation = this.modalAnimationBuilder.leaveAnimation(currentBackdrop);
+            const defaultModalSize = config.flavor === 'modal' ? 'medium' : null;
+            const modalSize = config.size || defaultModalSize;
+            const allow_scroll_class = 'allow-background-scroll';
+            let customCssClasses = [];
+            if (config.cssClass) {
+                customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];
+            }
+            if (config.interactWithBackground) {
+                this.windowRef.nativeWindow.document.body.classList.add(allow_scroll_class);
+            }
+            let canDismiss = true;
+            if (alertConfig) {
+                canDismiss = () => __awaiter(this, void 0, void 0, function* () {
+                    const canBeDismissed = yield this.showAlert(alertConfig);
+                    return canBeDismissed;
+                });
+            }
+            const ionModal = yield this.ionicModalController.create({
+                component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
+                cssClass: [
+                    'kirby-overlay',
+                    'kirby-modal',
+                    config.flavor === 'drawer' ? 'kirby-drawer' : null,
+                    config.flavor === 'compact' ? 'kirby-modal-compact' : null,
+                    modalSize ? 'kirby-modal-' + modalSize : null,
+                    config.interactWithBackground ? 'interact-with-background' : null,
+                    ...customCssClasses,
+                ],
+                backdropDismiss: config.flavor === 'compact' || config.interactWithBackground ? false : true,
+                showBackdrop: !config.interactWithBackground,
+                componentProps: { config: config },
+                swipeToClose: config.flavor != 'compact',
+                presentingElement: modalPresentingElement,
+                keyboardClose: false,
+                canDismiss,
+                enterAnimation,
+                leaveAnimation,
+            });
+            if (config.interactWithBackground) {
+                ionModal.onDidDismiss().then(() => {
+                    this.windowRef.nativeWindow.document.body.classList.remove(allow_scroll_class);
+                });
             }
+            yield ionModal.present();
+            return {
+                dismiss: ionModal.dismiss.bind(ionModal),
+                onWillDismiss: ionModal.onWillDismiss(),
+                onDidDismiss: ionModal.onDidDismiss(),
+            };
         });
     }
-}
-/** @nocollapse */ EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EmptyStateComponent, selector: "kirby-empty-state", inputs: { iconName: "iconName", customIconName: "customIconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<article>\n  <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n    <kirby-icon [name]=\"iconName\" [customName]=\"customIconName\" size=\"lg\"></kirby-icon>\n  </div>\n  <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n  <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</article>\n", styles: ["article{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}h3.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}\n"], components: [{ type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmptyStateComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article>\n  <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n    <kirby-icon [name]=\"iconName\" [customName]=\"customIconName\" size=\"lg\"></kirby-icon>\n  </div>\n  <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n  <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</article>\n", styles: ["article{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}h3.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}\n"] }]
-        }], propDecorators: { iconName: [{
-                type: Input
-            }], customIconName: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], slottedButtons: [{
-                type: ContentChildren,
-                args: [ButtonComponent]
-            }] } });
-
-class ThemeColorDirective {
-    constructor() {
-        this._isDefault = true;
-    }
-    get isDefault() {
-        return this._isDefault;
-    }
-    get isPrimary() {
-        return this._isPrimary;
+    registerPresentingElement(element) {
+        ModalHelper.presentingElement = element;
     }
-    get isSecondary() {
-        return this._isSecondary;
+    showAlert(config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const alert = yield this.alertHelper.showAlert(config);
+            const result = yield alert.onWillDismiss;
+            return result.data;
+        });
     }
-    get isTertiary() {
-        return this._isTertiary;
+    getPresentingElement(flavor) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let modalPresentingElement = undefined;
+            if (!flavor || flavor === 'modal') {
+                const topMostModal = yield this.ionicModalController.getTop();
+                if (!topMostModal) {
+                    modalPresentingElement = ModalHelper.presentingElement;
+                }
+                else if (!topMostModal.classList.contains('kirby-drawer') &&
+                    !topMostModal.classList.contains('kirby-modal-compact')) {
+                    modalPresentingElement = topMostModal;
+                }
+            }
+            return modalPresentingElement;
+        });
     }
-    get isSuccess() {
-        return this._isSuccess;
+    scrollToTop(noModalRegisteredErrorMessage, duration) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const modal = yield this.ionicModalController.getTop();
+            if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
+                throw new Error(noModalRegisteredErrorMessage);
+            }
+            modal.component.scrollToTop(duration);
+        });
     }
-    get isWarning() {
-        return this._isWarning;
+    scrollToBottom(noModalRegisteredErrorMessage, duration) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const modal = yield this.ionicModalController.getTop();
+            if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
+                throw new Error(noModalRegisteredErrorMessage);
+            }
+            modal.component.scrollToBottom(duration);
+        });
     }
-    get isDanger() {
-        return this._isDanger;
+}
+// TODO: Make presentingElement an instance field when
+// forRoot()/singleton services has been solved:
+ModalHelper.presentingElement = undefined;
+/** @nocollapse */ ModalHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, deps: [{ token: i1.ModalController }, { token: ModalAnimationBuilderService }, { token: WindowRef }, { token: AlertHelper }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ ModalHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.ModalController }, { type: ModalAnimationBuilderService }, { type: WindowRef }, { type: AlertHelper }]; } });
+
+class CardComponent {
+    constructor(elementRef, resizeObserverService, renderer) {
+        this.elementRef = elementRef;
+        this.resizeObserverService = resizeObserverService;
+        this.renderer = renderer;
+        this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint({
+            small: 360,
+            medium: 720,
+            large: 1024,
+        });
+        this.flat = false;
+        this.highlighted = false;
     }
-    get isLight() {
-        return this._isLight;
+    set backgroundImageUrl(value) {
+        this._backgroundImage = `url('${value}')`;
     }
-    get isMedium() {
-        return this._isMedium;
+    set sizes(value) {
+        if (typeof value === 'string') {
+            console.error('Sizes property cannot be a string. Please ensure the size property is bound as an expression:\n[sizes]="{...}"');
+        }
+        this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);
     }
-    get isDark() {
-        return this._isDark;
+    set mode(value) {
+        this.flat = value === 'flat';
+        this.highlighted = value === 'highlighted';
     }
-    get isWhite() {
-        return this._isWhite;
+    ngOnInit() {
+        this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));
     }
-    get isBrightnessWhite() {
-        return this._isBrightnessWhite;
+    ngOnDestroy() {
+        this.resizeObserverService.unobserve(this.elementRef);
     }
-    get isBrightnessLight() {
-        return this._isBrightnessLight;
+    sortSizesByBreakpoint(sizes) {
+        return Object.entries(sizes).sort(this.compareSizesByBreakpoint);
     }
-    get isBrightnessDark() {
-        return this._isBrightnessDark;
+    compareSizesByBreakpoint(a, b) {
+        return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;
     }
-    set themeColor(value) {
-        this._isDefault = !value;
-        this._isPrimary = value === 'primary';
-        this._isSecondary = value === 'secondary';
-        this._isTertiary = value === 'tertiary';
-        this._isSuccess = value === 'success';
-        this._isWarning = value === 'warning';
-        this._isDanger = value === 'danger';
-        this._isLight = value === 'light';
-        this._isMedium = value === 'medium';
-        this._isDark = value === 'dark';
-        this._isWhite = value === 'white';
-        const colorBrightness = ColorHelper.getColorBrightness(value);
-        this._isBrightnessWhite = colorBrightness === 'white';
-        this._isBrightnessLight = colorBrightness === 'light';
-        this._isBrightnessDark = colorBrightness === 'dark';
+    handleResize(entry) {
+        const sizeAttributeName = 'size';
+        const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];
+        const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];
+        if (entry.contentRect.width < smallestBreakpointWidth) {
+            this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);
+        }
+        else {
+            this.sizesSortedByBreakpoint.forEach(([size, width]) => {
+                if (entry.contentRect.width >= width) {
+                    this.renderer.setAttribute(entry.target, sizeAttributeName, size);
+                }
+            });
+        }
     }
 }
-/** @nocollapse */ ThemeColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ ThemeColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, host: { properties: { "class.default": "this.isDefault", "class.primary": "this.isPrimary", "class.secondary": "this.isSecondary", "class.tertiary": "this.isTertiary", "class.success": "this.isSuccess", "class.warning": "this.isWarning", "class.danger": "this.isDanger", "class.light": "this.isLight", "class.medium": "this.isMedium", "class.dark": "this.isDark", "class.white": "this.isWhite", "class.kirby-color-brightness-white": "this.isBrightnessWhite", "class.kirby-color-brightness-light": "this.isBrightnessLight", "class.kirby-color-brightness-dark": "this.isBrightnessDark" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ThemeColorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: `kirby-avatar[themeColor],
-             kirby-card[themeColor],
-             kirby-icon[themeColor],
-             kirby-progress-circle-ring[themeColor],
-             kirby-modal-footer[themeColor],
-             kirby-empty-state[themeColor]`,
-                }]
-        }], propDecorators: { isDefault: [{
-                type: HostBinding,
-                args: ['class.default']
-            }], isPrimary: [{
-                type: HostBinding,
-                args: ['class.primary']
-            }], isSecondary: [{
-                type: HostBinding,
-                args: ['class.secondary']
-            }], isTertiary: [{
-                type: HostBinding,
-                args: ['class.tertiary']
-            }], isSuccess: [{
-                type: HostBinding,
-                args: ['class.success']
-            }], isWarning: [{
-                type: HostBinding,
-                args: ['class.warning']
-            }], isDanger: [{
-                type: HostBinding,
-                args: ['class.danger']
-            }], isLight: [{
-                type: HostBinding,
-                args: ['class.light']
-            }], isMedium: [{
-                type: HostBinding,
-                args: ['class.medium']
-            }], isDark: [{
-                type: HostBinding,
-                args: ['class.dark']
-            }], isWhite: [{
+/** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode", hasDarkBackgroundColor: "hasDarkBackgroundColor" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat", "class.highlighted": "this.highlighted", "class.interaction-state-make-lighter-and-louder": "this.hasDarkBackgroundColor" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], _backgroundImage: [{
                 type: HostBinding,
-                args: ['class.white']
-            }], isBrightnessWhite: [{
+                args: ['style.--kirby-card-background-image']
+            }], backgroundImageUrl: [{
+                type: Input
+            }], hasPadding: [{
+                type: Input
+            }], sizes: [{
+                type: Input
+            }], flat: [{
                 type: HostBinding,
-                args: ['class.kirby-color-brightness-white']
-            }], isBrightnessLight: [{
+                args: ['class.flat']
+            }], highlighted: [{
                 type: HostBinding,
-                args: ['class.kirby-color-brightness-light']
-            }], isBrightnessDark: [{
+                args: ['class.highlighted']
+            }], mode: [{
+                type: Input
+            }], hasDarkBackgroundColor: [{
                 type: HostBinding,
-                args: ['class.kirby-color-brightness-dark']
-            }], themeColor: [{
+                args: ['class.interaction-state-make-lighter-and-louder']
+            }, {
                 type: Input
             }] } });
 
-class AlertComponent {
-    constructor(elementRef, windowRef) {
-        this.elementRef = elementRef;
-        this.windowRef = windowRef;
-        this.BLUR_WRAPPER_DELAY_IN_MS = 50;
-        this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
-    }
-    set title(title) {
-        this.title$ = typeof title === 'string' ? of(title) : title;
-    }
-    set message(message) {
-        this.message$ = typeof message === 'string' ? of(message) : message;
+class CardHeaderComponent {
+    constructor() {
+        this.flagged = null;
     }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.alertWrapper.nativeElement.focus();
-            this.alertWrapper.nativeElement.blur();
-        }, this.BLUR_WRAPPER_DELAY_IN_MS);
+}
+/** @nocollapse */ CardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ CardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged" }, host: { properties: { "class": "this.flagged" } }, ngImport: i0, 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: 0px}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, 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: 0px}\n"] }]
+        }], propDecorators: { title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], isTitleBold: [{
+                type: Input
+            }], flagged: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }] } });
+
+class ActionSheetComponent {
+    constructor() {
+        this.cancelButtonText = 'Cancel';
+        this.hideCancel = false;
+        this.disabled = false;
+        this.cancel = new EventEmitter();
+        this.itemSelect = new EventEmitter();
     }
-    onFocusChange() {
-        // This fixes an undesired scroll behaviour occurring on keyboard-tabbing
-        this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
+    onItemSelect(selection) {
+        this.itemSelect.emit(selection);
     }
     onCancel() {
-        const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
-        ionModalElement && ionModalElement.dismiss(false);
-    }
-    onOk() {
-        const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
-        ionModalElement && ionModalElement.dismiss(true);
+        this.cancel.emit();
     }
-}
-/** @nocollapse */ AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AlertComponent, selector: "kirby-alert", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okBtn: "okBtn", okBtnIsDestructive: "okBtnIsDestructive", cancelBtn: "cancelBtn" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    <button\n      kirby-button\n      *ngIf=\"cancelBtn\"\n      attentionLevel=\"3\"\n      class=\"cancel-btn\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelBtn }}\n    </button>\n    <button\n      kirby-button\n      [size]=\"cancelBtn ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [isDestructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn }}\n    </button>\n  </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"], components: [{ type: EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "customIconName", "title", "subtitle"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: ThemeColorDirective, selector: "kirby-avatar[themeColor],\n             kirby-card[themeColor],\n             kirby-icon[themeColor],\n             kirby-progress-circle-ring[themeColor],\n             kirby-modal-footer[themeColor],\n             kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-alert', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    <button\n      kirby-button\n      *ngIf=\"cancelBtn\"\n      attentionLevel=\"3\"\n      class=\"cancel-btn\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelBtn }}\n    </button>\n    <button\n      kirby-button\n      [size]=\"cancelBtn ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [isDestructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn }}\n    </button>\n  </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: WindowRef }]; }, propDecorators: { alertWrapper: [{
-                type: ViewChild,
-                args: ['alertWrapper', { static: true }]
-            }], title: [{
-                type: Input
-            }], message: [{
+}
+/** @nocollapse */ ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ActionSheetComponent, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, 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    [noDecoration]=\"true\"\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)) );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}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}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}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"], components: [{ type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: 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    [noDecoration]=\"true\"\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)) );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}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}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}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"] }]
+        }], propDecorators: { cancelButtonText: [{
                 type: Input
-            }], iconName: [{
+            }], hideCancel: [{
                 type: Input
-            }], iconThemeColor: [{
+            }], disabled: [{
                 type: Input
-            }], okBtn: [{
+            }], header: [{
                 type: Input
-            }], okBtnIsDestructive: [{
+            }], subheader: [{
                 type: Input
-            }], cancelBtn: [{
+            }], items: [{
                 type: Input
+            }], cancel: [{
+                type: Output
+            }], itemSelect: [{
+                type: Output
             }] } });
 
-class AlertHelper {
+class ActionSheetHelper {
     constructor(ionicModalController) {
         this.ionicModalController = ionicModalController;
     }
-    showAlert(config) {
+    showActionSheet(config) {
         return __awaiter(this, void 0, void 0, function* () {
+            const cancel = new EventEmitter();
+            const itemSelect = new EventEmitter();
             const ionModal = yield this.ionicModalController.create({
-                component: AlertComponent,
-                componentProps: this.getComponentProps(config),
-                cssClass: ['kirby-overlay', 'kirby-alert'],
-                mode: 'ios',
-                backdropDismiss: false,
+                component: ActionSheetComponent,
+                cssClass: ['kirby-overlay', 'kirby-action-sheet'],
+                componentProps: Object.assign(Object.assign({}, config), { cancel: cancel, itemSelect: itemSelect }),
+                backdropDismiss: true,
+            });
+            // Remove 'modal-shadow' element as we are no longer able to hide it with CSS in Ionic 6.
+            // We need to remove it so it does not obstruct the backdrop-click to dismiss functionality.
+            ionModal.shadowRoot.querySelector('.modal-shadow').remove();
+            const cancelSubscription = cancel.subscribe(() => ionModal.dismiss());
+            const itemSelectSubscription = itemSelect.subscribe((item) => ionModal.dismiss(item));
+            const onDidDismiss = ionModal.onDidDismiss();
+            onDidDismiss.then((_) => {
+                cancelSubscription.unsubscribe();
+                itemSelectSubscription.unsubscribe();
             });
             yield ionModal.present();
             return {
@@ -1949,28 +1984,10 @@ class AlertHelper {
             };
         });
     }
-    getComponentProps(config) {
-        return Object.assign(Object.assign({}, config), { okBtn: this.getOkBtn(config), cancelBtn: config.cancelBtn, okBtnIsDestructive: this.getOkBtnIsDestructive(config), iconName: config.icon && config.icon.name, iconThemeColor: config.icon && config.icon.themeColor });
-    }
-    getOkBtn(config) {
-        let text;
-        if (config.okBtn) {
-            if (typeof config.okBtn === 'string') {
-                text = config.okBtn;
-            }
-            else {
-                text = config.okBtn.text;
-            }
-        }
-        return text;
-    }
-    getOkBtnIsDestructive(config) {
-        return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
-    }
 }
-/** @nocollapse */ AlertHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ AlertHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper, decorators: [{
+/** @nocollapse */ ActionSheetHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ ActionSheetHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.ModalController }]; } });
 
@@ -2272,9 +2289,9 @@ class ModalController {
             yield this.hideAll();
         }));
     }
-    showModal(config, onClose) {
+    showModal(config, onClose, alertConfig) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.showAndRegisterOverlay(() => this.modalHelper.showModalWindow(config), onClose);
+            yield this.showAndRegisterOverlay(() => this.modalHelper.showModalWindow(config, alertConfig), onClose);
         });
     }
     navigateToModal(path, queryParams) {
@@ -2451,7 +2468,7 @@ class AvatarComponent {
     }
 }
 /** @nocollapse */ AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AvatarComponent, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", shadow: "shadow", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ shadow: shadow, overlay: overlay }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.shadow{box-shadow:0 2px 4px 2px #71717166}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AvatarComponent, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", shadow: "shadow", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ shadow: shadow, overlay: overlay }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.shadow{box-shadow:0 2px 4px 2px #71717166}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ shadow: shadow, overlay: overlay }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.shadow{box-shadow:0 2px 4px 2px #71717166}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
@@ -2636,6 +2653,42 @@ function mergeDeepAll(...objects) {
     return objectsWithoutUndefined.reduce((originalObject, overrideObject) => mergeDeep(originalObject, overrideObject));
 }
 
+/*
+  Utility function to check if a given element
+  has an ancestor with a specific node name.
+
+  Can be given a 'stopNodeName' to limit the search
+  as to not climb all the way up through the DOM tree.
+
+  Returns true when element has the ancestorNodeName
+  or an ancestor has the ancestorNodeName.
+
+  Returns false otherwise.
+*/
+const elementHasAncestor = (element, ancestorNodeName, stopNodeName) => {
+    switch (element === null || element === void 0 ? void 0 : element.nodeName) {
+        case undefined:
+        case stopNodeName === null || stopNodeName === void 0 ? void 0 : stopNodeName.toUpperCase():
+            return false;
+        case ancestorNodeName.toUpperCase():
+            return true;
+        default:
+            return elementHasAncestor(element.parentElement, ancestorNodeName, stopNodeName);
+    }
+};
+
+/*
+  Type guard is needed as of chart.js@3.8.1. The config type has been updated to a union type,
+  and the newly added type 'ChartConfigurationCustomTypesPerDataset' does not contain the 'type' property.
+  Typescript will throw an error, when trying to access a property that doesn't exist on all union types,
+  unless a type guard is used.
+*/
+const chartConfigHasType = (config) => {
+    return 'type' in config;
+};
+
+// re-export helpers from core, to preserve backwards compatability
+
 class AnnotationsDelegate {
     constructor(chartConfigService) {
         this.chartConfigService = chartConfigService;
@@ -2671,32 +2724,6 @@ class AnnotationsDelegate {
     }
 }
 
-/*
-  Utility function to check if a given element
-  has an ancestor with a specific node name.
-
-  Can be given a 'stopNodeName' to limit the search
-  as to not climb all the way up through the DOM tree.
-
-  Returns true when element has the ancestorNodeName
-  or an ancestor has the ancestorNodeName.
-
-  Returns false otherwise.
-*/
-const elementHasAncestor = (element, ancestorNodeName, stopNodeName) => {
-    switch (element === null || element === void 0 ? void 0 : element.nodeName) {
-        case undefined:
-        case stopNodeName === null || stopNodeName === void 0 ? void 0 : stopNodeName.toUpperCase():
-            return false;
-        case ancestorNodeName.toUpperCase():
-            return true;
-        default:
-            return elementHasAncestor(element.parentElement, ancestorNodeName, stopNodeName);
-    }
-};
-
-// re-export helpers from core, to preserve backwards compatability
-
 const { getThemeColorHexString: getThemeColorHexString$2 } = ColorHelper;
 const hoverBackgroundColor = getThemeColorHexString$2('primary');
 const backgroundColor = getThemeColorHexString$2('secondary');
@@ -3410,7 +3437,7 @@ class ChartJSService {
         const annotationPluginOptions = annotations
             ? this.annotationsDelegate.createAnnotationPluginOptionsObject(annotations)
             : {};
-        let mergedOptions = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
+        const mergedOptions = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
         return this.chartConfigService.applyInteractionFunctionsExtensions(mergedOptions);
     }
     getDefaultLabels(datasets) {
@@ -3435,7 +3462,7 @@ class ChartJSService {
         });
     }
     createDatasets(data) {
-        let datasets = isNumberArray(data) ? [{ data }] : data;
+        const datasets = isNumberArray(data) ? [{ data }] : data;
         if (this.highlightedElements)
             this.addHighlightedElementsToDatasets(this.highlightedElements, datasets);
         return datasets;
@@ -3459,7 +3486,9 @@ class ChartJSService {
             annotations,
         });
         this.chart.options = options;
-        this.chart.config.type = this.chartConfigService.chartTypeToChartJSType(chartType);
+        if (chartConfigHasType(this.chart.config)) {
+            this.chart.config.type = this.chartConfigService.chartTypeToChartJSType(chartType);
+        }
     }
     initializeNewChart(canvasElement, config) {
         this.chart = new Chart(canvasElement, config);
@@ -4020,10 +4049,10 @@ class ItemComponent {
     }
 }
 /** @nocollapse */ ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.selected": "this.selected", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"_selectable ? true : null\"\n  [attr.tabindex]=\"_selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:14px;--transition: all 80ms linear 0ms}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top: 8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom: 8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonReorder, selector: "ion-reorder" }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.selected": "this.selected", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"_selectable ? true : null\"\n  [attr.tabindex]=\"_selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:14px;--transition: all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item{--background: whitesmoke}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top: 8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom: 8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonReorder, selector: "ion-reorder" }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"_selectable ? true : null\"\n  [attr.tabindex]=\"_selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:14px;--transition: all 80ms linear 0ms}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top: 8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom: 8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
+            args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"_selectable ? true : null\"\n  [attr.tabindex]=\"_selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:14px;--transition: all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item{--background: whitesmoke}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top: 8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom: 8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                 type: Input
             }], selected: [{
@@ -4300,6 +4329,9 @@ class DropdownComponent {
         this.verticalDirection = VerticalDirection.down;
         this._items = [];
         this._selectedIndex = -1;
+        // _focusedIndex keeps track of which element has focus and will be selected
+        // if it is activated (by pressing ENTER or SPACE key)
+        this._focusedIndex = -1;
         this.itemTextProperty = 'text';
         this.placeholder = 'Please select:';
         this.attentionLevel = '3';
@@ -4314,6 +4346,17 @@ class DropdownComponent {
         this.change = new EventEmitter();
         this._value = null;
         this._role = 'listbox';
+        /* The 'clicked' class is applied through Hostbinding to prevent the dropdown from getting a focus ring on click.
+          There is a bug that causes the dropdown to get a focus ring on click, if it is the first element that is interacted with
+          after the page is loaded. If the user interacts with any other element before, then the dropdown won't get a focus ring.
+          See issue: https://github.com/kirbydesign/designsystem/issues/2477.
+      
+          This solution can potentially be refactored, when popover is not experimental anymore. Then it could be possible
+          to close the dropdown when the popover backdrop is clicked, instead of relying on the blur event, which is utilized
+          by this line below: this.elementRef.nativeElement.focus(). Right now this forces the blur event to be triggered, when
+          clicking outside of the dropdown.
+          */
+        this.clicked = false;
         this.itemClickUnlisten = [];
         this._onChange = () => { };
         this._onTouched = () => { };
@@ -4331,9 +4374,19 @@ class DropdownComponent {
     set selectedIndex(value) {
         if (this._selectedIndex != value) {
             this._selectedIndex = value;
+            this.focusedIndex = this._selectedIndex;
             this._value = this.items[this.selectedIndex] || null;
         }
     }
+    get focusedIndex() {
+        return this._focusedIndex;
+    }
+    set focusedIndex(value) {
+        if (this._focusedIndex !== value) {
+            this._focusedIndex = value;
+            this.scrollItemIntoView(this._focusedIndex);
+        }
+    }
     set popout(direction) {
         this.horizontalDirection = direction || HorizontalDirection.right;
     }
@@ -4392,6 +4445,7 @@ class DropdownComponent {
     }
     onToggle(event) {
         event.stopPropagation();
+        this.clicked = true;
         if (!this.isOpen) {
             this.elementRef.nativeElement.focus();
         }
@@ -4427,8 +4481,14 @@ class DropdownComponent {
         if (this.usePopover)
             return;
         if (!this.intersectionObserverRef) {
+            // Get the design token size of the button. In the button stylesheet a medium button height is utils.size(xl)
+            // and a small button height is utils.size("l")
+            const designTokenSizeHeight = this.size === 'md' ? 'xl' : 'l';
+            // Setting the rootMargin equal to the height of the button
+            // allows the Intersection Observer Callback to be called
+            // even if the dropdown button is intersecting with the viewport
             const options = {
-                rootMargin: '0px',
+                rootMargin: DesignTokenHelper.size(designTokenSizeHeight),
             };
             const callback = (entries) => {
                 // Only apply alignment when opening:
@@ -4489,6 +4549,8 @@ class DropdownComponent {
             this.state = OpenState.opening;
             // ensures that the dropdown is opened in case the IntersectionObserverCallback isn't invoked
             this.showDropdownTimeoutId = setTimeout(() => this.showDropdown(), DropdownComponent.OPEN_DELAY_IN_MS);
+            // Move focus to selected item (if any)
+            this.focusedIndex = this.selectedIndex;
         }
     }
     showDropdown() {
@@ -4557,9 +4619,9 @@ class DropdownComponent {
     selectItem(index) {
         if (index != this.selectedIndex) {
             this.selectedIndex = index;
+            this.focusedIndex = index;
             this.change.emit(this.value);
             this._onChange(this.value);
-            this.scrollItemIntoView(index);
         }
     }
     _selectItemByValue(value) {
@@ -4579,17 +4641,7 @@ class DropdownComponent {
             const selectedKirbyItem = kirbyItems.toArray()[index];
             if (selectedKirbyItem && selectedKirbyItem.nativeElement) {
                 const itemElement = selectedKirbyItem.nativeElement;
-                const scrollContainer = this.cardElement.nativeElement;
-                const itemTop = itemElement.offsetTop;
-                const itemBottom = itemElement.offsetTop + itemElement.offsetHeight;
-                const containerVisibleTop = scrollContainer.scrollTop;
-                const containerVisibleBottom = scrollContainer.clientHeight + scrollContainer.scrollTop;
-                if (itemTop < containerVisibleTop) {
-                    scrollContainer.scrollTop = itemTop;
-                }
-                else if (itemBottom > containerVisibleBottom) {
-                    scrollContainer.scrollTop = itemBottom - scrollContainer.clientHeight;
-                }
+                itemElement.scrollIntoView({ block: 'nearest' });
             }
         }
     }
@@ -4598,6 +4650,12 @@ class DropdownComponent {
             event.preventDefault();
             this.close();
         }
+        if (this.clicked) {
+            // Remove the 'clicked' class (Hostbinding) if the user has previously opened the dropdown by clicking,
+            // since the class prevents the focus ring from showing,
+            // which is expected to happen, when using the tab key
+            this.clicked = false;
+        }
     }
     _onMouseDown(event) {
         if (this.disabled) {
@@ -4632,37 +4690,54 @@ class DropdownComponent {
         this.close();
         this._onTouched();
     }
-    _onSpace(event) {
+    _onEnterOrSpace(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (!this.isOpen) {
-            this.open();
+        if (this.isOpen) {
+            this.selectItem(this.focusedIndex);
         }
-    }
-    _onEnter(event) {
-        event.preventDefault();
-        event.stopPropagation();
         this.toggle();
     }
     _onArrowKeys(event) {
         if (this.disabled)
-            return;
+            return false;
         // Mirror default HTML5 select behaviour - prevent left/right arrows when open:
         if (this.isOpen && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
-            return;
+            return false;
+        }
+        if (!this.isOpen) {
+            // Avoid page scroll
+            event.preventDefault();
+            this.open();
+            // If no selected item then focus first or last item
+            if (this.selectedIndex < 0) {
+                switch (event.key) {
+                    case 'ArrowUp':
+                        this.focusedIndex = this.items.length - 1;
+                        break;
+                    case 'ArrowDown':
+                        this.focusedIndex = 0;
+                        break;
+                    default:
+                        break;
+                }
+            }
+            return false;
         }
-        const newIndex = this.keyboardHandlerService.handle(event, this.items, this.selectedIndex);
-        if (newIndex > -1) {
-            this.selectItem(newIndex);
+        const newFocusedIndex = this.keyboardHandlerService.handle(event, this.items, this.focusedIndex);
+        if (newFocusedIndex > -1) {
+            this.focusedIndex = newFocusedIndex;
         }
         return false;
     }
     _onHomeEndKeys(event) {
         if (this.disabled)
             return;
-        const newIndex = this.keyboardHandlerService.handle(event, this.items, this.selectedIndex);
-        if (newIndex > -1) {
-            this.selectItem(newIndex);
+        if (!this.isOpen)
+            return;
+        const newFocusedIndex = this.keyboardHandlerService.handle(event, this.items, this.focusedIndex);
+        if (newFocusedIndex > -1) {
+            this.focusedIndex = newFocusedIndex;
         }
         return false;
     }
@@ -4681,13 +4756,13 @@ class DropdownComponent {
 }
 DropdownComponent.OPEN_DELAY_IN_MS = 100;
 /** @nocollapse */ DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: DropdownComponent, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnter($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "keydown.space": "_onSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "class.with-popover": "this.usePopover", "attr.tabindex": "this._tabindex", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "attr.role": "this._role", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp" } }, providers: [
+/** @nocollapse */ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: DropdownComponent, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", focusedIndex: "focusedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "keydown.space": "_onEnterOrSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "class.with-popover": "this.usePopover", "attr.tabindex": "this._tabindex", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "attr.role": "this._role", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp", "class.clicked": "this.clicked" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => DropdownComponent)),
             multi: true,
         },
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick($event)\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: { $implicit: item, selected: i === selectedIndex, index: i }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n  <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}: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 #1c1c1c4d,0 0 5px #1c1c1c14;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 #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick($event)\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}: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 #1c1c1c4d,0 0 5px #1c1c1c14;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 #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-dropdown', providers: [
@@ -4696,11 +4771,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                             useExisting: forwardRef((() => DropdownComponent)),
                             multi: true,
                         },
-                    ], template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick($event)\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: { $implicit: item, selected: i === selectedIndex, index: i }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n  <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}: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 #1c1c1c4d,0 0 5px #1c1c1c14;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 #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
+                    ], template: "<button\n  kirby-button\n  [size]=\"size\"\n  [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n  tabindex=\"-1\"\n  (click)=\"onToggle($event)\"\n  (mousedown)=\"onButtonMouseEvent($event)\"\n  [disabled]=\"disabled\"\n  type=\"button\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n  <kirby-popover\n    [target]=\"buttonElement\"\n    [popout]=\"popout\"\n    (click)=\"_onPopoverClick($event)\"\n    (willHide)=\"_onPopoverWillHide()\"\n  >\n    <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n  </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n  <kirby-card>\n    <ng-container *ngFor=\"let item of items; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i\n          }\n        \"\n      ></ng-container>\n    </ng-container>\n  </kirby-card>\n</ng-template>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n  >\n    <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n    <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n    <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n  </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}: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 #1c1c1c4d,0 0 5px #1c1c1c14;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 #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }]; }, propDecorators: { items: [{
                 type: Input
             }], selectedIndex: [{
                 type: Input
+            }], focusedIndex: [{
+                type: Input
             }], itemTextProperty: [{
                 type: Input
             }], placeholder: [{
@@ -4756,6 +4833,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], _popoutUp: [{
                 type: HostBinding,
                 args: ['class.popout-up']
+            }], clicked: [{
+                type: HostBinding,
+                args: ['class.clicked']
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [ListItemTemplateDirective, { static: true, read: TemplateRef }]
@@ -4798,12 +4878,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], _onBlur: [{
                 type: HostListener,
                 args: ['blur', ['$event']]
-            }], _onSpace: [{
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }], _onEnter: [{
+            }], _onEnterOrSpace: [{
                 type: HostListener,
                 args: ['keydown.enter', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['keydown.space', ['$event']]
             }], _onArrowKeys: [{
                 type: HostListener,
                 args: ['keydown.arrowup', ['$event']]
@@ -5189,7 +5269,7 @@ class CalendarComponent {
     }
 }
 /** @nocollapse */ CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarHelper }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CalendarComponent, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span\n      ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  >\n  </kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){visibility:hidden;pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CalendarComponent, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span\n      ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  >\n  </kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){visibility:hidden;pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-calendar', providers: [CalendarHelper], template: "<div class=\"header\">\n  <div class=\"month-navigator\">\n    <button\n      [disabled]=\"!_canNavigateBack\"\n      (click)=\"_changeMonth(-1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-back\"></kirby-icon>\n    </button>\n\n    <div class=\"month-and-year\">\n      <span class=\"month\">{{ activeMonthName }}</span\n      ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n    </div>\n\n    <button\n      [disabled]=\"!_canNavigateForward\"\n      (click)=\"_changeMonth(1)\"\n      kirby-button\n      [noDecoration]=\"true\"\n      class=\"no-margin\"\n    >\n      <kirby-icon name=\"arrow-more\"></kirby-icon>\n    </button>\n  </div>\n  <kirby-dropdown\n    *ngIf=\"_hasYearNavigator\"\n    [usePopover]=\"usePopover\"\n    [selectedIndex]=\"navigatedYear\"\n    [items]=\"navigableYears\"\n    popout=\"left\"\n    (change)=\"_changeYear($event)\"\n  >\n  </kirby-dropdown>\n</div>\n\n<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n    </tr>\n  </thead>\n\n  <tbody>\n    <tr *ngFor=\"let week of _month\">\n      <td *ngFor=\"let day of week\">\n        <div\n          (click)=\"_onDateSelected(day)\"\n          class=\"{{ day.cssClasses }} contain-state-layer\"\n          [class.selected]=\"day.isSelected\"\n        >\n          <span class=\"state-layer\" aria-hidden=\"true\"></span>\n          <span class=\"content-layer\">{{ day.date }}</span>\n        </div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){visibility:hidden;pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
@@ -5255,7 +5335,7 @@ class ItemSlidingComponent {
     }
 }
 /** @nocollapse */ ItemSlidingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemSlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ItemSlidingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemSlidingComponent, selector: "kirby-item-sliding", inputs: { swipeActions: "swipeActions", side: "side" }, ngImport: i0, template: "<ion-item-sliding>\n  <ng-content></ng-content>\n\n  <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n    <ng-container *ngFor=\"let swipeAction of swipeActions\">\n      <ion-item-option\n        *ngIf=\"!swipeAction.isDisabled\"\n        [ngClass]=\"swipeAction.type\"\n        (click)=\"swipeAction.onSelected()\"\n      >\n        <kirby-icon\n          *ngIf=\"swipeAction.icon !== undefined\"\n          [name]=\"swipeAction.icon\"\n          slot=\"top\"\n        ></kirby-icon>\n        <ion-label>{{ swipeAction.title }}</ion-label>\n      </ion-item-option>\n    </ng-container>\n  </ion-item-options>\n</ion-item-sliding>\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}ion-item-option{min-width:92px}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+/** @nocollapse */ ItemSlidingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemSlidingComponent, selector: "kirby-item-sliding", inputs: { swipeActions: "swipeActions", side: "side" }, ngImport: i0, template: "<ion-item-sliding>\n  <ng-content></ng-content>\n\n  <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n    <ng-container *ngFor=\"let swipeAction of swipeActions\">\n      <ion-item-option\n        *ngIf=\"!swipeAction.isDisabled\"\n        [ngClass]=\"swipeAction.type\"\n        (click)=\"swipeAction.onSelected()\"\n      >\n        <kirby-icon\n          *ngIf=\"swipeAction.icon !== undefined\"\n          [name]=\"swipeAction.icon\"\n          slot=\"top\"\n        ></kirby-icon>\n        <ion-label>{{ swipeAction.title }}</ion-label>\n      </ion-item-option>\n    </ng-container>\n  </ion-item-options>\n</ion-item-sliding>\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}ion-item-option{min-width:92px}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemSlidingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-item-sliding', template: "<ion-item-sliding>\n  <ng-content></ng-content>\n\n  <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n    <ng-container *ngFor=\"let swipeAction of swipeActions\">\n      <ion-item-option\n        *ngIf=\"!swipeAction.isDisabled\"\n        [ngClass]=\"swipeAction.type\"\n        (click)=\"swipeAction.onSelected()\"\n      >\n        <kirby-icon\n          *ngIf=\"swipeAction.icon !== undefined\"\n          [name]=\"swipeAction.icon\"\n          slot=\"top\"\n        ></kirby-icon>\n        <ion-label>{{ swipeAction.title }}</ion-label>\n      </ion-item-option>\n    </ng-container>\n  </ion-item-options>\n</ion-item-sliding>\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}ion-item-option{min-width:92px}\n"] }]
@@ -5309,7 +5389,7 @@ class CheckboxComponent {
     }
 }
 /** @nocollapse */ CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CheckboxComponent, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <ion-checkbox\n    mode=\"md\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (ionChange)=\"onChecked($event.detail.checked)\"\n    [attr.aria-labelledby]=\"text ? _labelId : null\"\n  ></ion-checkbox>\n  <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #0ee270;--border-color-checked: #0ee270}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-checked: #0dcd65;--border-color-checked: #0dcd65}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{opacity:1;--checkmark-color: var(--kirby-semi-dark);--background: var(--kirby-semi-light);--background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px;margin-left:16px;margin-right:12px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label .wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.checkbox-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.checkbox-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.checkbox-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-checkbox{position:static;flex-shrink:0;flex-grow:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], components: [{ type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }], directives: [{ type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CheckboxComponent, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, ngImport: i0, template: "<div class=\"wrapper\">\n  <ion-checkbox\n    mode=\"md\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (ionChange)=\"onChecked($event.detail.checked)\"\n    [attr.aria-labelledby]=\"text ? _labelId : null\"\n  ></ion-checkbox>\n  <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #0ee270;--border-color-checked: #0ee270}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-checked: #0dcd65;--border-color-checked: #0dcd65}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{opacity:1;--checkmark-color: var(--kirby-semi-dark);--background: var(--kirby-semi-light);--background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px;margin-left:16px;margin-right:12px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label .wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.checkbox-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.checkbox-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.checkbox-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-checkbox{position:static;flex-shrink:0;flex-grow:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], components: [{ type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }], directives: [{ type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\">\n  <ion-checkbox\n    mode=\"md\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (ionChange)=\"onChecked($event.detail.checked)\"\n    [attr.aria-labelledby]=\"text ? _labelId : null\"\n  ></ion-checkbox>\n  <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #0ee270;--border-color-checked: #0ee270}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-checked: #0dcd65;--border-color-checked: #0dcd65}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{opacity:1;--checkmark-color: var(--kirby-semi-dark);--background: var(--kirby-semi-light);--background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px;margin-left:16px;margin-right:12px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label .wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.checkbox-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.checkbox-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.checkbox-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-checkbox{position:static;flex-shrink:0;flex-grow:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
@@ -5369,6 +5449,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 args: ['class.is-selected']
             }] } });
 
+class TableComponent {
+    constructor() {
+        this.fixedLayout = false;
+    }
+}
+/** @nocollapse */ TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TableComponent, selector: "table[kirby-table]", inputs: { fixedLayout: "fixedLayout" }, host: { properties: { "class.kirby-table-layout-fixed": "this.fixedLayout" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["table[kirby-table]{width:100%;border-collapse:collapse}table[kirby-table].kirby-table-layout-fixed{table-layout:fixed}tr:not(:last-child){border-bottom:1px solid var(--kirby-medium)}@media (hover: hover){tr.kirby-selectable-row:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-light)}}thead tr{border-bottom:1px solid var(--kirby-medium)}th{text-align:left;font-weight:400;font-size:12px;color:var(--kirby-text-color-semi-dark);padding:8px 16px}td{padding:16px;font-weight:400;font-size:14px;color:var(--kirby-text-color-black);vertical-align:middle}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'table[kirby-table]', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["table[kirby-table]{width:100%;border-collapse:collapse}table[kirby-table].kirby-table-layout-fixed{table-layout:fixed}tr:not(:last-child){border-bottom:1px solid var(--kirby-medium)}@media (hover: hover){tr.kirby-selectable-row:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-light)}}thead tr{border-bottom:1px solid var(--kirby-medium)}th{text-align:left;font-weight:400;font-size:12px;color:var(--kirby-text-color-semi-dark);padding:8px 16px}td{padding:16px;font-weight:400;font-size:14px;color:var(--kirby-text-color-black);vertical-align:middle}\n"] }]
+        }], propDecorators: { fixedLayout: [{
+                type: HostBinding,
+                args: ['class.kirby-table-layout-fixed']
+            }, {
+                type: Input
+            }] } });
+
+class TableRowComponent {
+    constructor() {
+        this.selectable = false;
+    }
+}
+/** @nocollapse */ TableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TableRowComponent, selector: "tr[kirby-tr]", inputs: { selectable: "selectable" }, host: { properties: { "class.kirby-selectable-row": "this.selectable" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TableRowComponent, decorators: [{
+            type: Component,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: 'tr[kirby-tr]',
+                    template: ` <ng-content></ng-content> `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { selectable: [{
+                type: HostBinding,
+                args: ['class.kirby-selectable-row']
+            }, {
+                type: Input
+            }] } });
+
+class DataTableModule {
+}
+/** @nocollapse */ DataTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ DataTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataTableModule, declarations: [TableComponent, TableRowComponent], imports: [CommonModule], exports: [TableComponent, TableRowComponent] });
+/** @nocollapse */ DataTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataTableModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TableComponent, TableRowComponent],
+                    imports: [CommonModule],
+                    exports: [TableComponent, TableRowComponent],
+                }]
+        }] });
+
 class DividerComponent {
 }
 /** @nocollapse */ DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -5395,7 +5529,7 @@ class RadioComponent {
     }
 }
 /** @nocollapse */ RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RadioComponent, selector: "kirby-radio", inputs: { value: "value", text: "text", size: "size", disabled: "disabled" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "attr.disabled": "this._isDisabled" } }, viewQueries: [{ propertyName: "ionRadioElement", first: true, predicate: IonRadio, descendants: true, read: ElementRef, static: true }], ngImport: i0, 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", 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 :host-context(.radio-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.radio-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.radio-md) .wrapper,:host.has-label.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)}@media (hover: hover) and (pointer: fine){ion-radio:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color;background-color:var(--kirby-white)}@media (hover: hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color: transparent;--color-checked: #16f17b}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(mark){width:60%;height:60%}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)}ion-radio.radio-checked{--border-width: 0px}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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}\n"], components: [{ type: i1.IonRadio, selector: "ion-radio", inputs: ["color", "disabled", "mode", "name", "value"] }], directives: [{ type: i1.RadioValueAccessor, selector: "ion-radio" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RadioComponent, selector: "kirby-radio", inputs: { value: "value", text: "text", size: "size", disabled: "disabled" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "attr.disabled": "this._isDisabled" } }, viewQueries: [{ propertyName: "ionRadioElement", first: true, predicate: IonRadio, descendants: true, read: ElementRef, static: true }], ngImport: i0, 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", 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 :host-context(.radio-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.radio-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.radio-md) .wrapper,:host.has-label.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)}@media (hover: hover) and (pointer: fine){ion-radio:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color;background-color:var(--kirby-white)}@media (hover: hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color: transparent;--color-checked: #16f17b}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(mark){width:60%;height:60%}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)}ion-radio.radio-checked{--border-width: 0px}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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}\n"], components: [{ type: i1.IonRadio, selector: "ion-radio", inputs: ["color", "disabled", "mode", "name", "value"] }], directives: [{ type: i1.RadioValueAccessor, selector: "ion-radio" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-radio', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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 :host-context(.radio-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.radio-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.radio-md) .wrapper,:host.has-label.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)}@media (hover: hover) and (pointer: fine){ion-radio:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color;background-color:var(--kirby-white)}@media (hover: hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color: transparent;--color-checked: #16f17b}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(mark){width:60%;height:60%}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)}ion-radio.radio-checked{--border-width: 0px}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}: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}\n"] }]
@@ -5621,7 +5755,7 @@ class RadioGroupComponent {
             useExisting: RadioGroupComponent,
             multi: true,
         },
-    ], queries: [{ propertyName: "_customItemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedRadioButtons", predicate: RadioComponent, descendants: true }], viewQueries: [{ propertyName: "radioButtons", predicate: RadioComponent, descendants: true }], ngImport: i0, template: "<ion-radio-group *ngIf=\"_hasItems\" [value]=\"value\" (ionChange)=\"_onChange($event.detail.value)\">\n  <ng-container *ngIf=\"!items || !items.length; else itemsTemplate\">\n    <ng-content></ng-content>\n  </ng-container>\n</ion-radio-group>\n\n<ng-template #itemsTemplate>\n  <ng-container *ngFor=\"let item of items; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        _customItemTemplate || defaultItemTemplate;\n        context: { $implicit: item, selected: i === selectedIndex, index: i }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item>\n  <kirby-radio\n    [value]=\"item\"\n    [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n    [text]=\"_getTextFromItem(item)\"\n  ></kirby-radio>\n</ng-template>\n", styles: ["ion-radio-group{display:inherit;flex-wrap:inherit}\n"], components: [{ type: i1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { type: RadioComponent, selector: "kirby-radio", inputs: ["value", "text", "size", "disabled"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "_customItemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedRadioButtons", predicate: RadioComponent, descendants: true }], viewQueries: [{ propertyName: "radioButtons", predicate: RadioComponent, descendants: true }], ngImport: i0, template: "<ion-radio-group *ngIf=\"_hasItems\" [value]=\"value\" (ionChange)=\"_onChange($event.detail.value)\">\n  <ng-container *ngIf=\"!items || !items.length; else itemsTemplate\">\n    <ng-content></ng-content>\n  </ng-container>\n</ion-radio-group>\n\n<ng-template #itemsTemplate>\n  <ng-container *ngFor=\"let item of items; let i = index\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        _customItemTemplate || defaultItemTemplate;\n        context: { $implicit: item, selected: i === selectedIndex, index: i }\n      \"\n    ></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item>\n  <kirby-radio\n    [value]=\"item\"\n    [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n    [text]=\"_getTextFromItem(item)\"\n  ></kirby-radio>\n</ng-template>\n", styles: ["ion-radio-group{display:inherit;flex-wrap:inherit}\n"], components: [{ type: i1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { type: RadioComponent, selector: "kirby-radio", inputs: ["value", "text", "size", "disabled"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RadioGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-radio-group', styles: ['ion-radio-group { display: inherit; flex-wrap: inherit}'], providers: [
@@ -5664,6 +5798,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 args: ['ionBlur']
             }] } });
 
+class AffixDirective {
+    constructor(el) {
+        this.el = el;
+    }
+}
+/** @nocollapse */ AffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ AffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: AffixDirective, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AffixDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line
+                    selector: '[kirby-affix]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { type: [{
+                type: Input,
+                args: ['kirby-affix']
+            }] } });
+
 class FormFieldMessageComponent {
     constructor() {
         this.position = 'left';
@@ -5825,7 +5977,7 @@ class TextareaComponent {
     }
 }
 /** @nocollapse */ TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TextareaComponent, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, 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);padding:calc(1em - 1px)}: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:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline: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{transition:all 80ms linear 0ms;transition-property:background-color;font-family:var(--kirby-font-family);resize:none}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 721px){:host{resize:vertical}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TextareaComponent, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, 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);padding:calc(1em - 1px)}: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:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline: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{transition:all 80ms linear 0ms;transition-property:background-color;font-family:var(--kirby-font-family);resize:none}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 721px){:host{resize:vertical}}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, 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);padding:calc(1em - 1px)}: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:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline: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{transition:all 80ms linear 0ms;transition-property:background-color;font-family:var(--kirby-font-family);resize:none}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 721px){:host{resize:vertical}}\n"] }]
@@ -5868,10 +6020,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }] } });
 
 class FormFieldComponent {
-    constructor(elementRef, platform, renderer, windowRef) {
+    constructor(elementRef, platform, renderer, windowRef, resizeObserverService) {
         this.platform = platform;
         this.renderer = renderer;
         this.windowRef = windowRef;
+        this.resizeObserverService = resizeObserverService;
         this.isRegistered = false;
         this._labelId = UniqueIdGenerator.scopedTo('kirby-form-field-label').next();
         this.element = elementRef.nativeElement;
@@ -5915,6 +6068,19 @@ class FormFieldComponent {
         if (this.label && this.radioGroupElement) {
             this.renderer.setAttribute(this.radioGroupElement.nativeElement, 'aria-labelledby', this._labelId);
         }
+        // Measure the width of all slotted affix elements,
+        // and apply their width + standard padding to the input elements
+        // padding, so the start/end of the input is correctly indented.
+        if (this.input) {
+            this.affixElements.forEach((affix) => {
+                this.resizeObserverService.observe(affix.el, (entry) => {
+                    const padding = affix.type === 'prefix' ? 'padding-left' : 'padding-right';
+                    const affixWidth = entry.contentRect.width;
+                    const existingPadding = parseInt(DesignTokenHelper.size('s'));
+                    this.renderer.setStyle(this.input.nativeElement, `${padding}`, `${affixWidth + existingPadding}px`);
+                });
+            });
+        }
     }
     ngAfterContentChecked() {
         if (!this.inputElement) {
@@ -5938,17 +6104,23 @@ class FormFieldComponent {
         this.windowRef.nativeWindow.document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
             detail: this.element,
         }));
+        this.affixElements.forEach((affix) => {
+            this.resizeObserverService.unobserve(affix.el);
+        });
     }
 }
-/** @nocollapse */ FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: PlatformService }, { token: i0.Renderer2 }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <ng-content select=\"input[kirby-input]\"></ng-content>\n  <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n  <ng-content select=\"kirby-radio-group\"></ng-content>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}\n"], components: [{ type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: PlatformService }, { token: i0.Renderer2 }, { token: WindowRef }, { token: ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}\n"], components: [{ type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <ng-content select=\"input[kirby-input]\"></ng-content>\n  <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n  <ng-content select=\"kirby-radio-group\"></ng-content>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PlatformService }, { type: i0.Renderer2 }, { type: WindowRef }]; }, propDecorators: { label: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PlatformService }, { type: i0.Renderer2 }, { type: WindowRef }, { type: ResizeObserverService }]; }, propDecorators: { label: [{
                 type: Input
             }], message: [{
                 type: Input
+            }], affixElements: [{
+                type: ContentChildren,
+                args: [AffixDirective]
             }], counter: [{
                 type: ContentChild,
                 args: [InputCounterComponent, { static: false }]
@@ -6166,9 +6338,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }] } });
 
 class FabSheetComponent {
-    constructor(renderer, changeDetectorRef, document) {
-        this.renderer = renderer;
+    constructor(changeDetectorRef, renderer, document) {
         this.changeDetectorRef = changeDetectorRef;
+        this.renderer = renderer;
         this.document = document;
         this.disabled = false;
         this.horizontalAlignment = 'right';
@@ -6182,38 +6354,42 @@ class FabSheetComponent {
         return this._isBackdropVisible;
     }
     ngAfterContentInit() {
-        if (this.actionSheet) {
+        if (!!this.actionSheet) {
             this.actionSheet.hideCancel = true;
         }
     }
-    hideActions(fab) {
-        fab.close();
-        this._isFabSheetOpen = false;
-        this._isBackdropVisible = false;
-        this.renderer.removeClass(this.document.body, 'fab-sheet-active');
+    hideActions() {
+        this.ionFab.close().then(() => this.fabSheetStateChanged(false));
+    }
+    onFabButtonClick() {
+        setTimeout(() => {
+            this.fabSheetStateChanged(this.ionFab.activated);
+        });
+    }
+    onFabListClick() {
+        this.ionFab.close().then(() => {
+            this.fabSheetStateChanged(false);
+        });
     }
-    onFabClick(fab) {
-        this._isFabSheetOpen = fab.activated;
-        if (this._isFabSheetOpen) {
+    fabSheetStateChanged(isOpen) {
+        this._isFabSheetOpen = isOpen;
+        if (this.isFabSheetOpen) {
             this.renderer.addClass(this.document.body, 'fab-sheet-active');
         }
         else {
             this.renderer.removeClass(this.document.body, 'fab-sheet-active');
         }
-        // Postpone backdrop visibility update to allow for animation of opacity
-        setTimeout(() => {
-            this._isBackdropVisible = this.isFabSheetOpen;
-            this.changeDetectorRef.markForCheck();
-        });
+        this._isBackdropVisible = !!this.actionSheet && isOpen;
+        this.changeDetectorRef.detectChanges();
     }
 }
-/** @nocollapse */ FabSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ FabSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FabSheetComponent, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen", "class.backdrop-visible": "this.isBackdropVisible" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-backdrop\n  *ngIf=\"actionSheet && isFabSheetOpen\"\n  (ionBackdropTap)=\"hideActions(fab)\"\n  (click)=\"hideActions(fab)\"\n></ion-backdrop>\n<ion-fab #fab (click)=\"disabled || onFabClick(fab)\">\n  <ion-fab-button [disabled]=\"disabled\" [attr.disabled]=\"disabled ? true : null\" tabindex=\"-1\">\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  <ion-fab-list *ngIf=\"actionSheet\" side=\"top\" class=\"{{ horizontalAlignment }}\">\n    <ng-content select=\"kirby-action-sheet\"></ng-content>\n  </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{opacity:0;transition:opacity .75s;position:fixed;z-index:999}:host(.backdrop-visible) ion-backdrop{opacity:.4}@media (min-width: 721px){:host(.backdrop-visible) ion-backdrop{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { type: i1.IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ FabSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ FabSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FabSheetComponent, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isBackdropVisible\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  <ion-fab-list\n    *ngIf=\"actionSheet\"\n    side=\"top\"\n    class=\"{{ horizontalAlignment }}\"\n    (click)=\"onFabListClick()\"\n  >\n    <ng-content select=\"kirby-action-sheet\"></ng-content>\n  </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 721px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { type: i1.IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  *ngIf=\"actionSheet && isFabSheetOpen\"\n  (ionBackdropTap)=\"hideActions(fab)\"\n  (click)=\"hideActions(fab)\"\n></ion-backdrop>\n<ion-fab #fab (click)=\"disabled || onFabClick(fab)\">\n  <ion-fab-button [disabled]=\"disabled\" [attr.disabled]=\"disabled ? true : null\" tabindex=\"-1\">\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  <ion-fab-list *ngIf=\"actionSheet\" side=\"top\" class=\"{{ horizontalAlignment }}\">\n    <ng-content select=\"kirby-action-sheet\"></ng-content>\n  </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{opacity:0;transition:opacity .75s;position:fixed;z-index:999}:host(.backdrop-visible) ion-backdrop{opacity:.4}@media (min-width: 721px){:host(.backdrop-visible) ion-backdrop{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
+            args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n  [class.backdrop-visible]=\"isBackdropVisible\"\n  (ionBackdropTap)=\"hideActions()\"\n  (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n  <ion-fab-button\n    (click)=\"onFabButtonClick()\"\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n  >\n    <ng-content select=\"kirby-icon\"></ng-content>\n  </ion-fab-button>\n  <ion-fab-list\n    *ngIf=\"actionSheet\"\n    side=\"top\"\n    class=\"{{ horizontalAlignment }}\"\n    (click)=\"onFabListClick()\"\n  >\n    <ng-content select=\"kirby-action-sheet\"></ng-content>\n  </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 721px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+        return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
                     }] }];
@@ -6224,15 +6400,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], isFabSheetOpen: [{
                 type: HostBinding,
                 args: ['class.is-open']
-            }], isBackdropVisible: [{
-                type: HostBinding,
-                args: ['class.backdrop-visible']
             }], actionSheet: [{
                 type: ContentChild,
                 args: [ActionSheetComponent, { static: false }]
             }], ionFabButton: [{
                 type: ViewChild,
                 args: [IonFabButton, { static: true, read: ElementRef }]
+            }], ionFab: [{
+                type: ViewChild,
+                args: [IonFab, { static: true }]
             }] } });
 
 class FlagComponent {
@@ -6367,7 +6543,7 @@ class GridComponent {
     }
 }
 /** @nocollapse */ GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: GridComponent, deps: [{ token: BreakpointHelperService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: GridComponent, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n  <ng-template\n    [kirbyLoadComponent]=\"card.configuration\"\n    [cssClass]=\"'grid-item--col-' + card.colSpan\"\n  ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ComponentLoaderDirective, selector: "[kirbyLoadComponent]", inputs: ["kirbyLoadComponent", "cssClass"] }] });
+/** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: GridComponent, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n  <ng-template\n    [kirbyLoadComponent]=\"card.configuration\"\n    [cssClass]=\"'grid-item--col-' + card.colSpan\"\n  ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ComponentLoaderDirective, selector: "[kirbyLoadComponent]", inputs: ["kirbyLoadComponent", "cssClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n  <ng-template\n    [kirbyLoadComponent]=\"card.configuration\"\n    [cssClass]=\"'grid-item--col-' + card.colSpan\"\n  ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
@@ -6511,7 +6687,7 @@ class LoadingOverlayComponent {
     }
 }
 /** @nocollapse */ LoadingOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ LoadingOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: LoadingOverlayComponent, selector: "kirby-loading-overlay", inputs: { isLoading: "isLoading", showBackdrop: "showBackdrop" }, ngImport: i0, template: "<div class=\"overlay-wrapper\">\n  <div *ngIf=\"isLoading\" [class.backdrop]=\"showBackdrop\" class=\"spinner-wrapper\">\n    <kirby-spinner class=\"spinner\"></kirby-spinner>\n  </div>\n  <div class=\"content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;min-height:32px}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:1001;display:flex;background:transparent;justify-content:center;align-items:center;justify-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper .spinner{width:32px;height:32px}\n"], components: [{ type: SpinnerComponent, selector: "kirby-spinner" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ LoadingOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: LoadingOverlayComponent, selector: "kirby-loading-overlay", inputs: { isLoading: "isLoading", showBackdrop: "showBackdrop" }, ngImport: i0, template: "<div class=\"overlay-wrapper\">\n  <div *ngIf=\"isLoading\" [class.backdrop]=\"showBackdrop\" class=\"spinner-wrapper\">\n    <kirby-spinner class=\"spinner\"></kirby-spinner>\n  </div>\n  <div class=\"content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;min-height:32px}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:1001;display:flex;background:transparent;justify-content:center;align-items:center;justify-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper .spinner{width:32px;height:32px}\n"], components: [{ type: SpinnerComponent, selector: "kirby-spinner" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-wrapper\">\n  <div *ngIf=\"isLoading\" [class.backdrop]=\"showBackdrop\" class=\"spinner-wrapper\">\n    <kirby-spinner class=\"spinner\"></kirby-spinner>\n  </div>\n  <div class=\"content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block;min-height:32px}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:1001;display:flex;background:transparent;justify-content:center;align-items:center;justify-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper .spinner{width:32px;height:32px}\n"] }]
@@ -6831,7 +7007,7 @@ class ListItemComponent {
     }
 }
 /** @nocollapse */ ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListItemComponent, deps: [{ token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, 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 #1c1c1c4d,0 0 5px #1c1c1c14;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:translate(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%}.no-more-items,.loading{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,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) 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.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{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>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+/** @nocollapse */ ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, 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 #1c1c1c4d,0 0 5px #1c1c1c14;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:translate(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%}.no-more-items,.loading{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,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) 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.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{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>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: 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 #1c1c1c4d,0 0 5px #1c1c1c14;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:translate(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%}.no-more-items,.loading{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,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) 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.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{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>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"] }]
@@ -6973,7 +7149,7 @@ class ListComponent {
     }
 }
 /** @nocollapse */ ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, deps: [{ token: ListHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "kirbyItems", predicate: ItemComponent }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, 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 || _isStandAloneEnabled ? 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\n    *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n    [ngClass]=\"standAloneClass()\"\n  >\n    <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n      <ng-container\n        *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n      ></ng-container>\n    </ion-item-divider>\n\n    <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n      <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n        <ng-container\n          *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-template #groupedFlatList>\n      <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n        <ng-container\n          *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n        ></ng-container>\n      </div>\n    </ng-template>\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", 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 #1c1c1c4d,0 0 5px #1c1c1c14;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:translate(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%}.no-more-items,.loading{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,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) 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.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{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>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], components: [{ type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonItemGroup, selector: "ion-item-group" }, { type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }], directives: [{ type: InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+/** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "kirbyItems", predicate: ItemComponent }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, 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 || _isStandAloneEnabled ? 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\n    *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n    [ngClass]=\"standAloneClass()\"\n  >\n    <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n      <ng-container\n        *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n      ></ng-container>\n    </ion-item-divider>\n\n    <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n      <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n        <ng-container\n          *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-template #groupedFlatList>\n      <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n        <ng-container\n          *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n        ></ng-container>\n      </div>\n    </ng-template>\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", 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 #1c1c1c4d,0 0 5px #1c1c1c14;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:translate(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%}.no-more-items,.loading{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,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) 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.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{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>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], components: [{ type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonItemGroup, selector: "ion-item-group" }, { type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }], directives: [{ type: InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-list', providers: [ListHelper], 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 || _isStandAloneEnabled ? 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\n    *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n    [ngClass]=\"standAloneClass()\"\n  >\n    <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n      <ng-container\n        *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n      ></ng-container>\n    </ion-item-divider>\n\n    <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n      <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n        <ng-container\n          *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n        ></ng-container>\n      </div>\n    </ng-container>\n\n    <ng-template #groupedFlatList>\n      <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n        <ng-container\n          *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n        ></ng-container>\n      </div>\n    </ng-template>\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", 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 #1c1c1c4d,0 0 5px #1c1c1c14;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:translate(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%}.no-more-items,.loading{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,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) 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.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{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>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"] }]
@@ -7424,6 +7600,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input,
                 args: ['kirbyPageContent']
             }] } });
+class PageStickyContentDirective {
+}
+/** @nocollapse */ PageStickyContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageStickyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ PageStickyContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: PageStickyContentDirective, selector: "[kirbyPageStickyContent]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageStickyContentDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kirbyPageStickyContent]',
+                }]
+        }] });
 class PageProgressComponent extends ModalElementComponent {
     constructor(modalWrapper, modalElementsAdvertiser, elementRef) {
         super(ModalElementType.PAGE_PROGRESS, elementRef, modalElementsAdvertiser);
@@ -7562,6 +7748,7 @@ class PageComponent {
         this.initializeTitle();
         this.initializeActions();
         this.initializeContent();
+        this.initializeStickyContent();
         this.changeDetectorRef.detectChanges();
     }
     ngOnDestroy() {
@@ -7652,6 +7839,9 @@ class PageComponent {
             }
         });
     }
+    initializeStickyContent() {
+        this.stickyContentTemplate = this.stickyContentRef;
+    }
     removeWrapper() {
         const parent = this.elementRef.nativeElement.parentNode;
         this.renderer.removeChild(parent, this.elementRef.nativeElement);
@@ -7691,10 +7881,10 @@ class PageComponent {
     }
 }
 /** @nocollapse */ PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: ModalNavigationService }, { token: TabsComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageComponent, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh", backButtonClick: "backButtonClick" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "backButtonDelegate", first: true, predicate: IonBackButtonDelegate, descendants: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title>\n      <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n        <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n      </div>\n    </ion-title>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"secondary\"\n      [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <div class=\"content-inner\">\n    <div\n      class=\"page-header\"\n      *ngIf=\"hasPageTitle\"\n      [ngClass]=\"{\n        'text-center': titleAlignment === 'center',\n        'text-right': titleAlignment === 'right'\n      }\"\n    >\n      <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n        <ng-container\n          *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n        <ng-container\n          *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n        ></ng-container>\n      </div>\n    </div>\n\n    <!-- Content -->\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], directives: [{ type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageComponent, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh", backButtonClick: "backButtonClick" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "stickyContentRef", first: true, predicate: PageStickyContentDirective, descendants: true, read: TemplateRef }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "backButtonDelegate", first: true, predicate: IonBackButtonDelegate, descendants: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title>\n      <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n        <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n      </div>\n    </ion-title>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"secondary\"\n      [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <!-- Page header -->\n  <div class=\"page-header-container\" *ngIf=\"hasPageTitle\">\n    <div\n      class=\"page-header\"\n      [ngClass]=\"{\n        'text-center': titleAlignment === 'center',\n        'text-right': titleAlignment === 'right'\n      }\"\n    >\n      <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n        <ng-container\n          *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n        <ng-container\n          *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!--  Sticky content -->\n  <ng-container *ngIf=\"stickyContentTemplate\">\n    <div class=\"sticky-content-container\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 720px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:0;left:0;right:0;margin-block-end:24px}.sticky-content-container div{max-width:var(--page-content-max-width, 720px);margin:0 auto}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], directives: [{ type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title>\n      <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n        <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n      </div>\n    </ion-title>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"secondary\"\n      [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <div class=\"content-inner\">\n    <div\n      class=\"page-header\"\n      *ngIf=\"hasPageTitle\"\n      [ngClass]=\"{\n        'text-center': titleAlignment === 'center',\n        'text-right': titleAlignment === 'right'\n      }\"\n    >\n      <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n        <ng-container\n          *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n        <ng-container\n          *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n        ></ng-container>\n      </div>\n    </div>\n\n    <!-- Content -->\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}\n"] }]
+            args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title>\n      <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n        <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n      </div>\n    </ion-title>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons\n      class=\"hide\"\n      slot=\"secondary\"\n      [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n    >\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <!-- Page header -->\n  <div class=\"page-header-container\" *ngIf=\"hasPageTitle\">\n    <div\n      class=\"page-header\"\n      [ngClass]=\"{\n        'text-center': titleAlignment === 'center',\n        'text-right': titleAlignment === 'right'\n      }\"\n    >\n      <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n        <ng-container\n          *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n        ></ng-container>\n      </div>\n      <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n        <ng-container\n          *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!--  Sticky content -->\n  <ng-container *ngIf=\"stickyContentTemplate\">\n    <div class=\"sticky-content-container\">\n      <div>\n        <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n      </div>\n    </div>\n  </ng-container>\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 720px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:0;left:0;right:0;margin-block-end:24px}.sticky-content-container div{max-width:var(--page-content-max-width, 720px);margin:0 auto}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: ModalNavigationService }, { type: TabsComponent, decorators: [{
                         type: Optional
@@ -7764,6 +7954,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], customContent: [{
                 type: ContentChildren,
                 args: [PageContentDirective]
+            }], stickyContentRef: [{
+                type: ContentChild,
+                args: [PageStickyContentDirective, { static: false, read: TemplateRef }]
             }], _onKeyboardWillShow: [{
                 type: HostListener,
                 args: ['window:keyboardWillShow', ['$event']]
@@ -7834,7 +8027,8 @@ class PageModule {
         PageTitleComponent,
         PageTitleDirective,
         PageSubtitleDirective,
-        PageToolbarTitleDirective], imports: [CommonModule, IonicModule, FitHeadingModule, SpinnerModule], exports: [PageComponent,
+        PageToolbarTitleDirective,
+        PageStickyContentDirective], imports: [CommonModule, IonicModule, FitHeadingModule, SpinnerModule], exports: [PageComponent,
         PageActionsComponent,
         PageActionsDirective,
         PageContentComponent,
@@ -7845,7 +8039,8 @@ class PageModule {
         PageTitleDirective,
         PageSubtitleDirective,
         PageToolbarTitleDirective,
-        FitHeadingModule] });
+        FitHeadingModule,
+        PageStickyContentDirective] });
 /** @nocollapse */ PageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageModule, imports: [[CommonModule, IonicModule, FitHeadingModule, SpinnerModule], FitHeadingModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageModule, decorators: [{
             type: NgModule,
@@ -7862,6 +8057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                         PageTitleDirective,
                         PageSubtitleDirective,
                         PageToolbarTitleDirective,
+                        PageStickyContentDirective,
                     ],
                     imports: [CommonModule, IonicModule, FitHeadingModule, SpinnerModule],
                     exports: [
@@ -7877,6 +8073,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                         PageSubtitleDirective,
                         PageToolbarTitleDirective,
                         FitHeadingModule,
+                        PageStickyContentDirective,
                     ],
                 }]
         }] });
@@ -7948,7 +8145,7 @@ class RangeComponent {
             multi: true,
             useExisting: forwardRef((() => RangeComponent)),
         },
-    ], usesOnChanges: true, ngImport: i0, template: "<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n>\n</ion-range>\n\n<label *ngIf=\"minLabel\" class=\"min-label\">{{ minLabel }}</label>\n<label *ngIf=\"maxLabel\" class=\"max-label\">{{ maxLabel }}</label>\n", 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 rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .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}@media (hover: hover) and (pointer: fine){ion-range:focus-within::part(knob){transition:all 80ms linear 0ms;box-shadow:0 5px 10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-range:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--knob-background: #ebebeb}}ion-range:active,ion-range.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--knob-background: #d6d6d6}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(knob){transition:all 80ms linear 0ms;transition-property:background}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:translate(-50%);display:block;border:solid transparent 6px;border-top-color: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}\n"], components: [{ type: i1.IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }], directives: [{ type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], usesOnChanges: true, ngImport: i0, template: "<ion-range\n  (ionChange)=\"_onRangeValueChange($event)\"\n  [min]=\"min\"\n  [max]=\"max\"\n  [step]=\"step\"\n  [value]=\"value\"\n  [pin]=\"pin\"\n  [snaps]=\"ticks\"\n  [ticks]=\"ticks\"\n  [debounce]=\"debounce\"\n  [disabled]=\"disabled\"\n>\n</ion-range>\n\n<label *ngIf=\"minLabel\" class=\"min-label\">{{ minLabel }}</label>\n<label *ngIf=\"maxLabel\" class=\"max-label\">{{ maxLabel }}</label>\n", 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 rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .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}@media (hover: hover) and (pointer: fine){ion-range:focus-within::part(knob){transition:all 80ms linear 0ms;box-shadow:0 5px 10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-range:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--knob-background: #ebebeb}}ion-range:active,ion-range.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--knob-background: #d6d6d6}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(knob){transition:all 80ms linear 0ms;transition-property:background}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:translate(-50%);display:block;border:solid transparent 6px;border-top-color: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}\n"], components: [{ type: i1.IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }], directives: [{ type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-range', providers: [
@@ -8057,7 +8254,7 @@ class ReorderListComponent {
     }
 }
 /** @nocollapse */ ReorderListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ReorderListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ReorderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, 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 #0006;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 #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}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>.content-layer>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)}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+/** @nocollapse */ ReorderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, 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 #0006;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 #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}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>.content-layer>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)}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: 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=\"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 #0006;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 #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}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>.content-layer>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)}\n"] }]
@@ -8174,7 +8371,7 @@ class SegmentedControlComponent {
     }
 }
 /** @nocollapse */ SegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: IconRegistryService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { selectedIndexChange: "selectedIndexChange", segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n>\n  <ng-container *ngFor=\"let item of items\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }} </ion-segment-button>\n    <div class=\"badge-container\" *ngIf=\"item.badge\">\n      <kirby-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  </ng-container>\n</ion-segment>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .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.default-mode ion-segment{--background: var(--kirby-white);width:-moz-fit-content;width:fit-content;overflow:visible;contain:none}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:4px;gap:8px}@media (pointer: coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-white);--indicator-transition: none;flex:initial}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: 12px;--padding-end: 12px}ion-segment{border-radius:999px}ion-segment-button{position:relative;--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;--indicator-transform: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:40px;min-width:-moz-fit-content;min-width:fit-content;font-weight:400;font-size:14px;text-transform:none;margin:0;opacity:1}@media (hover: hover) and (pointer: fine){ion-segment-button:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-segment-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button:active,ion-segment-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}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%}@media (hover: hover){ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button.segment-button-checked:active,ion-segment-button.segment-button-checked.ion-activated{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-segment-button::part(native):after{transition:all 80ms linear 0ms}ion-segment-button::part(indicator){padding-inline:0}.badge-container{position:relative}\n"], components: [{ type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { type: KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+/** @nocollapse */ SegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { selectedIndexChange: "selectedIndexChange", segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n>\n  <ng-container *ngFor=\"let item of items\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }} </ion-segment-button>\n    <div class=\"badge-container\" *ngIf=\"item.badge\">\n      <kirby-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  </ng-container>\n</ion-segment>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .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.default-mode ion-segment{--background: var(--kirby-white);width:-moz-fit-content;width:fit-content;overflow:visible;contain:none}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:4px;gap:8px}@media (pointer: coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-white);--indicator-transition: none;flex:initial}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: 12px;--padding-end: 12px}ion-segment{border-radius:999px}ion-segment-button{position:relative;--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;--indicator-transform: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:40px;min-width:-moz-fit-content;min-width:fit-content;font-weight:400;font-size:14px;text-transform:none;margin:0;opacity:1}@media (hover: hover) and (pointer: fine){ion-segment-button:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-segment-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button:active,ion-segment-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}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%}@media (hover: hover){ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button.segment-button-checked:active,ion-segment-button.segment-button-checked.ion-activated{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-segment-button::part(native):after{transition:all 80ms linear 0ms}ion-segment-button::part(indicator){padding-inline:0}.badge-container{position:relative}\n"], components: [{ type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { type: KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SegmentedControlComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-segmented-control', host: { role: 'group' }, template: "<ion-segment\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n>\n  <ng-container *ngFor=\"let item of items\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }} </ion-segment-button>\n    <div class=\"badge-container\" *ngIf=\"item.badge\">\n      <kirby-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  </ng-container>\n</ion-segment>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .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.default-mode ion-segment{--background: var(--kirby-white);width:-moz-fit-content;width:fit-content;overflow:visible;contain:none}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:4px;gap:8px}@media (pointer: coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-white);--indicator-transition: none;flex:initial}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: 12px;--padding-end: 12px}ion-segment{border-radius:999px}ion-segment-button{position:relative;--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;--indicator-transform: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:40px;min-width:-moz-fit-content;min-width:fit-content;font-weight:400;font-size:14px;text-transform:none;margin:0;opacity:1}@media (hover: hover) and (pointer: fine){ion-segment-button:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-segment-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button:active,ion-segment-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}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%}@media (hover: hover){ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button.segment-button-checked:active,ion-segment-button.segment-button-checked.ion-activated{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-segment-button::part(native):after{transition:all 80ms linear 0ms}ion-segment-button::part(indicator){padding-inline:0}.badge-container{position:relative}\n"] }]
@@ -8258,7 +8455,7 @@ class SlideButtonComponent {
     }
 }
 /** @nocollapse */ SlideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, 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", 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{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-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:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;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:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, 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", 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{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-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:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;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:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, 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", 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{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-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:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;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:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
@@ -8310,7 +8507,7 @@ class SlidesComponent {
         ></ng-container>
       </ion-slide>
     </ion-slides>
-  `, isInline: true, components: [{ type: i1.IonSlides, selector: "ion-slides", inputs: ["mode", "options", "pager", "scrollbar"] }, { type: i1.IonSlide, selector: "ion-slide" }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i1.IonSlides, selector: "ion-slides", inputs: ["mode", "options", "pager", "scrollbar"] }, { type: i1.IonSlide, selector: "ion-slide" }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlidesComponent, decorators: [{
             type: Component,
             args: [{
@@ -8364,10 +8561,10 @@ class TabButtonComponent {
     }
 }
 /** @nocollapse */ TabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TabButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TabButtonComponent, selector: "kirby-tab-button", inputs: { routerLink: "routerLink" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n  <div class=\"icon-container\" *ngIf=\"icons.length\">\n    <ng-content\n      *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n      select=\"kirby-icon[:not([selected-tab])]\"\n    ></ng-content>\n    <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n    <ng-content select=\"kirby-badge\"></ng-content>\n  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: 0;--kirby-badge-right: 0}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top: -5px;--kirby-badge-right: -5px}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tab-button{padding:0 12px;margin-right:0}}\n"], components: [{ type: i1.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+/** @nocollapse */ TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TabButtonComponent, selector: "kirby-tab-button", inputs: { routerLink: "routerLink" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n  <div class=\"icon-container\" *ngIf=\"icons.length\">\n    <ng-content\n      *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n      select=\"kirby-icon[:not([selected-tab])]\"\n    ></ng-content>\n    <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left:calc(50% + .4em)}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left:calc(50% + .2em)}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;flex-direction:row;padding:0 24px;margin-right:24px;font-size:14px;--color-selected: var(--kirby-black);--kirby-badge-position: absolute;--kirby-badge-top:calc(50% - 1.35em);--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tab-button{padding:0 12px;margin-right:0}}\n"], components: [{ type: i1.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TabButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-tab-button', template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n  <div class=\"icon-container\" *ngIf=\"icons.length\">\n    <ng-content\n      *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n      select=\"kirby-icon[:not([selected-tab])]\"\n    ></ng-content>\n    <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n    <ng-content select=\"kirby-badge\"></ng-content>\n  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: 0;--kirby-badge-right: 0}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top: -5px;--kirby-badge-right: -5px}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tab-button{padding:0 12px;margin-right:0}}\n"] }]
+            args: [{ selector: 'kirby-tab-button', template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n  <div class=\"icon-container\" *ngIf=\"icons.length\">\n    <ng-content\n      *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n      select=\"kirby-icon[:not([selected-tab])]\"\n    ></ng-content>\n    <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n  </div>\n  <ion-label>\n    <ng-content></ng-content>\n  </ion-label>\n  <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left:calc(50% + .4em)}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left:calc(50% + .2em)}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;flex-direction:row;padding:0 24px;margin-right:24px;font-size:14px;--color-selected: var(--kirby-black);--kirby-badge-position: absolute;--kirby-badge-top:calc(50% - 1.35em);--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tab-button{padding:0 12px;margin-right:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { routerLink: [{
                 type: Input
             }], click: [{
@@ -8621,7 +8818,7 @@ class ToggleButtonComponent {
     }
 }
 /** @nocollapse */ ToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ToggleButtonComponent, selector: "kirby-toggle-button", inputs: { checked: "checked" }, outputs: { checkChanged: "checkChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<ng-container *ngIf=\"!checked\">\n  <ng-content select=\"button[kirby-button][unchecked]\"></ng-content>\n</ng-container>\n<ng-container *ngIf=\"checked\">\n  <ng-content select=\"button[kirby-button][checked]\"></ng-content>\n</ng-container>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ToggleButtonComponent, selector: "kirby-toggle-button", inputs: { checked: "checked" }, outputs: { checkChanged: "checkChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<ng-container *ngIf=\"!checked\">\n  <ng-content select=\"button[kirby-button][unchecked]\"></ng-content>\n</ng-container>\n<ng-container *ngIf=\"checked\">\n  <ng-content select=\"button[kirby-button][checked]\"></ng-content>\n</ng-container>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!checked\">\n  <ng-content select=\"button[kirby-button][unchecked]\"></ng-content>\n</ng-container>\n<ng-container *ngIf=\"checked\">\n  <ng-content select=\"button[kirby-button][checked]\"></ng-content>\n</ng-container>\n" }]
@@ -8649,6 +8846,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
+class PageLocalNavigationComponent {
+    constructor(window) {
+        this.window = window;
+        this.DEBOUNCE_TIME_MS = 250;
+        this.items = [];
+        this.selectedIndex = 0;
+        this.selectedIndexChange = new EventEmitter();
+        console.warn('kirby-local-navigation component is an experimental feature and should not be used in a production environment.');
+    }
+    get tabBarNativeElement() {
+        var _a;
+        return (_a = this.tabBarElementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.scrollToSelectedTab(this.selectedIndex);
+        }, this.DEBOUNCE_TIME_MS);
+    }
+    onTabChange(index) {
+        if (this.selectedIndex !== index) {
+            this.selectedIndex = index;
+            this.scrollToSelectedTab(index);
+            this.selectedIndexChange.emit(index);
+        }
+    }
+    getSelectedItemElement(index) {
+        const tabBarElement = this.tabBarNativeElement;
+        if (tabBarElement) {
+            return tabBarElement.children.item(index);
+        }
+    }
+    focusNext(index) {
+        const tabBarElement = this.tabBarNativeElement;
+        if (tabBarElement) {
+            const next = tabBarElement.children.item(index);
+            next === null || next === void 0 ? void 0 : next.focus({ preventScroll: false });
+        }
+    }
+    scrollToSelectedTab(index) {
+        const tabBarElement = this.tabBarNativeElement;
+        const selectedTabElement = this.getSelectedItemElement(index);
+        if (tabBarElement && selectedTabElement) {
+            const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;
+            const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;
+            const tabBarElementWidth = tabBarElement.getBoundingClientRect().width;
+            this.window.nativeWindow.requestAnimationFrame(() => {
+                tabBarElement === null || tabBarElement === void 0 ? void 0 : tabBarElement.scrollTo({
+                    behavior: 'smooth',
+                    left: Math.max(0, selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2),
+                });
+            });
+        }
+    }
+}
+/** @nocollapse */ PageLocalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageLocalNavigationComponent, deps: [{ token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PageLocalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageLocalNavigationComponent, selector: "kirby-page-local-navigation", inputs: { items: "items", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "tabBarElementRef", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\n  <div class=\"tab-bar\" #tabBar>\n    <div\n      class=\"tab-item\"\n      *ngFor=\"let item of items; let i = index\"\n      (click)=\"onTabChange(i)\"\n      [ngClass]=\"i === selectedIndex ? 'selected' : ''\"\n      [tabIndex]=\"0\"\n      (keydown.enter)=\"onTabChange(i)\"\n      (keydown.arrowLeft)=\"focusNext(i - 1)\"\n      (keydown.arrowRight)=\"focusNext(i + 1)\"\n    >\n      <div class=\"tab-item-inner\" [class.extended]=\"!!item.badge\">\n        <span [attr.text]=\"item.text\">{{ item.text }}</span>\n        <ng-container *ngIf=\"item.badge; let badge\">\n          <kirby-badge\n            role=\"text\"\n            [attr.aria-label]=\"badge.description\"\n            [themeColor]=\"badge.themeColor\"\n          >\n            <ng-container *ngIf=\"badge.content.name; else badgeTextContent\">\n              <kirby-icon\n                *ngIf=\"badge.content.isCustom; else defaultIconName\"\n                [customName]=\"badge.content.name\"\n              ></kirby-icon>\n              <ng-template #defaultIconName>\n                <kirby-icon [name]=\"badge.content.name\"></kirby-icon>\n              </ng-template>\n            </ng-container>\n            <ng-template #badgeTextContent>\n              {{ badge.content.text }}\n            </ng-template>\n          </kirby-badge>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".tab-bar{position:relative;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.container{position:relative;background-color:var(--kirby-background-color);max-width:var(--page-content-max-width, 720px)}.container:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){.container:before{left:-16px;width:calc(100% + 32px)}}.tab-item{position:relative;cursor:pointer;box-sizing:border-box;outline:none;padding-bottom:2px}.tab-item.selected:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}.tab-item.selected,.tab-item:focus,.tab-item:hover{font-weight:700}.tab-item-inner{display:flex;align-items:center;justify-content:center;white-space:nowrap;margin:16px;-webkit-user-select:none;user-select:none}.tab-item-inner kirby-badge{margin-left:4px}.tab-item-inner>span{max-width:100px;overflow:hidden;text-overflow:ellipsis;line-height:24px}.tab-item-inner>span:before{display:block;content:attr(text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], components: [{ type: KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageLocalNavigationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kirby-page-local-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n  <div class=\"tab-bar\" #tabBar>\n    <div\n      class=\"tab-item\"\n      *ngFor=\"let item of items; let i = index\"\n      (click)=\"onTabChange(i)\"\n      [ngClass]=\"i === selectedIndex ? 'selected' : ''\"\n      [tabIndex]=\"0\"\n      (keydown.enter)=\"onTabChange(i)\"\n      (keydown.arrowLeft)=\"focusNext(i - 1)\"\n      (keydown.arrowRight)=\"focusNext(i + 1)\"\n    >\n      <div class=\"tab-item-inner\" [class.extended]=\"!!item.badge\">\n        <span [attr.text]=\"item.text\">{{ item.text }}</span>\n        <ng-container *ngIf=\"item.badge; let badge\">\n          <kirby-badge\n            role=\"text\"\n            [attr.aria-label]=\"badge.description\"\n            [themeColor]=\"badge.themeColor\"\n          >\n            <ng-container *ngIf=\"badge.content.name; else badgeTextContent\">\n              <kirby-icon\n                *ngIf=\"badge.content.isCustom; else defaultIconName\"\n                [customName]=\"badge.content.name\"\n              ></kirby-icon>\n              <ng-template #defaultIconName>\n                <kirby-icon [name]=\"badge.content.name\"></kirby-icon>\n              </ng-template>\n            </ng-container>\n            <ng-template #badgeTextContent>\n              {{ badge.content.text }}\n            </ng-template>\n          </kirby-badge>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".tab-bar{position:relative;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.container{position:relative;background-color:var(--kirby-background-color);max-width:var(--page-content-max-width, 720px)}.container:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){.container:before{left:-16px;width:calc(100% + 32px)}}.tab-item{position:relative;cursor:pointer;box-sizing:border-box;outline:none;padding-bottom:2px}.tab-item.selected:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}.tab-item.selected,.tab-item:focus,.tab-item:hover{font-weight:700}.tab-item-inner{display:flex;align-items:center;justify-content:center;white-space:nowrap;margin:16px;-webkit-user-select:none;user-select:none}.tab-item-inner kirby-badge{margin-left:4px}.tab-item-inner>span{max-width:100px;overflow:hidden;text-overflow:ellipsis;line-height:24px}.tab-item-inner>span:before{display:block;content:attr(text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"] }]
+        }], ctorParameters: function () { return [{ type: WindowRef }]; }, propDecorators: { items: [{
+                type: Input
+            }], selectedIndex: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], tabBarElementRef: [{
+                type: ViewChild,
+                args: ['tabBar']
+            }] } });
+
 class KeyHandlerDirective {
     constructor(element) {
         this.element = element;
@@ -8803,6 +9070,7 @@ const exportedDeclarations = [
     SlideButtonComponent,
     ToggleComponent,
     EmptyStateComponent,
+    AffixDirective,
     FormFieldComponent,
     InputComponent,
     InputCounterComponent,
@@ -8847,6 +9115,7 @@ const exportedModules = [
     ListModule,
     ChartsModule,
     SpinnerModule,
+    DataTableModule,
 ];
 const allExports = [...exportedModules, ...exportedDeclarations];
 const importedModules = [...exportedModules];
@@ -8908,6 +9177,7 @@ class KirbyModule {
         SlideButtonComponent,
         ToggleComponent,
         EmptyStateComponent,
+        AffixDirective,
         FormFieldComponent,
         InputComponent,
         InputCounterComponent,
@@ -8945,7 +9215,8 @@ class KirbyModule {
         ToggleButtonModule,
         ListModule,
         ChartsModule,
-        SpinnerModule], exports: [AppModule,
+        SpinnerModule,
+        DataTableModule], exports: [AppModule,
         RouterOutletModule,
         PageModule,
         TabsModule,
@@ -8954,7 +9225,8 @@ class KirbyModule {
         ToggleButtonModule,
         ListModule,
         ChartsModule,
-        SpinnerModule, CardComponent,
+        SpinnerModule,
+        DataTableModule, CardComponent,
         CardHeaderComponent,
         CardFooterComponent,
         ButtonComponent,
@@ -8975,6 +9247,7 @@ class KirbyModule {
         SlideButtonComponent,
         ToggleComponent,
         EmptyStateComponent,
+        AffixDirective,
         FormFieldComponent,
         InputComponent,
         InputCounterComponent,
@@ -9016,7 +9289,8 @@ class KirbyModule {
         ToggleButtonModule,
         ListModule,
         ChartsModule,
-        SpinnerModule] });
+        SpinnerModule,
+        DataTableModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyModule, decorators: [{
             type: NgModule,
             args: [{
@@ -9044,9 +9318,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                     }] }];
     } });
 
+const COMPONENT_DECLARATIONS = [PageLocalNavigationComponent];
+/**
+ * This module contains experimental components, that should not be used in a production environment.
+ * @see KirbyModule
+ */
+class KirbyExperimentalModule {
+}
+/** @nocollapse */ KirbyExperimentalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyExperimentalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ KirbyExperimentalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyExperimentalModule, declarations: [PageLocalNavigationComponent], imports: [CommonModule, KirbyModule], exports: [PageLocalNavigationComponent] });
+/** @nocollapse */ KirbyExperimentalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyExperimentalModule, imports: [[CommonModule, KirbyModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyExperimentalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, KirbyModule],
+                    exports: COMPONENT_DECLARATIONS,
+                    declarations: COMPONENT_DECLARATIONS,
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, BaseChartComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, ElementAsButtonDirective, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, HorizontalDirection, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemTemplateDirective, ListModule, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, ModalRouterLinkDirective, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageSubtitleDirective, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, SpinnerModule, StockChartComponent, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleButtonModule, ToggleComponent, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent };
+export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AffixDirective, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, BaseChartComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DataTableModule, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, ElementAsButtonDirective, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, HorizontalDirection, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyExperimentalModule, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemTemplateDirective, ListModule, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, ModalRouterLinkDirective, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageLocalNavigationComponent, PageModule, PageProgressComponent, PageStickyContentDirective, PageSubtitleDirective, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, SpinnerModule, StockChartComponent, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, TabButtonComponent, TableComponent, TableRowComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleButtonModule, ToggleComponent, chartConfigHasType, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent };
 //# sourceMappingURL=kirbydesign-designsystem.mjs.map