@kirbydesign/designsystem 6.0.3 → 6.2.1

package/fesm2015/kirbydesign-designsystem.mjs

@@ -1,10 +1,10 @@
 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, InjectionToken, Injector, HostListener, ElementRef, ContentChild, RendererStyleFlags2, ViewChildren, ViewChild, EventEmitter, Output, ContentChildren, Optional, Inject, NgModule, ChangeDetectorRef, NgZone, LOCALE_ID, forwardRef, TemplateRef, Pipe, SkipSelf, APP_INITIALIZER } 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, LOCALE_ID, forwardRef, TemplateRef, Pipe, 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, IonApp, IonicModule, IonRadio, IonFabButton, IonItemSliding, IonList, IonTabs, IonFooter } from '@ionic/angular';
+import { IonContent, IonHeader, IonToolbar, IonTitle, IonApp, IonicModule, IonRadio, IonFabButton, IonItemSliding, IonList, IonTabs, IonFooter, IonBackButtonDelegate } from '@ionic/angular';
 export { IonRouterOutlet, NavController } from '@ionic/angular';
 import * as i2 from '@angular/common';
 import { CommonModule, formatNumber, getLocaleDateFormat, FormatWidth, getLocaleNumberSymbol, NumberSymbol, DOCUMENT } from '@angular/common';
@@ -77,11 +77,14 @@ const kirbyIconSettings = {
         { name: 'backspace', svg: 'assets/kirby/icons/svg/backspace.svg' },
         { name: 'calendar', svg: 'assets/kirby/icons/svg/calendar.svg' },
         { name: 'camera', svg: 'assets/kirby/icons/svg/camera.svg' },
+        { name: 'car', svg: 'assets/kirby/icons/svg/car.svg' },
         { name: 'checkbox-outline', svg: 'assets/kirby/icons/svg/checkbox-outline.svg' },
         { name: 'checkbox', svg: 'assets/kirby/icons/svg/checkbox.svg' },
         { name: 'checkmark-selected', svg: 'assets/kirby/icons/svg/checkmark-selected.svg' },
         { name: 'close', svg: 'assets/kirby/icons/svg/close.svg' },
         { name: 'cog', svg: 'assets/kirby/icons/svg/cog.svg' },
+        { name: 'coinstack', svg: 'assets/kirby/icons/svg/coinstack.svg' },
+        { name: 'contact', svg: 'assets/kirby/icons/svg/contact.svg' },
         { name: 'copy', svg: 'assets/kirby/icons/svg/copy.svg' },
         { name: 'flag', svg: 'assets/kirby/icons/svg/flag.svg' },
         { name: 'edit', svg: 'assets/kirby/icons/svg/edit.svg' },
@@ -94,6 +97,7 @@ const kirbyIconSettings = {
         { name: 'inbox', svg: 'assets/kirby/icons/svg/inbox.svg' },
         { name: 'inbox-outline', svg: 'assets/kirby/icons/svg/inbox-outline.svg' },
         { name: 'information', svg: 'assets/kirby/icons/svg/information.svg' },
+        { name: 'insurance', svg: 'assets/kirby/icons/svg/insurance.svg' },
         { name: 'investment', svg: 'assets/kirby/icons/svg/investment.svg' },
         { name: 'kirby', svg: 'assets/kirby/icons/svg/kirby.svg' },
         { name: 'link', svg: 'assets/kirby/icons/svg/link.svg' },
@@ -108,6 +112,8 @@ const kirbyIconSettings = {
         { name: 'person-outline', svg: 'assets/kirby/icons/svg/person-outline.svg' },
         { name: 'person', svg: 'assets/kirby/icons/svg/person.svg' },
         { name: 'qr', svg: 'assets/kirby/icons/svg/QR.svg' },
+        { name: 'recurring', svg: 'assets/kirby/icons/svg/recurring.svg' },
+        { name: 'salary', svg: 'assets/kirby/icons/svg/salary.svg' },
         { name: 'search', svg: 'assets/kirby/icons/svg/search.svg' },
         { name: 'share', svg: 'assets/kirby/icons/svg/share.svg' },
         { name: 'sort', svg: 'assets/kirby/icons/svg/sort.svg' },
@@ -286,6 +292,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
 
 class Modal {
 }
+var ModalElementType;
+(function (ModalElementType) {
+    ModalElementType[ModalElementType["PAGE_PROGRESS"] = 0] = "PAGE_PROGRESS";
+    ModalElementType[ModalElementType["FOOTER"] = 1] = "FOOTER";
+    ModalElementType[ModalElementType["TITLE"] = 2] = "TITLE";
+})(ModalElementType || (ModalElementType = {}));
+class ModalElementsAdvertiser {
+}
+class ModalElementComponent {
+    constructor(modalElementType, elementRef, modalElementsAdvertiser) {
+        this.modalElementType = modalElementType;
+        this.elementRef = elementRef;
+        this.modalElementsAdvertiser = modalElementsAdvertiser;
+    }
+    get isContainedInModal() {
+        return this.modalElementsAdvertiser !== null;
+    }
+    ngAfterViewInit() {
+        if (this.isContainedInModal) {
+            this.modalElementsAdvertiser.addModalElement(this.modalElementType, this.elementRef);
+        }
+    }
+    ngOnDestroy() {
+        if (this.isContainedInModal) {
+            this.modalElementsAdvertiser.removeModalElement(this.modalElementType, this.elementRef);
+        }
+    }
+}
+/** @nocollapse */ ModalElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalElementComponent, deps: [{ token: ModalElementType }, { token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ModalElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalElementComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalElementComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: function () {
+        return [{ type: ModalElementType }, { type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
 
 const COMPONENT_PROPS = new InjectionToken('componentProps');
 
@@ -473,6 +517,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 args: [IconComponent, { read: ElementRef }]
             }] } });
 
+/*
+  The ModalWrapperComponent class was growing large.
+
+  Hence the functions responsible for moving modal elements around
+  has been encapsulated in this class.
+*/
+class ModalElementsMoverDelegate {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    addFooter(footerElementRef) {
+        // Move the footer next to ion-content
+        this.moveChild(footerElementRef, this.elementRef);
+    }
+    removeFooter(footerElementRef) {
+        this.removeChild(footerElementRef);
+    }
+    addPageProgress(pageProgressElementRef, ionToolbarElement) {
+        this.moveChild(pageProgressElementRef, ionToolbarElement);
+    }
+    removePageProgress(pageProgressElementRef) {
+        this.removeChild(pageProgressElementRef);
+    }
+    /*
+       contentTitleElement & ionTitleElement has to be passed
+       as arguments to the method; not part of the constructor, as they
+       might reference completely different elements between calls.
+  
+       For example in a multi-page routed modal where the elements are destroyed
+       and recreated.
+    */
+    addTitle(titleElementRef, contentTitleElement, hasCollapsibleTitle, ionTitleElement) {
+        this.moveChild(titleElementRef, ionTitleElement);
+        // If title is collapsible append it to content area; required by ionic implementation.
+        if (hasCollapsibleTitle) {
+            const titleElementClone = titleElementRef.nativeElement.cloneNode(true);
+            this.moveChild(new ElementRef(titleElementClone), contentTitleElement);
+        }
+    }
+    removeTitle(titleElementRef, hasCollapsibleTitle, contentTitleElement) {
+        this.removeChild(titleElementRef);
+        if (hasCollapsibleTitle) {
+            const kirbyPageTitleElement = contentTitleElement.nativeElement.querySelector('kirby-page-title');
+            this.removeChild(new ElementRef(kirbyPageTitleElement));
+        }
+    }
+    moveChild(childElementRef, newParentElementRef) {
+        const child = childElementRef.nativeElement;
+        const newParent = newParentElementRef.nativeElement;
+        this.renderer.removeChild(child.parentElement, child);
+        this.renderer.appendChild(newParent, child);
+    }
+    removeChild(childElementRef, parentElement) {
+        const child = childElementRef.nativeElement;
+        if (!!child) {
+            this.renderer.removeChild(parentElement || child.parentElement, child);
+        }
+    }
+}
+
 /**
  * Factory that creates a new ResizeObserver and allows us to stub it out in unit tests.
  * @docs-private
@@ -568,7 +673,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
         }], ctorParameters: function () { return [{ type: WindowRef }]; } });
 
 class ModalWrapperComponent {
-    constructor(injector, elementRef, renderer, zone, resizeObserverService, componentFactoryResolver, windowRef, platform) {
+    constructor(changeDetector, injector, elementRef, renderer, zone, resizeObserverService, componentFactoryResolver, windowRef, platform) {
+        this.changeDetector = changeDetector;
         this.injector = injector;
         this.elementRef = elementRef;
         this.renderer = renderer;
@@ -593,13 +699,10 @@ class ModalWrapperComponent {
             .pipe(debounceTime(this.VIEWPORT_RESIZE_DEBOUNCE_TIME));
         this.destroy$ = new Subject();
         this.willClose$ = this.ionModalWillDismiss.pipe(first());
-        this.elementToParentMap = {
-            'KIRBY-MODAL-FOOTER': () => [this.elementRef.nativeElement],
-            'KIRBY-PAGE-TITLE': () => { var _a; return [this.ionTitleElement.nativeElement, (_a = this.contentTitle) === null || _a === void 0 ? void 0 : _a.nativeElement].filter((element) => element !== undefined); },
-            'KIRBY-PAGE-PROGRESS': () => [this.ionToolbarElement.nativeElement],
-        };
+        this._currentFooter = null;
         this.setViewportHeight();
         this.observeViewportResize();
+        this.modalElementsMoverDelegate = new ModalElementsMoverDelegate(renderer, elementRef);
     }
     get _hasCollapsibleTitle() {
         var _a;
@@ -608,11 +711,15 @@ class ModalWrapperComponent {
     set scrollDisabled(disabled) {
         this.ionContent.scrollY = !disabled;
     }
-    get mutationObserver() {
-        if (!this._mutationObserver) {
-            this._mutationObserver = this.createEmbeddedElementsMutationObserver();
+    get contentTitleElement() {
+        /*
+            contentTitleElement has ngIf directive dependent on _hasCollapsibleTitle; trigger CD to make sure element has been queried.
+            Solution taken from: https://danieleyassu.com/angular-viewchild-and-ngif/
+          */
+        if (!this._contentTitleElement && this._hasCollapsibleTitle) {
+            this.changeDetector.detectChanges();
         }
-        return this._mutationObserver;
+        return this._contentTitleElement;
     }
     get intersectionObserver() {
         if (!this._intersectionObserver) {
@@ -635,6 +742,43 @@ class ModalWrapperComponent {
             parent: this.injector,
         });
     }
+    set currentFooter(footer) {
+        if (footer !== null) {
+            this.resizeObserverService.observe(footer, (entry) => {
+                const [property, pixelValue] = [
+                    '--footer-height',
+                    `${Math.floor(entry.contentRect.height)}px`,
+                ];
+                this.setCssVar(this.elementRef.nativeElement, property, pixelValue);
+            });
+        }
+        this._currentFooter = footer;
+    }
+    get currentFooter() {
+        return this._currentFooter;
+    }
+    addModalElement(type, modalElement) {
+        const addModalElementFn = {
+            [ModalElementType.FOOTER]: () => {
+                this.modalElementsMoverDelegate.addFooter(modalElement);
+                this.currentFooter = modalElement.nativeElement;
+            },
+            [ModalElementType.TITLE]: () => this.modalElementsMoverDelegate.addTitle(modalElement, this.contentTitleElement, this._hasCollapsibleTitle, this.ionTitleElement),
+            [ModalElementType.PAGE_PROGRESS]: () => this.modalElementsMoverDelegate.addPageProgress(modalElement, this.ionToolbarElement),
+        }[type];
+        addModalElementFn();
+    }
+    removeModalElement(type, modalElement) {
+        const removeModalElementFn = {
+            [ModalElementType.FOOTER]: () => {
+                this.modalElementsMoverDelegate.removeFooter(modalElement);
+                this.currentFooter = null;
+            },
+            [ModalElementType.TITLE]: () => this.modalElementsMoverDelegate.removeTitle(modalElement, this._hasCollapsibleTitle, this.contentTitleElement),
+            [ModalElementType.PAGE_PROGRESS]: () => this.modalElementsMoverDelegate.removePageProgress(modalElement),
+        }[type];
+        removeModalElementFn();
+    }
     initializeResizeModalToModalWrapper() {
         if (this.config.flavor === 'drawer' && this.config.interactWithBackground) {
             merge(this.ionModalDidPresent, this.viewportResize$)
@@ -671,12 +815,9 @@ class ModalWrapperComponent {
             return;
         siblingModalRouteActivated$.pipe(takeUntil(this.willClose$)).subscribe((route) => {
             if (this.routerOutlet.isActivated) {
-                this.mutationObserver.disconnect();
                 this.routerOutlet.deactivate();
-                this.clearEmbeddedElements();
             }
             this.routerOutlet.activateWith(route, this.componentFactoryResolver);
-            this.checkForEmbeddedElements();
         });
     }
     patchScrollElementSize() {
@@ -704,11 +845,6 @@ class ModalWrapperComponent {
         if (this.toolbarButtonsQuery) {
             this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement);
         }
-        this.checkForEmbeddedElements();
-    }
-    checkForEmbeddedElements() {
-        this.moveEmbeddedElements();
-        this.observeEmbeddedElements();
     }
     observeHeaderResize() {
         this.resizeObserverService.observe(this.ionHeaderElement.nativeElement, (entry) => {
@@ -716,17 +852,6 @@ class ModalWrapperComponent {
             this.setCssVar(this.elementRef.nativeElement, property, pixelValue);
         });
     }
-    moveEmbeddedElements() {
-        const parentElement = this.getEmbeddedComponentElement();
-        if (parentElement) {
-            Object.entries(this.elementToParentMap).forEach(([tagName, getNewParent]) => {
-                const embeddedElement = parentElement.querySelector(tagName);
-                if (embeddedElement) {
-                    this.moveChild(embeddedElement, getNewParent());
-                }
-            });
-        }
-    }
     listenForIonModalDidPresent() {
         if (this.ionModalElement) {
             this.ionModalElement.addEventListener('ionModalDidPresent', () => {
@@ -825,7 +950,7 @@ class ModalWrapperComponent {
         this.toggleCssClass(this.elementRef.nativeElement, 'keyboard-visible', keyboardHeight > 0);
         const keyboardOverlap = this.getKeyboardOverlap(keyboardHeight, this.elementRef.nativeElement);
         let snapFooterToKeyboard = false;
-        const embeddedFooterElement = this.getEmbeddedFooterElement();
+        const embeddedFooterElement = this.currentFooter;
         if (embeddedFooterElement) {
             this.setCssVar(embeddedFooterElement, '--keyboard-offset', `${keyboardOverlap}px`);
             snapFooterToKeyboard = embeddedFooterElement.classList.contains('snap-to-keyboard');
@@ -884,86 +1009,6 @@ class ModalWrapperComponent {
             }
         }
     }
-    clearEmbeddedElements() {
-        Object.entries(this.elementToParentMap).forEach(([tagName, getParents]) => {
-            const newParents = getParents();
-            newParents.forEach((newParent) => {
-                const embeddedElement = newParent.querySelector(`:scope > ${tagName}`);
-                this.removeChild(embeddedElement);
-            });
-        });
-    }
-    /* TODO: Rewrite to make this function independent of element order.
-       See: https://github.com/kirbydesign/designsystem/issues/2096
-    */
-    getEmbeddedComponentElement() {
-        const contentElementChildren = Array.from(this.ionContentElement.nativeElement.children).reverse(); // Reverse makes it easier to retrieve the last children in the list
-        const embeddedComponentElement = !!this.config.modalRoute
-            ? contentElementChildren[0]
-            : contentElementChildren[1];
-        /*
-          As ModalConfig.component has type 'any' all values are valid for component;
-          explicitly handle the case where no embedded component element is found due to
-          this.
-        */
-        if (!embeddedComponentElement)
-            return null;
-        return embeddedComponentElement;
-    }
-    getEmbeddedFooterElement() {
-        return this.elementRef.nativeElement.querySelector('kirby-modal-footer');
-    }
-    moveChild(child, newParents) {
-        this.renderer.removeChild(child.parentElement, child);
-        newParents.forEach((newParent, index) => {
-            const childToAppend = index > 0 ? child.cloneNode(true) : child;
-            this.renderer.appendChild(newParent, childToAppend);
-            // Append adds child as last element of parent; therefore retrieve with lastElementChild
-            const childElement = newParent.lastElementChild;
-            if (childElement.tagName === 'KIRBY-MODAL-FOOTER') {
-                this.resizeObserverService.observe(childElement, (entry) => {
-                    const [property, pixelValue] = [
-                        '--footer-height',
-                        `${Math.floor(entry.contentRect.height)}px`,
-                    ];
-                    this.setCssVar(this.elementRef.nativeElement, property, pixelValue);
-                });
-            }
-        });
-    }
-    removeChild(child) {
-        if (!!child) {
-            this.renderer.removeChild(child.parentElement, child);
-        }
-    }
-    observeEmbeddedElements() {
-        const parentElement = this.getEmbeddedComponentElement();
-        if (parentElement === null)
-            return; // Mute observe warning when parentElement is null
-        this.mutationObserver.observe(parentElement, {
-            childList: true, // Listen for addition or removal of child nodes
-        });
-    }
-    createEmbeddedElementsMutationObserver() {
-        const observedElements = Object.keys(this.elementToParentMap);
-        const callback = (mutations) => {
-            const addedNodes = mutations
-                .filter((mutation) => mutation.type === 'childList') // Filter for mutation to the tree of nodes
-                .map((mutation) => {
-                // Only check for addedNodes as removal is handled by the Angular renderer:
-                return Array.from(mutation.addedNodes).filter((node) => observedElements.includes(node.nodeName));
-            });
-            const addedElements = Array.prototype
-                .concat(...addedNodes)
-                .filter((node) => node instanceof HTMLElement);
-            addedElements.forEach((addedElement) => {
-                const newParentElement = this.elementToParentMap[addedElement.nodeName]();
-                // Move embedded element out of content and append to new parent:
-                this.moveChild(addedElement, newParentElement);
-            });
-        };
-        return new MutationObserver(callback);
-    }
     createModalWrapperIntersectionObserver() {
         const callback = (entries) => {
             const entry = entries[0];
@@ -991,26 +1036,31 @@ class ModalWrapperComponent {
             this.routerOutlet.deactivate();
         }
         //clean up the observer
-        this.mutationObserver.disconnect();
         delete this._mutationObserver;
         this.intersectionObserver.disconnect();
         delete this._intersectionObserver;
         if (this.resizeObserverService) {
             this.resizeObserverService.unobserve(this.windowRef.nativeWindow.document.body);
             this.resizeObserverService.unobserve(this.ionHeaderElement.nativeElement);
-            this.resizeObserverService.unobserve(this.getEmbeddedFooterElement());
+            this.resizeObserverService.unobserve(this.currentFooter);
         }
         this.destroy$.next();
         this.destroy$.complete();
     }
 }
 ModalWrapperComponent.KEYBOARD_HIDE_DELAY_IN_MS = 100;
-/** @nocollapse */ ModalWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ResizeObserverService }, { token: i0.ComponentFactoryResolver }, { token: WindowRef }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
-/** @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 }], 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: "contentTitle", 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 attentionLevel=\"4\" size=\"sm\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n  <button kirby-button attentionLevel=\"2\" size=\"sm\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 16px;--padding-top: 16px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 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", "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"] }] });
+/** @nocollapse */ ModalWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ResizeObserverService }, { token: i0.ComponentFactoryResolver }, { token: WindowRef }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
+/** @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 attentionLevel=\"4\" 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 attentionLevel=\"2\" size=\"md\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["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", "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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-modal-wrapper', providers: [{ provide: Modal, useExisting: ModalWrapperComponent }], 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 attentionLevel=\"4\" size=\"sm\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n  <button kirby-button attentionLevel=\"2\" size=\"sm\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 16px;--padding-top: 16px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 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"] }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ResizeObserverService }, { type: i0.ComponentFactoryResolver }, { type: WindowRef }, { type: PlatformService }]; }, propDecorators: { _hasCollapsibleTitle: [{
+            args: [{ selector: 'kirby-modal-wrapper', providers: [
+                        { provide: Modal, useExisting: ModalWrapperComponent },
+                        { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
+                    ], 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 attentionLevel=\"4\" 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 attentionLevel=\"2\" size=\"md\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["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"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ResizeObserverService }, { type: i0.ComponentFactoryResolver }, { type: WindowRef }, { type: PlatformService }]; }, propDecorators: { _hasCollapsibleTitle: [{
                 type: HostBinding,
                 args: ['class.collapsible-title']
             }], config: [{
@@ -1036,7 +1086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], routerOutlet: [{
                 type: ViewChild,
                 args: [RouterOutlet, { static: true }]
-            }], contentTitle: [{
+            }], _contentTitleElement: [{
                 type: ViewChild,
                 args: ['contentTitle', { read: ElementRef }]
             }], _isDrawer: [{
@@ -5088,7 +5138,6 @@ class DropdownComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.keyboardHandlerService = keyboardHandlerService;
         this.state = OpenState.closed;
-        this.hasConfiguredSlottedItems = false;
         this.horizontalDirection = HorizontalDirection.right;
         this.verticalDirection = VerticalDirection.down;
         this._items = [];
@@ -5164,6 +5213,25 @@ class DropdownComponent {
     get _popoutUp() {
         return this.verticalDirection === VerticalDirection.up;
     }
+    set kirbyItemsSlotted(kirbyItems) {
+        var _a;
+        const hasSlottedItems = ((_a = this.itemClickUnlisten) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        if (hasSlottedItems) {
+            this.unlistenAllSlottedItems();
+        }
+        // Setup a click listener for each new slotted items
+        kirbyItems.forEach((kirbyItem, index) => {
+            this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');
+            const unlisten = this.renderer.listen(kirbyItem.nativeElement, 'click', () => {
+                this.onItemSelect(index);
+            });
+            this.itemClickUnlisten.push(unlisten);
+        });
+        this._kirbyItemsSlotted = kirbyItems;
+    }
+    get kirbyItemsSlotted() {
+        return this._kirbyItemsSlotted;
+    }
     onToggle(event) {
         event.stopPropagation();
         if (!this.isOpen) {
@@ -5181,18 +5249,6 @@ class DropdownComponent {
         // Prevent button focus;
         event.preventDefault();
     }
-    ngAfterContentChecked() {
-        if (!this.hasConfiguredSlottedItems && this.kirbyItemsSlotted.length) {
-            this.kirbyItemsSlotted.forEach((kirbyItem, index) => {
-                this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');
-                const unlisten = this.renderer.listen(kirbyItem.nativeElement, 'click', () => {
-                    this.onItemSelect(index);
-                });
-                this.itemClickUnlisten.push(unlisten);
-            });
-            this.hasConfiguredSlottedItems = true;
-        }
-    }
     /* Utility that makes it easier to set styles on card element
     when using popover*/
     setPopoverCardStyle(style, value) {
@@ -5391,6 +5447,11 @@ class DropdownComponent {
             event.stopImmediatePropagation();
         }
     }
+    _onTouchStart(event) {
+        if (this.isOpen) {
+            event.stopPropagation();
+        }
+    }
     _onFocus() {
         if (this.disabled) {
             this.elementRef.nativeElement.blur();
@@ -5400,14 +5461,17 @@ class DropdownComponent {
         this.state = OpenState.closed;
         this.elementRef.nativeElement.focus();
     }
+    _onEnterOrEscape() {
+        this.close();
+        this._onTouched();
+    }
+    _onPopoverClick(event) {
+        this.close();
+    }
     _onBlur(event) {
-        if (this.disabled)
+        if (this.usePopover)
             return;
-        if (this.isOpen) {
-            if (!this.cardElement.nativeElement.contains(event === null || event === void 0 ? void 0 : event.relatedTarget)) {
-                this.close();
-            }
-        }
+        this.close();
         this._onTouched();
     }
     _onSpace(event) {
@@ -5444,11 +5508,14 @@ class DropdownComponent {
         }
         return false;
     }
-    ngOnDestroy() {
-        let unlisten;
-        while ((unlisten = this.itemClickUnlisten.pop()) !== undefined) {
-            unlisten();
+    unlistenAllSlottedItems() {
+        let unlistenItem;
+        while ((unlistenItem = this.itemClickUnlisten.pop()) !== undefined) {
+            unlistenItem();
         }
+    }
+    ngOnDestroy() {
+        this.unlistenAllSlottedItems();
         if (this.intersectionObserverRef) {
             this.intersectionObserverRef.disconnect();
         }
@@ -5456,13 +5523,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)", "focus": "_onFocus()", "keydown.enter": "_onEnter($event)", "keydown.escape": "_onBlur()", "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", 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: [
         {
             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 [target]=\"buttonElement\" [popout]=\"popout\" (willHide)=\"_onPopoverWillHide()\">\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);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}@media (hover: hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #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}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "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"] }, { 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: { $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);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}@media (hover: hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #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}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "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"] }, { 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-dropdown', providers: [
@@ -5471,7 +5538,7 @@ 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 [target]=\"buttonElement\" [popout]=\"popout\" (willHide)=\"_onPopoverWillHide()\">\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);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}@media (hover: hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #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}: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: { $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);outline:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}@media (hover: hover){:host:focus>button,:host:focus>button.attention-level3{border-color:#4d90fe}}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%;transition:box-shadow .2s,border-color .2s}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #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}: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: [{
@@ -5558,16 +5625,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], _onMouseDown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
+            }], _onTouchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
             }], _onFocus: [{
                 type: HostListener,
                 args: ['focus']
-            }], _onBlur: [{
+            }], _onEnterOrEscape: [{
                 type: HostListener,
                 args: ['keydown.enter']
             }, {
                 type: HostListener,
                 args: ['keydown.escape']
-            }, {
+            }], _onBlur: [{
                 type: HostListener,
                 args: ['blur', ['$event']]
             }], _onSpace: [{
@@ -6504,10 +6574,10 @@ InputComponent.typeToInputmodeMap = {
     search: 'search',
 };
 /** @nocollapse */ InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: InputComponent, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, 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%}: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[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: InputComponent, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, 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;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}: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[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', 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%}: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[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', 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;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}: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[type=number]{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], size: [{
@@ -6581,10 +6651,10 @@ 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%}: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{font-family:var(--kirby-font-family);resize:none}@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;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}: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{font-family:var(--kirby-font-family);resize:none}@media (min-width: 721px){:host{resize:vertical}}\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: 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%}: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{font-family:var(--kirby-font-family);resize:none}@media (min-width: 721px){:host{resize:vertical}}\n"] }]
+            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;-moz-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}: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{font-family:var(--kirby-font-family);resize:none}@media (min-width: 721px){:host{resize:vertical}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], borderless: [{
@@ -6922,8 +6992,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }] } });
 
 class FabSheetComponent {
-    constructor(renderer, document) {
+    constructor(renderer, changeDetectorRef, document) {
         this.renderer = renderer;
+        this.changeDetectorRef = changeDetectorRef;
         this.document = document;
         this.disabled = false;
         this.horizontalAlignment = 'right';
@@ -6955,16 +7026,20 @@ class FabSheetComponent {
         else {
             this.renderer.removeClass(this.document.body, 'fab-sheet-active');
         }
-        setTimeout(() => (this._isBackdropVisible = this.isFabSheetOpen));
+        // Postpone backdrop visibility update to allow for animation of opacity
+        setTimeout(() => {
+            this._isBackdropVisible = this.isFabSheetOpen;
+            this.changeDetectorRef.markForCheck();
+        });
     }
 }
-/** @nocollapse */ FabSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, deps: [{ 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", "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\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n    closeIcon=\"close-outline\"\n  >\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;outline:none}@media (hover: hover){ion-fab-button:focus{--border-width: 1px;--border-style: solid;--border-color: #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.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;outline:none}@media (hover: hover){ion-fab-button:focus{--border-width: 1px;--border-style: solid;--border-color: #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 });
 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\n    [disabled]=\"disabled\"\n    [attr.disabled]=\"disabled ? true : null\"\n    tabindex=\"-1\"\n    closeIcon=\"close-outline\"\n  >\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;outline:none}@media (hover: hover){ion-fab-button:focus{--border-width: 1px;--border-style: solid;--border-color: #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  *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;outline:none}@media (hover: hover){ion-fab-button:focus{--border-width: 1px;--border-style: solid;--border-color: #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"] }]
         }], ctorParameters: function () {
-        return [{ type: i0.Renderer2 }, { type: undefined, decorators: [{
+        return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                         type: Inject,
                         args: [DOCUMENT]
                     }] }];
@@ -6996,10 +7071,10 @@ class FlagComponent {
     }
 }
 /** @nocollapse */ FlagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FlagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ FlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FlagComponent, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500}:host.sm{font-size:14px}:host.xs{font-size:12px;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: #2cf287;--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: #2cf287}:host(.warning){--kirby-flag-background-color: #ffca3a;--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: #ffca3a}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: var(--kirby-danger-contrast);--kirby-flag-border-color: #ff878a}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ FlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FlagComponent, selector: "kirby-flag", inputs: { size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FlagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-flag', template: ` <ng-content></ng-content> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500}:host.sm{font-size:14px}:host.xs{font-size:12px;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: #2cf287;--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: #2cf287}:host(.warning){--kirby-flag-background-color: #ffca3a;--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: #ffca3a}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: var(--kirby-danger-contrast);--kirby-flag-border-color: #ff878a}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}\n"] }]
+            args: [{ selector: 'kirby-flag', template: ` <ng-content></ng-content> `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;background-color:var(--kirby-flag-background-color, transparent);color:var(--kirby-flag-color, var(--kirby-white-contrast));border:1px solid var(--kirby-flag-border-color, var(--kirby-medium));border-radius:4px;font-size:16px;padding:2px 8px;font-weight:500;line-height:1.375}:host.sm{font-size:14px;line-height:1.2857142857}:host.xs{font-size:12px;line-height:1.1666666667;padding-left:4px;padding-right:4px}:host(.success){--kirby-flag-background-color: var(--kirby-success);--kirby-flag-color: var(--kirby-success-contrast);--kirby-flag-border-color: var(--kirby-success)}:host(.warning){--kirby-flag-background-color: var(--kirby-warning);--kirby-flag-color: var(--kirby-warning-contrast);--kirby-flag-border-color: var(--kirby-warning)}:host(.semi-light){--kirby-flag-background-color: var(--kirby-semi-light);--kirby-flag-color: var(--kirby-semi-light-contrast);--kirby-flag-border-color: var(--kirby-semi-light)}:host(.danger){--kirby-flag-background-color: #ff878a;--kirby-flag-color: #1c1c1c;--kirby-flag-border-color: #ff878a}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], themeColor: [{
@@ -7858,18 +7933,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
-class ModalFooterComponent {
-    constructor() {
+class ModalFooterComponent extends ModalElementComponent {
+    constructor(elementRef, modalElementsAdvertiser) {
+        super(ModalElementType.FOOTER, elementRef, modalElementsAdvertiser);
         this.snapToKeyboard = false;
         this.type = 'fixed';
     }
 }
-/** @nocollapse */ ModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalFooterComponent, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, ngImport: i0, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], components: [{ type: i1.IonFooter, selector: "ion-footer", inputs: ["mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, deps: [{ token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalFooterComponent, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, usesInheritance: true, ngImport: i0, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], components: [{ type: i1.IonFooter, selector: "ion-footer", inputs: ["mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
-        }], propDecorators: { snapToKeyboard: [{
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { snapToKeyboard: [{
                 type: HostBinding,
                 args: ['class.snap-to-keyboard']
             }, {
@@ -8124,8 +8204,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input,
                 args: ['kirbyPageContent']
             }] } });
-class PageProgressComponent {
-    constructor(modalWrapper) {
+class PageProgressComponent extends ModalElementComponent {
+    constructor(modalWrapper, modalElementsAdvertiser, elementRef) {
+        super(ModalElementType.PAGE_PROGRESS, elementRef, modalElementsAdvertiser);
         this.modalWrapper = modalWrapper;
         // TODO: Find alternative implementation, which aligns with future page configuration / consumption
         // This implementation was chosen over expanding `moveChild` method in component wrapper with yet another scenario
@@ -8137,8 +8218,8 @@ class PageProgressComponent {
         }
     }
 }
-/** @nocollapse */ PageProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageProgressComponent, deps: [{ token: ModalWrapperComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ PageProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageProgressComponent, selector: "kirby-page-progress", host: { properties: { "attr.slot": "this.slot" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:flex}\n"] });
+/** @nocollapse */ PageProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageProgressComponent, deps: [{ token: ModalWrapperComponent, optional: true, skipSelf: true }, { token: ModalElementsAdvertiser, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PageProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageProgressComponent, selector: "kirby-page-progress", host: { properties: { "attr.slot": "this.slot" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:flex}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageProgressComponent, decorators: [{
             type: Component,
             args: [{
@@ -8151,22 +8232,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                         type: Optional
                     }, {
                         type: SkipSelf
-                    }] }];
+                    }] }, { type: ModalElementsAdvertiser, decorators: [{
+                        type: Optional
+                    }] }, { type: i0.ElementRef }];
     }, propDecorators: { slot: [{
                 type: HostBinding,
                 args: ['attr.slot']
             }] } });
-class PageTitleComponent {
+class PageTitleComponent extends ModalElementComponent {
+    constructor(elementRef, modalElementsAdvertiser) {
+        super(ModalElementType.TITLE, elementRef, modalElementsAdvertiser);
+    }
 }
-/** @nocollapse */ PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageTitleComponent, selector: "kirby-page-title", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+/** @nocollapse */ PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleComponent, deps: [{ token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageTitleComponent, selector: "kirby-page-title", usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kirby-page-title',
                     template: ` <ng-content></ng-content> `,
                 }]
-        }] });
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
 class PageContentComponent {
 }
 /** @nocollapse */ PageContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -8202,6 +8292,7 @@ class PageComponent {
         this.enter = new EventEmitter();
         this.leave = new EventEmitter();
         this.refresh = new EventEmitter();
+        this.backButtonClick = new EventEmitter();
         this.pageTitleIntersectionObserverRef = this.pageTitleIntersectionObserver();
         this.urls = [];
         this.ngOnDestroy$ = new Subject();
@@ -8246,6 +8337,7 @@ class PageComponent {
         this.windowRef.nativeWindow.addEventListener(selectedTabClickEvent, () => {
             this.content.scrollToTop(KirbyAnimation.Duration.LONG);
         });
+        this.interceptBackButtonClicksSetup();
     }
     ngAfterContentChecked() {
         if (!this.urls.includes(this.router.url)) {
@@ -8289,6 +8381,17 @@ class PageComponent {
             this.tabsComponent.tabBarBottomHidden = false;
         }
     }
+    interceptBackButtonClicksSetup() {
+        // Intercept back-button click events, defaulting to the built-in click-handler.
+        if (this.backButtonClick.observers.length === 0) {
+            this.backButtonClick
+                .pipe(takeUntil(this.ngOnDestroy$))
+                .subscribe(this.backButtonDelegate.onClick.bind(this.backButtonDelegate));
+        }
+        this.backButtonDelegate.onClick = (event) => {
+            this.backButtonClick.emit(event);
+        };
+    }
     initializeTitle() {
         // Ensures initializeTitle() won't run, if already initialized
         if (this.hasPageTitle)
@@ -8369,7 +8472,7 @@ 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: WindowRef }, { 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" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()" } }, 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: "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 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}.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)}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: ["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()" } }, 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 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}.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)}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: ["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 });
 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 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}.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)}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"] }]
@@ -8401,6 +8504,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Output
             }], refresh: [{
                 type: Output
+            }], backButtonClick: [{
+                type: Output
             }], content: [{
                 type: ViewChild,
                 args: [IonContent, { static: true }]
@@ -8413,6 +8518,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], ionFooterElement: [{
                 type: ViewChild,
                 args: [IonFooter, { static: true, read: ElementRef }]
+            }], backButtonDelegate: [{
+                type: ViewChild,
+                args: [IonBackButtonDelegate, { static: false }]
             }], pageTitle: [{
                 type: ViewChild,
                 args: ['pageTitle', { static: false, read: ElementRef }]
@@ -8773,9 +8881,14 @@ class SegmentedControlComponent {
         this._disableChangeOnSwipe = false;
         this.segmentSelect = new EventEmitter();
     }
-    preventWrapperClick(event) {
+    /**
+     * Ensure that the click actually did originate from within the segment-button.
+     * We do not want to react to clicks on e.g. segment-btn-wrapper or badge.
+     */
+    preventOutsideClick(event) {
         if (event.target instanceof HTMLElement) {
-            if (event.target.classList.contains('segment-btn-wrapper')) {
+            const targetIsInSegmentBtn = !!event.target.closest('ion-segment-button');
+            if (!targetIsInSegmentBtn) {
                 event.stopImmediatePropagation();
             }
         }
@@ -8835,10 +8948,10 @@ 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: { segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n", 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.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer: coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background: var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}\n"], components: [{ type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "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"] }, { type: ChipComponent, selector: "kirby-chip", inputs: ["text", "isSelected"] }], 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"] }] });
+/** @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: { segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n", 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.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer: coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background: var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}\n"], components: [{ type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "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"] }, { type: ChipComponent, selector: "kirby-chip", inputs: ["text", "isSelected"] }], 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"] }] });
 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  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventWrapperClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n", 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.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer: coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background: var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}\n"] }]
+            args: [{ selector: 'kirby-segmented-control', host: { role: 'group' }, template: "<ion-segment\n  *ngIf=\"mode === 'default'\"\n  [value]=\"value?.id\"\n  [scrollable]=\"disableChangeOnSwipe\"\n  (ionChange)=\"onSegmentSelect($event.detail.value)\"\n  (click)=\"preventOutsideClick($event)\"\n>\n  <div *ngFor=\"let item of items\" class=\"segment-btn-wrapper\">\n    <ion-segment-button [value]=\"item.id\">{{ item.text }}</ion-segment-button>\n    <kirby-badge\n      *ngIf=\"item.badge\"\n      role=\"text\"\n      [attr.aria-label]=\"item.badge.description\"\n      [themeColor]=\"item.badge.themeColor\"\n    >\n      <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n        <kirby-icon\n          *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n          [customName]=\"item.badge.icon\"\n        ></kirby-icon>\n        <ng-template #defaultIconName>\n          <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n        </ng-template>\n      </ng-container>\n      <ng-template #badgeContent>\n        {{ item.badge.content }}\n      </ng-template>\n    </kirby-badge>\n  </div>\n</ion-segment>\n\n<ng-container *ngIf=\"mode === 'chip' || mode === 'compactChip'\">\n  <kirby-chip\n    *ngFor=\"let item of items; let index = index\"\n    [text]=\"item.text\"\n    [isSelected]=\"index === selectedIndex\"\n    (click)=\"onSegmentSelect(item.id)\"\n    role=\"button\"\n  ></kirby-chip>\n</ng-container>\n", 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.chip-mode{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden}@media (pointer: coarse){:host.chip-mode{scrollbar-width:none}:host.chip-mode::-webkit-scrollbar{display:none}}ion-segment{display:inline-flex;width:auto;overflow:visible;contain:unset;--background: var(--kirby-white);border-radius:999px}ion-segment-button{position:relative;min-height:40px;font-weight:400;font-size:14px;text-transform:none;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;margin:0}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}.segment-btn-wrapper{position:relative}:host-context(.plt-desktop) ion-segment-button:focus-within{outline-color:-webkit-focus-ring-color;outline-style:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: IconRegistryService }]; }, propDecorators: { mode: [{
                 type: Input
             }], _modeCssClass: [{
@@ -8917,10 +9030,10 @@ 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{width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{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;cursor:pointer}: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{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{-moz-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i2.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{width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{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;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
+            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{width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-button::-moz-range-thumb{-moz-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none;cursor:pointer}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], expand: [{