@kirbydesign/designsystem 11.11.4 → 12.0.0-dev-286cdc0

package/fesm2022/kirbydesign-designsystem-modal.mjs

@@ -1,1919 +1,2483 @@
-import * as i0 from '@angular/core';
-import { Optional, Component, InjectionToken, ElementRef, Input, ViewChild, ChangeDetectionStrategy, Injectable, Injector, RendererStyleFlags2, TemplateRef, HostListener, HostBinding, ViewChildren, ContentChild, EventEmitter, Output, Inject, inject } from '@angular/core';
-import * as i1$3 from '@angular/router';
-import { RouterModule, RouterOutlet, NavigationEnd, NavigationStart, ROUTES } from '@angular/router';
-import { of, isObservable, Subject, firstValueFrom, merge, defer, EMPTY } from 'rxjs';
-import { debounceTime, first, takeUntil, map, filter, startWith, pairwise, skipUntil } from 'rxjs/operators';
-import * as i3 from '@kirbydesign/designsystem/helpers';
-import { getIonModalDialogAncestor, DesignTokenHelper, observeContent, KirbyAnimation } from '@kirbydesign/designsystem/helpers';
-import * as i6 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { IconComponent } from '@kirbydesign/designsystem/icon';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import * as i1$1 from '@ionic/angular/standalone';
-import { IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, createAnimation, ModalController as ModalController$1, IonModal, IonFooter } from '@ionic/angular/standalone';
-import * as i1$2 from '@kirbydesign/designsystem/shared';
-import { ThemeColorDirective, inheritAriaLabelText } from '@kirbydesign/designsystem/shared';
-import * as i1 from '@kirbydesign/designsystem/types';
-import { EmptyStateComponent } from '@kirbydesign/designsystem/empty-state';
-import { CardComponent, CardHeaderComponent } from '@kirbydesign/designsystem/card';
-
-class Modal {
-}
-/**
- * WARNING: This is for internal use only and should not be used outside of Kirby.
- */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, Input, Optional, Output, RendererStyleFlags2, TemplateRef, ViewChild, ViewChildren, inject } from "@angular/core";
+import * as i5 from "@angular/router";
+import { NavigationEnd, NavigationStart, ROUTES, RouterModule, RouterOutlet } from "@angular/router";
+import { EMPTY, Subject, defer, firstValueFrom, fromEvent, isObservable, merge, of } from "rxjs";
+import { debounceTime, filter, first, map, pairwise, skipUntil, startWith, takeUntil } from "rxjs/operators";
+import * as i3 from "@kirbydesign/designsystem/helpers";
+import { DesignTokenHelper, KirbyAnimation, getIonModalDialogAncestor, observeContent } from "@kirbydesign/designsystem/helpers";
+import * as i2 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import { IconComponent } from "@kirbydesign/designsystem/icon";
+import { ButtonComponent } from "@kirbydesign/designsystem/button";
+import * as i1$1 from "@ionic/angular";
+import { IonButtons, IonContent, IonFooter, IonHeader, IonModal, IonTitle, IonToolbar, ModalController as ModalController$1, createAnimation } from "@ionic/angular";
+import * as i1 from "@kirbydesign/designsystem/shared";
+import { ThemeColorDirective, inheritAriaLabelText } from "@kirbydesign/designsystem/shared";
+import * as i1$2 from "@kirbydesign/designsystem/types";
+import { EmptyStateComponent } from "@kirbydesign/designsystem/empty-state";
+import { CardComponent, CardHeaderComponent } from "@kirbydesign/designsystem/card";
+var Modal = class {};
 var ModalElementType;
-(function (ModalElementType) {
-    ModalElementType[ModalElementType["PAGE_PROGRESS"] = 0] = "PAGE_PROGRESS";
-    ModalElementType[ModalElementType["FOOTER"] = 1] = "FOOTER";
-    ModalElementType[ModalElementType["TITLE"] = 2] = "TITLE";
+(function(ModalElementType) {
+	ModalElementType[ModalElementType["PAGE_PROGRESS"] = 0] = "PAGE_PROGRESS";
+	ModalElementType[ModalElementType["FOOTER"] = 1] = "FOOTER";
+	ModalElementType[ModalElementType["TITLE"] = 2] = "TITLE";
 })(ModalElementType || (ModalElementType = {}));
-/**
- * WARNING: This is for internal use only and should not be used outside of Kirby.
- */
-class ModalElementsAdvertiser {
-}
-/**
- * WARNING: This is for internal use only and should not be used outside of Kirby.
- */
-class ModalElementComponent {
-    get isContainedInModal() {
-        return this.modalElementsAdvertiser !== null;
-    }
-    constructor(modalElementType, elementRef, modalElementsAdvertiser) {
-        this.modalElementType = modalElementType;
-        this.elementRef = elementRef;
-        this.modalElementsAdvertiser = modalElementsAdvertiser;
-    }
-    ngAfterViewInit() {
-        if (this.isContainedInModal) {
-            this.modalElementsAdvertiser.addModalElement(this.modalElementType, this.elementRef);
-        }
-    }
-    ngOnDestroy() {
-        if (this.isContainedInModal) {
-            this.modalElementsAdvertiser.removeModalElement(this.modalElementType, this.elementRef);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalElementComponent, deps: [{ token: ModalElementType }, { token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ModalElementComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalElementComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: ModalElementType }, { type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
-                    type: Optional
-                }] }] });
-
-const COMPONENT_PROPS = new InjectionToken('componentProps');
-
-/*
-  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);
-        }
-    }
-}
-
-class AlertComponent {
-    set title(title) {
-        this.title$ = typeof title === 'string' ? of(title) : title;
-    }
-    set message(message) {
-        this.message$ = typeof message === 'string' ? of(message) : message;
-    }
-    set okBtn(okBtn) {
-        this.okBtn$ = typeof okBtn === 'string' ? of(okBtn) : okBtn;
-    }
-    set cancelBtn(cancelBtn) {
-        this.cancelBtn$ = typeof cancelBtn === 'string' ? of(cancelBtn) : cancelBtn;
-    }
-    constructor(elementRef, windowRef) {
-        this.elementRef = elementRef;
-        this.windowRef = windowRef;
-        this.BLUR_WRAPPER_DELAY_IN_MS = 50;
-        this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
-    }
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.alertWrapper.nativeElement.focus();
-            this.alertWrapper.nativeElement.blur();
-        }, this.BLUR_WRAPPER_DELAY_IN_MS);
-    }
-    onFocusChange() {
-        // This fixes an undesired scroll behaviour occurring on keyboard-tabbing
-        this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
-    }
-    onCancel() {
-        const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
-        ionModalElement?.dismiss(false);
-    }
-    onOk() {
-        const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
-        ionModalElement?.dismiss(true);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AlertComponent, isStandalone: true, selector: "kirby-alert", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okBtn: "okBtn", okBtnIsDestructive: "okBtnIsDestructive", cancelBtn: "cancelBtn" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    @if (cancelBtn$ | async; as cancelBtn) {\n      <button kirby-button attentionLevel=\"3\" class=\"cancel-btn\" (click)=\"onCancel()\">\n        {{ cancelBtn }}\n      </button>\n    }\n    <button\n      kirby-button\n      [size]=\"(cancelBtn$ | async) ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn$ | async }}\n    </button>\n  </div>\n</article>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}article{overflow:hidden;padding:24px 16px 16px}@media(max-width:320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px;flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - 4px);margin-inline:0}.buttongroup button:not(:only-child){flex-grow:1;min-width:unset}\n"], dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "title", "subtitle"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AlertComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [IconComponent, EmptyStateComponent, ButtonComponent, CommonModule, ThemeColorDirective], selector: 'kirby-alert', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    @if (cancelBtn$ | async; as cancelBtn) {\n      <button kirby-button attentionLevel=\"3\" class=\"cancel-btn\" (click)=\"onCancel()\">\n        {{ cancelBtn }}\n      </button>\n    }\n    <button\n      kirby-button\n      [size]=\"(cancelBtn$ | async) ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn$ | async }}\n    </button>\n  </div>\n</article>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}article{overflow:hidden;padding:24px 16px 16px}@media(max-width:320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px;flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - 4px);margin-inline:0}.buttongroup button:not(:only-child){flex-grow:1;min-width:unset}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.WindowRef }], propDecorators: { alertWrapper: [{
-                type: ViewChild,
-                args: ['alertWrapper', { static: true }]
-            }], title: [{
-                type: Input
-            }], message: [{
-                type: Input
-            }], iconName: [{
-                type: Input
-            }], iconThemeColor: [{
-                type: Input
-            }], okBtn: [{
-                type: Input
-            }], okBtnIsDestructive: [{
-                type: Input
-            }], cancelBtn: [{
-                type: Input
-            }] } });
-
-class AlertHelper {
-    constructor(ionicModalController) {
-        this.ionicModalController = ionicModalController;
-    }
-    async showAlert(config) {
-        const ionModal = await this.ionicModalController.create({
-            component: AlertComponent,
-            componentProps: this.getComponentProps(config),
-            cssClass: ['kirby-overlay', 'kirby-alert'],
-            mode: 'ios',
-            backdropDismiss: false,
-        });
-        await ionModal.present();
-        return {
-            dismiss: ionModal.dismiss.bind(ionModal),
-            onWillDismiss: ionModal.onWillDismiss(),
-            onDidDismiss: ionModal.onDidDismiss(),
-        };
-    }
-    getComponentProps(config) {
-        return {
-            ...config,
-            okBtn: this.getOkBtn(config),
-            okBtnIsDestructive: this.getOkBtnIsDestructive(config),
-            iconName: config.icon && config.icon.name,
-            iconThemeColor: config.icon && config.icon.themeColor,
-        };
-    }
-    getOkBtn(config) {
-        let text;
-        if (config.okBtn) {
-            if (typeof config.okBtn === 'string' || isObservable(config.okBtn)) {
-                text = config.okBtn;
-            }
-            else {
-                text = config.okBtn?.text;
-            }
-        }
-        return text;
-    }
-    getOkBtnIsDestructive(config) {
-        return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AlertHelper, deps: [{ token: i1$1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AlertHelper }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AlertHelper, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ModalController }] });
-
-class CanDismissHelper {
-    constructor(alertHelper) {
-        this.alertHelper = alertHelper;
-    }
-    getCanDismissCallback(callback) {
-        return async () => {
-            const result = await callback();
-            if (typeof result === 'boolean')
-                return result;
-            const canCloseModal = await this.showAlert(result);
-            return canCloseModal;
-        };
-    }
-    async showAlert(config) {
-        const alert = await this.alertHelper.showAlert(config);
-        const result = await alert.onWillDismiss;
-        return result.data;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CanDismissHelper, deps: [{ token: AlertHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CanDismissHelper }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: CanDismissHelper, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: AlertHelper }] });
-
+var ModalElementsAdvertiser = class {};
+var ModalElementComponent = class ModalElementComponent {
+	get isContainedInModal() {
+		return this.modalElementsAdvertiser !== null;
+	}
+	constructor(modalElementType, elementRef, modalElementsAdvertiser) {
+		this.modalElementType = modalElementType;
+		this.elementRef = elementRef;
+		this.modalElementsAdvertiser = modalElementsAdvertiser;
+	}
+	ngAfterViewInit() {
+		if (this.isContainedInModal) this.modalElementsAdvertiser.addModalElement(this.modalElementType, this.elementRef);
+	}
+	ngOnDestroy() {
+		if (this.isContainedInModal) this.modalElementsAdvertiser.removeModalElement(this.modalElementType, this.elementRef);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalElementComponent,
+			deps: [
+				{ token: ModalElementType },
+				{ token: i0.ElementRef },
+				{
+					token: ModalElementsAdvertiser,
+					optional: true
+				}
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: ModalElementComponent,
+			isStandalone: false,
+			selector: "ng-component",
+			ngImport: i0,
+			template: "",
+			isInline: true,
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalElementComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			template: "",
+			standalone: false,
+			changeDetection: ChangeDetectionStrategy.Eager
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: ModalElementType },
+		{ type: i0.ElementRef },
+		{
+			type: ModalElementsAdvertiser,
+			decorators: [{ type: Optional }]
+		}
+	]
+});
+const COMPONENT_PROPS = new InjectionToken("componentProps");
+var ModalElementsMoverDelegate = class {
+	constructor(renderer, elementRef) {
+		this.renderer = renderer;
+		this.elementRef = elementRef;
+	}
+	addFooter(footerElementRef) {
+		this.moveChild(footerElementRef, this.elementRef);
+	}
+	removeFooter(footerElementRef) {
+		this.removeChild(footerElementRef);
+	}
+	addPageProgress(pageProgressElementRef, ionToolbarElement) {
+		this.moveChild(pageProgressElementRef, ionToolbarElement);
+	}
+	removePageProgress(pageProgressElementRef) {
+		this.removeChild(pageProgressElementRef);
+	}
+	addTitle(titleElementRef, contentTitleElement, hasCollapsibleTitle, ionTitleElement) {
+		this.moveChild(titleElementRef, ionTitleElement);
+		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);
+	}
+};
+var AlertComponent = class AlertComponent {
+	set title(title) {
+		this.title$ = typeof title === "string" ? of(title) : title;
+	}
+	set message(message) {
+		this.message$ = typeof message === "string" ? of(message) : message;
+	}
+	set okBtn(okBtn) {
+		this.okBtn$ = typeof okBtn === "string" ? of(okBtn) : okBtn;
+	}
+	set cancelBtn(cancelBtn) {
+		this.cancelBtn$ = typeof cancelBtn === "string" ? of(cancelBtn) : cancelBtn;
+	}
+	constructor(elementRef, windowRef) {
+		this.elementRef = elementRef;
+		this.windowRef = windowRef;
+		this.BLUR_WRAPPER_DELAY_IN_MS = 50;
+		this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
+	}
+	ngAfterViewInit() {
+		setTimeout(() => {
+			this.alertWrapper.nativeElement.focus();
+			this.alertWrapper.nativeElement.blur();
+		}, this.BLUR_WRAPPER_DELAY_IN_MS);
+	}
+	onFocusChange() {
+		this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
+	}
+	onCancel() {
+		this.elementRef.nativeElement.closest("ion-modal")?.dismiss(false);
+	}
+	onOk() {
+		this.elementRef.nativeElement.closest("ion-modal")?.dismiss(true);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: AlertComponent,
+			deps: [{ token: i0.ElementRef }, { token: i1$2.WindowRef }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: AlertComponent,
+			isStandalone: true,
+			selector: "kirby-alert",
+			inputs: {
+				title: "title",
+				message: "message",
+				iconName: "iconName",
+				iconThemeColor: "iconThemeColor",
+				okBtn: "okBtn",
+				okBtnIsDestructive: "okBtnIsDestructive",
+				cancelBtn: "cancelBtn"
+			},
+			host: { properties: { "class.ion-page": "false" } },
+			viewQueries: [{
+				propertyName: "alertWrapper",
+				first: true,
+				predicate: ["alertWrapper"],
+				descendants: true,
+				static: true
+			}],
+			ngImport: i0,
+			template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    @if (cancelBtn$ | async; as cancelBtn) {\n      <button kirby-button attentionLevel=\"3\" class=\"cancel-btn\" (click)=\"onCancel()\">\n        {{ cancelBtn }}\n      </button>\n    }\n    <button\n      kirby-button\n      [size]=\"(cancelBtn$ | async) ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn$ | async }}\n    </button>\n  </div>\n</article>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}article{overflow:hidden;padding:var(--kirby-spacing-s);padding-top:var(--kirby-spacing-m);color:var(--kirby-color-content-base)}@media(max-width:320px){article{padding:var(--kirby-spacing-xxs)}}.buttongroup{display:flex;justify-content:center;column-gap:var(--kirby-spacing-xxs);flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - var(--kirby-spacing-xxs) / 2);margin-inline:0}.buttongroup button:not(:only-child){flex-grow:1;min-width:unset}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: EmptyStateComponent,
+					selector: "kirby-empty-state",
+					inputs: [
+						"iconName",
+						"title",
+						"subtitle",
+						"themeColor"
+					]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
+					inputs: [
+						"attentionLevel",
+						"noDecoration",
+						"themeColor",
+						"expand",
+						"isFloating",
+						"size",
+						"showIconOnly"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: CommonModule
+				},
+				{
+					kind: "directive",
+					type: ThemeColorDirective,
+					selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]",
+					inputs: ["themeColor"]
+				},
+				{
+					kind: "pipe",
+					type: i2.AsyncPipe,
+					name: "async"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: AlertComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [
+				IconComponent,
+				EmptyStateComponent,
+				ButtonComponent,
+				CommonModule,
+				ThemeColorDirective
+			],
+			selector: "kirby-alert",
+			host: { "[class.ion-page]": "false" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    @if (cancelBtn$ | async; as cancelBtn) {\n      <button kirby-button attentionLevel=\"3\" class=\"cancel-btn\" (click)=\"onCancel()\">\n        {{ cancelBtn }}\n      </button>\n    }\n    <button\n      kirby-button\n      [size]=\"(cancelBtn$ | async) ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn$ | async }}\n    </button>\n  </div>\n</article>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}article{overflow:hidden;padding:var(--kirby-spacing-s);padding-top:var(--kirby-spacing-m);color:var(--kirby-color-content-base)}@media(max-width:320px){article{padding:var(--kirby-spacing-xxs)}}.buttongroup{display:flex;justify-content:center;column-gap:var(--kirby-spacing-xxs);flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - var(--kirby-spacing-xxs) / 2);margin-inline:0}.buttongroup button:not(:only-child){flex-grow:1;min-width:unset}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.WindowRef }],
+	propDecorators: {
+		alertWrapper: [{
+			type: ViewChild,
+			args: ["alertWrapper", { static: true }]
+		}],
+		title: [{ type: Input }],
+		message: [{ type: Input }],
+		iconName: [{ type: Input }],
+		iconThemeColor: [{ type: Input }],
+		okBtn: [{ type: Input }],
+		okBtnIsDestructive: [{ type: Input }],
+		cancelBtn: [{ type: Input }]
+	}
+});
+var AlertHelper = class AlertHelper {
+	constructor(ionicModalController) {
+		this.ionicModalController = ionicModalController;
+	}
+	async showAlert(config) {
+		const ionModal = await this.ionicModalController.create({
+			component: AlertComponent,
+			componentProps: this.getComponentProps(config),
+			cssClass: ["kirby-overlay", "kirby-alert"],
+			mode: "ios",
+			backdropDismiss: false
+		});
+		await ionModal.present();
+		return {
+			dismiss: ionModal.dismiss.bind(ionModal),
+			onWillDismiss: ionModal.onWillDismiss(),
+			onDidDismiss: ionModal.onDidDismiss()
+		};
+	}
+	getComponentProps(config) {
+		return {
+			...config,
+			okBtn: this.getOkBtn(config),
+			okBtnIsDestructive: this.getOkBtnIsDestructive(config),
+			iconName: config.icon && config.icon.name,
+			iconThemeColor: config.icon && config.icon.themeColor
+		};
+	}
+	getOkBtn(config) {
+		let text;
+		if (config.okBtn) {
+			if (typeof config.okBtn === "string" || isObservable(config.okBtn)) text = config.okBtn;
+			else text = config.okBtn?.text;
+		}
+		return text;
+	}
+	getOkBtnIsDestructive(config) {
+		return typeof config.okBtn === "object" ? config.okBtn.isDestructive : void 0;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: AlertHelper,
+			deps: [{ token: i1$1.ModalController }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: AlertHelper
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: AlertHelper,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [{ type: i1$1.ModalController }]
+});
+var CanDismissHelper = class CanDismissHelper {
+	constructor(alertHelper) {
+		this.alertHelper = alertHelper;
+	}
+	getCanDismissCallback(callback) {
+		return async () => {
+			const result = await callback();
+			if (typeof result === "boolean") return result;
+			return await this.showAlert(result);
+		};
+	}
+	async showAlert(config) {
+		return (await (await this.alertHelper.showAlert(config)).onWillDismiss).data;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: CanDismissHelper,
+			deps: [{ token: AlertHelper }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: CanDismissHelper
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: CanDismissHelper,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [{ type: AlertHelper }]
+});
 const contentScrollDebounceTimeInMS = 10;
 const contentScrolledOffsetInPixels = 4;
-class ModalWrapperComponent {
-    get _hasCollapsibleTitle() {
-        return !!this.config?.collapseTitle;
-    }
-    static { this.KEYBOARD_HIDE_DELAY_IN_MS = 100; }
-    set scrollDisabled(disabled) {
-        this.ionContent.scrollY = !disabled;
-    }
-    set canDismiss(callback) {
-        this.ionModalElement.canDismiss = this.canDismissHelper.getCanDismissCallback(callback);
-    }
-    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._contentTitleElement;
-    }
-    get intersectionObserver() {
-        if (!this._intersectionObserver) {
-            this._intersectionObserver = this.createModalWrapperIntersectionObserver();
-        }
-        return this._intersectionObserver;
-    }
-    get _isDrawer() {
-        return this.config.flavor === 'drawer';
-    }
-    constructor(changeDetector, injector, elementRef, renderer, zone, resizeObserverService, windowRef, platform, canDismissHelper, environmentInjector, translations) {
-        this.changeDetector = changeDetector;
-        this.injector = injector;
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.zone = zone;
-        this.resizeObserverService = resizeObserverService;
-        this.windowRef = windowRef;
-        this.platform = platform;
-        this.canDismissHelper = canDismissHelper;
-        this.environmentInjector = environmentInjector;
-        this.translations = translations;
-        this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
-        this.VIEWPORT_RESIZE_DEBOUNCE_TIME = 100;
-        this.keyboardVisible = false;
-        this.toolbarButtons = [];
-        this.delayedClose = () => { };
-        this.viewportResized = false;
-        this.ionModalDidPresent = new Subject();
-        this.didPresent = firstValueFrom(this.ionModalDidPresent);
-        this.ionModalWillDismiss = new Subject();
-        this.willClose = firstValueFrom(this.ionModalWillDismiss);
-        this.viewportResize = new Subject();
-        this.viewportResize$ = this.viewportResize
-            .asObservable()
-            .pipe(debounceTime(this.VIEWPORT_RESIZE_DEBOUNCE_TIME));
-        this.destroy$ = new Subject();
-        this.willClose$ = this.ionModalWillDismiss.pipe(first());
-        this._currentFooter = null;
-        this.setAriaLabelFromTitleContent = () => {
-            const titleTextContent = this.ionTitleElement?.nativeElement.textContent;
-            if (this.ionModalDialog && titleTextContent) {
-                this.renderer.setAttribute(this.ionModalDialog, 'aria-label', titleTextContent);
-            }
-        };
-        this.setViewportHeight();
-        this.observeViewportResize();
-        this.modalElementsMoverDelegate = new ModalElementsMoverDelegate(renderer, elementRef);
-    }
-    ngOnInit() {
-        this.ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
-        this.ionModalDialog = getIonModalDialogAncestor(this.elementRef.nativeElement);
-        this.initializeSizing();
-        this.initializeModalRoute();
-        this.listenForIonModalDidPresent();
-        this.listenForIonModalWillDismiss();
-        this.listenForScroll();
-        this.initializeResizeModalToModalWrapper();
-        this.focusTitleOnDidPresent();
-        this.componentPropsInjector = Injector.create({
-            providers: [{ provide: COMPONENT_PROPS, useValue: this.config.componentProps }],
-            parent: this.injector,
-        });
-        this.modalWrapperInjector = Injector.create({
-            providers: [{ provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent }],
-            parent: this.injector,
-        });
-    }
-    ngAfterViewInit() {
-        if (this.toolbarButtonsQuery) {
-            this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement);
-        }
-        this.setAriaLabel();
-    }
-    set currentFooter(footer) {
-        if (this._currentFooter) {
-            this.resizeObserverService.unobserve(this._currentFooter);
-        }
-        this._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);
-            });
-        }
-    }
-    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$)
-                .pipe(takeUntil(this.destroy$))
-                .subscribe(() => {
-                // wait for template to render
-                setTimeout(() => {
-                    const domRect = this.elementRef.nativeElement.getBoundingClientRect();
-                    const document = this.windowRef.nativeWindow.document.documentElement;
-                    const right = document.clientWidth - domRect.right;
-                    this.renderer.setStyle(this.ionModalElement, 'top', `${domRect.top}px`);
-                    this.renderer.setStyle(this.ionModalElement, 'left', `${domRect.left}px`);
-                    this.renderer.setStyle(this.ionModalElement, 'right', `${right}px`);
-                });
-            });
-        }
-    }
-    initializeSizing() {
-        if (this.config.size === 'full-height')
-            return;
-        this.patchScrollElementSize();
-        this.observeHeaderResize();
-        this.observeModalFullHeight();
-    }
-    initializeModalRoute() {
-        if (this.config.modalRoute) {
-            this.onSiblingModalRouteActivated(this.config.siblingModalRouteActivated$);
-            // Load component from modal-route inside router-outlet:
-            this.routerOutlet.activateWith(this.config.modalRoute, this.environmentInjector);
-        }
-    }
-    onSiblingModalRouteActivated(siblingModalRouteActivated$) {
-        if (!siblingModalRouteActivated$)
-            return;
-        siblingModalRouteActivated$.pipe(takeUntil(this.willClose$)).subscribe((route) => {
-            if (this.routerOutlet.isActivated) {
-                this.routerOutlet.deactivate();
-            }
-            this.routerOutlet.activateWith(route, this.environmentInjector);
-            this.focusTitle();
-        });
-    }
-    patchScrollElementSize() {
-        const supportsCssShadowParts = 'part' in HTMLElement.prototype;
-        if (supportsCssShadowParts)
-            return;
-        this.ionContent.getScrollElement().then((scrollElement) => {
-            this.renderer.setStyle(scrollElement, 'height', '100%');
-            this.renderer.setStyle(scrollElement, 'position', 'relative');
-            if (this.config.flavor === 'drawer') {
-                this.renderer.setStyle(scrollElement, 'transition', 'padding-bottom ' + DesignTokenHelper.softKeyboardTransitionLeave);
-            }
-        });
-    }
-    observeModalFullHeight() {
-        const ionModalWrapper = this.getIonModalWrapperElement();
-        if (!ionModalWrapper)
-            return;
-        // Start observing when modal has finished animating:
-        this.didPresent.then(() => {
-            this.intersectionObserver.observe(ionModalWrapper);
-        });
-    }
-    // Extracted into function for ease of testing
-    getIonModalWrapperElement() {
-        return this.ionModalElement.shadowRoot.querySelector('.modal-wrapper');
-    }
-    observeHeaderResize() {
-        this.resizeObserverService.observe(this.ionHeaderElement.nativeElement, (entry) => {
-            const [property, pixelValue] = ['--header-height', `${entry.contentRect.height}px`];
-            this.setCssVar(this.elementRef.nativeElement, property, pixelValue);
-        });
-    }
-    listenForIonModalDidPresent() {
-        if (this.ionModalElement) {
-            this.ionModalElement.addEventListener('ionModalDidPresent', () => {
-                this.ionModalDidPresent.next();
-                this.ionModalDidPresent.complete();
-            });
-        }
-    }
-    listenForIonModalWillDismiss() {
-        if (this.ionModalElement) {
-            this.ionModalElement.addEventListener('ionModalWillDismiss', () => {
-                this.ionModalWillDismiss.next();
-                this.ionModalWillDismiss.complete();
-            });
-        }
-    }
-    listenForScroll() {
-        const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`;
-        const mediaQuery = this.windowRef.nativeWindow.matchMedia(query);
-        const enableScrollEvents = (listOrEvent) => {
-            const isDesktop = listOrEvent.matches;
-            this.scrollEventsEnabled = !isDesktop;
-        };
-        enableScrollEvents(mediaQuery);
-        mediaQuery.onchange = enableScrollEvents;
-        // Runs scroll subscription outside zone to avoid excessive amount of CD cycles
-        // when ionScroll emits.
-        this.zone.runOutsideAngular(() => {
-            // Always subscribe as ionScroll only emits when scrollEventsEnabled is true
-            this.ionContent.ionScroll
-                .pipe(debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.destroy$))
-                .subscribe((scrollInfo) => {
-                const contentScrolledPastOffset = scrollInfo.scrollTop > contentScrolledOffsetInPixels;
-                if (contentScrolledPastOffset !== this.isContentScrolled) {
-                    this.isContentScrolled = contentScrolledPastOffset;
-                    this.changeDetector.detectChanges();
-                }
-            });
-        });
-    }
-    observeTitleContentChanges() {
-        this.mutationObserverUnobserveFn = observeContent(this.ionTitleElement.nativeElement, this.setAriaLabelFromTitleContent);
-    }
-    setAriaLabel() {
-        const ariaLabel = this.config.htmlAttributes?.['aria-label'];
-        const ionModalElementDialog = getIonModalDialogAncestor(this.ionModalElement);
-        if (ionModalElementDialog && ariaLabel) {
-            this.renderer.setAttribute(ionModalElementDialog, 'aria-label', ariaLabel);
-        }
-        else {
-            this.setAriaLabelFromTitleContent();
-            this.observeTitleContentChanges();
-        }
-    }
-    focusTitleOnDidPresent() {
-        this.ionModalDidPresent.pipe(takeUntil(this.willClose$)).subscribe(() => {
-            this.focusTitle();
-        });
-    }
-    focusTitle() {
-        // Use queueMicrotask to defer our focus until after Ionic has saved a reference
-        // to the element that should have focus restored when modal is closed.
-        // https://github.com/ionic-team/ionic-framework/blob/v8.6.1/core/src/utils/overlays.ts#L592
-        queueMicrotask(() => {
-            const focusAlreadyInModalContent = this.ionContentElement?.nativeElement.contains(document.activeElement);
-            if (focusAlreadyInModalContent)
-                return;
-            this.ionTitleElement?.nativeElement.focus();
-        });
-    }
-    scrollToTop(scrollDuration) {
-        this.ionContent.scrollToTop(scrollDuration || 0);
-    }
-    scrollToBottom(scrollDuration) {
-        this.ionContent.scrollToBottom(scrollDuration || 0);
-    }
-    async close(data) {
-        if (!this.ionModalElement) {
-            return;
-        }
-        if (!this.keyboardVisible || !this.viewportResized) {
-            // No keyboard visible or viewport not resized:
-            // Dismiss modal and return:
-            clearTimeout(this.delayedCloseTimeoutId);
-            await this.ionModalElement.dismiss(data);
-            return;
-        }
-        // Keyboard visible:
-        // Blur active element and wait for keyboard to hide,
-        // then dismiss modal and return:
-        this.blurActiveElement();
-        return new Promise((resolve) => {
-            this.delayedClose = async () => {
-                await this.ionModalElement.dismiss(data);
-                resolve();
-            };
-            this.delayedCloseTimeoutId = setTimeout(this.delayedClose, ModalWrapperComponent.KEYBOARD_HIDE_DELAY_IN_MS);
-        });
-    }
-    onFocusChange() {
-        // This fixes an undesired scroll behaviour occurring on keyboard-tabbing backwards (with shift+tab):
-        this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
-    }
-    _onKeyboardShow(keyboardHeight) {
-        this.setKeyboardVisibility(keyboardHeight);
-    }
-    _onKeyboardHide() {
-        this.setKeyboardVisibility(0);
-    }
-    toggleContentMaxHeight(freeze) {
-        const shouldToggleMaxHeight = this.config.flavor === 'modal' && this.platform.isPhabletOrBigger();
-        if (!shouldToggleMaxHeight)
-            return;
-        const style = 'max-height';
-        const contentElement = this.ionContentElement.nativeElement;
-        this.zone.run(() => {
-            if (freeze) {
-                const contentHeight = contentElement.offsetHeight;
-                this.renderer.setStyle(contentElement, style, `${contentHeight}px`);
-            }
-            else {
-                this.renderer.removeStyle(contentElement, style);
-            }
-        });
-    }
-    setKeyboardVisibility(keyboardHeight) {
-        const keyboardAlreadyVisible = keyboardHeight > 0 && this.keyboardVisible;
-        const keyboardAlreadyHidden = keyboardHeight === 0 && !this.keyboardVisible;
-        if (keyboardAlreadyVisible || keyboardAlreadyHidden)
-            return;
-        this.keyboardVisible = keyboardHeight > 0;
-        this.toggleContentMaxHeight(this.keyboardVisible);
-        this.setKeyboardOverlap(keyboardHeight);
-    }
-    // Fall back to the live viewport height: initialViewportHeight (from a body ResizeObserver) is 0 in Ionic apps.
-    getViewportHeight() {
-        return this.initialViewportHeight || this.windowRef.nativeWindow.innerHeight;
-    }
-    getKeyboardOverlap(keyboardHeight, element) {
-        const viewportHeight = this.getViewportHeight();
-        if (keyboardHeight <= 0 || !element || !viewportHeight)
-            return 0;
-        const elementDistanceAboveBottomOfScreen = Math.floor(viewportHeight - element.getBoundingClientRect().bottom);
-        return Math.max(keyboardHeight - elementDistanceAboveBottomOfScreen, 0);
-    }
-    setCssVar(element, property, value) {
-        this.zone.run(() => this.renderer.setStyle(element, property, value, RendererStyleFlags2.DashCase));
-    }
-    toggleCssClass(element, klass, condition) {
-        this.zone.run(() => condition ? this.renderer.addClass(element, klass) : this.renderer.removeClass(element, klass));
-    }
-    setKeyboardOverlap(keyboardHeight) {
-        this.toggleCssClass(this.elementRef.nativeElement, 'keyboard-visible', keyboardHeight > 0);
-        const keyboardOverlap = this.getKeyboardOverlap(keyboardHeight, this.elementRef.nativeElement);
-        let snapFooterToKeyboard = false;
-        const embeddedFooterElement = this.currentFooter;
-        if (embeddedFooterElement) {
-            this.setCssVar(embeddedFooterElement, '--keyboard-offset', `${keyboardOverlap}px`);
-            snapFooterToKeyboard = embeddedFooterElement.classList.contains('snap-to-keyboard');
-        }
-        const contentElement = this.ionContentElement.nativeElement;
-        const contentKeyboardOffset = snapFooterToKeyboard
-            ? keyboardOverlap
-            : this.getKeyboardOverlap(keyboardHeight, contentElement);
-        this.setCssVar(contentElement, '--keyboard-offset', `${contentKeyboardOffset}px`);
-    }
-    onHeaderTouchStart(event) {
-        if (this.keyboardVisible) {
-            const isToolbarButtonTouch = this.toolbarButtons.some((button) => {
-                return (event.target instanceof HTMLElement &&
-                    (event.target === button || button.contains(event.target)));
-            });
-            // Prevent blur if event target is a toolbar button
-            // (to allow tap event to fire):
-            if (!isToolbarButtonTouch) {
-                this.blurActiveElement();
-            }
-        }
-    }
-    _onWindowResize() {
-        this.setViewportHeight();
-    }
-    setViewportHeight() {
-        const vh = (this.windowRef.nativeWindow.innerHeight * 0.01).toFixed(2);
-        this.setCssVar(this.elementRef.nativeElement, '--vh', `${vh}px`);
-    }
-    observeViewportResize() {
-        this.resizeObserverService.observe(this.windowRef.nativeWindow.document.body, (entry) => this.onViewportResize(entry));
-    }
-    onViewportResize(entry) {
-        if (!this.initialViewportHeight) {
-            // Initial observe callback, register initial height:
-            this.initialViewportHeight = entry.contentRect.height;
-            return;
-        }
-        this.viewportResized = entry.contentRect.height !== this.initialViewportHeight;
-        if (!this.viewportResized) {
-            // We are back to initial view port height, check for pending close func:
-            if (this.delayedCloseTimeoutId) {
-                clearTimeout(this.delayedCloseTimeoutId);
-                this.delayedClose();
-            }
-        }
-        this.viewportResize.next();
-    }
-    blurActiveElement() {
-        const BLUR_TARGET_SELECTOR = 'input, textarea';
-        if (this.keyboardVisible) {
-            if (document.activeElement instanceof HTMLElement &&
-                document.activeElement.matches(BLUR_TARGET_SELECTOR)) {
-                document.activeElement.blur();
-            }
-        }
-    }
-    createModalWrapperIntersectionObserver() {
-        const callback = (entries) => {
-            const entry = entries[0];
-            const isTouchingViewport = entry.intersectionRatio < 1;
-            if (isTouchingViewport) {
-                this.ionModalElement.classList.add('full-height');
-            }
-            else {
-                this.ionModalElement.classList.remove('full-height');
-            }
-        };
-        // Set explicit viewport root if within iframe:
-        const root = this.windowRef.nativeWindow.frameElement
-            ? this.windowRef.nativeWindow.document // Cast to `any` as Typescript lib.d.ts doesnt support Document type yet
-            : undefined;
-        const options = {
-            rootMargin: '0px 0px -1px 0px', // `bottom: -1px` allows checking when the modal bottom is touching the viewport
-            root,
-            threshold: [0.99, 1],
-        };
-        return new IntersectionObserver(callback, options);
-    }
-    ngOnDestroy() {
-        if (this.routerOutlet.isActivated) {
-            this.routerOutlet.deactivate();
-        }
-        //clean up the observer
-        this.mutationObserverUnobserveFn?.();
-        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.currentFooter);
-        }
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$2.ResizeObserverService }, { token: i1.WindowRef }, { token: i3.PlatformService }, { token: CanDismissHelper }, { token: i0.EnvironmentInjector }, { token: i1$2.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ModalWrapperComponent, isStandalone: true, selector: "kirby-modal-wrapper", inputs: { scrollDisabled: "scrollDisabled", config: "config", content: "content" }, 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 },
-        ], queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], 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\n  role=\"presentation\"\n  [class.content-scrolled]=\"isContentScrolled\"\n  (touchstart)=\"onHeaderTouchStart($event)\"\n>\n  <ion-toolbar>\n    <ion-title role=\"heading\" aria-level=\"2\" tabindex=\"-1\"></ion-title>\n    @if (config.flavor === 'drawer' && config.drawerSupplementaryAction) {\n      <ion-buttons slot=\"secondary\">\n        <button\n          kirby-button\n          attentionLevel=\"3\"\n          size=\"md\"\n          (click)=\"config.drawerSupplementaryAction.action($event)\"\n        >\n          <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n        </button>\n      </ion-buttons>\n    }\n    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\n        [attr.aria-label]=\"translations.get('close')\"\n        (click)=\"close()\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n  @if (_hasCollapsibleTitle) {\n    <ion-header collapse=\"condense\">\n      <ion-toolbar>\n        <span class=\"kirby-text-xlarge\" #contentTitle></span>\n      </ion-toolbar>\n    </ion-header>\n  }\n\n  <!-- Outlet for ModalController -->\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n\n  <!-- Outlet for projected content -->\n  <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n  <!-- Outlet for route-based modal -->\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: 8px;--padding-end: 8px;--padding-bottom: 7px;--padding-top: 8px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));border-bottom:1px solid transparent;transition:border-color .2s linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: 16px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-medium)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-medium)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer: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.kirby-drawer: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.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){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.kirby-drawer.interact-with-background) 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.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}: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:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:clamp(13px,1rem,32px);font-weight:700;outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}@media(min-width:768px){ion-content{--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: 32px;--padding-start: 8px;--padding-end: 8px;border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: 16px;--padding-end: 16px}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [
-                        RouterModule,
-                        ButtonComponent,
-                        IconComponent,
-                        CommonModule,
-                        IonHeader,
-                        IonToolbar,
-                        IonTitle,
-                        IonButtons,
-                        IonContent,
-                    ], selector: 'kirby-modal-wrapper', providers: [
-                        { provide: Modal, useExisting: ModalWrapperComponent },
-                        { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
-                    ], template: "<ion-header\n  role=\"presentation\"\n  [class.content-scrolled]=\"isContentScrolled\"\n  (touchstart)=\"onHeaderTouchStart($event)\"\n>\n  <ion-toolbar>\n    <ion-title role=\"heading\" aria-level=\"2\" tabindex=\"-1\"></ion-title>\n    @if (config.flavor === 'drawer' && config.drawerSupplementaryAction) {\n      <ion-buttons slot=\"secondary\">\n        <button\n          kirby-button\n          attentionLevel=\"3\"\n          size=\"md\"\n          (click)=\"config.drawerSupplementaryAction.action($event)\"\n        >\n          <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n        </button>\n      </ion-buttons>\n    }\n    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\n        [attr.aria-label]=\"translations.get('close')\"\n        (click)=\"close()\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n  @if (_hasCollapsibleTitle) {\n    <ion-header collapse=\"condense\">\n      <ion-toolbar>\n        <span class=\"kirby-text-xlarge\" #contentTitle></span>\n      </ion-toolbar>\n    </ion-header>\n  }\n\n  <!-- Outlet for ModalController -->\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n\n  <!-- Outlet for projected content -->\n  <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n  <!-- Outlet for route-based modal -->\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: 8px;--padding-end: 8px;--padding-bottom: 7px;--padding-top: 8px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));border-bottom:1px solid transparent;transition:border-color .2s linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: 16px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-medium)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-medium)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer: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.kirby-drawer: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.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){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.kirby-drawer.interact-with-background) 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.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}: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:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:clamp(13px,1rem,32px);font-weight:700;outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}@media(min-width:768px){ion-content{--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: 32px;--padding-start: 8px;--padding-end: 8px;border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: 16px;--padding-end: 16px}}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1$2.ResizeObserverService }, { type: i1.WindowRef }, { type: i3.PlatformService }, { type: CanDismissHelper }, { type: i0.EnvironmentInjector }, { type: i1$2.TranslationService }], propDecorators: { _hasCollapsibleTitle: [{
-                type: HostBinding,
-                args: ['class.collapsible-title']
-            }], scrollDisabled: [{
-                type: Input
-            }], config: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], templateRef: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], toolbarButtonsQuery: [{
-                type: ViewChildren,
-                args: [ButtonComponent, { read: ElementRef }]
-            }], ionContent: [{
-                type: ViewChild,
-                args: [IonContent, { static: true }]
-            }], ionContentElement: [{
-                type: ViewChild,
-                args: [IonContent, { static: true, read: ElementRef }]
-            }], ionHeaderElement: [{
-                type: ViewChild,
-                args: [IonHeader, { static: true, read: ElementRef }]
-            }], ionToolbarElement: [{
-                type: ViewChild,
-                args: [IonToolbar, { static: true, read: ElementRef }]
-            }], ionTitleElement: [{
-                type: ViewChild,
-                args: [IonTitle, { static: true, read: ElementRef }]
-            }], routerOutlet: [{
-                type: ViewChild,
-                args: [RouterOutlet, { static: true }]
-            }], _contentTitleElement: [{
-                type: ViewChild,
-                args: ['contentTitle', { read: ElementRef }]
-            }], _isDrawer: [{
-                type: HostBinding,
-                args: ['class.drawer']
-            }], onFocusChange: [{
-                type: HostListener,
-                args: ['window:focus']
-            }, {
-                type: HostListener,
-                args: ['window:focusout']
-            }], _onKeyboardShow: [{
-                type: HostListener,
-                args: ['window:ionKeyboardDidShow', ['$event.detail.keyboardHeight']]
-            }, {
-                type: HostListener,
-                args: ['window:keyboardWillShow', ['$event.keyboardHeight']]
-            }], _onKeyboardHide: [{
-                type: HostListener,
-                args: ['window:ionKeyboardDidHide']
-            }, {
-                type: HostListener,
-                args: ['window:keyboardWillHide']
-            }], _onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
-
-class DrawerSupplementaryAction {
-}
-
-class ModalCompactWrapperComponent {
-    constructor(injector, elementRef, windowRef, canDismissHelper, renderer) {
-        this.injector = injector;
-        this.elementRef = elementRef;
-        this.windowRef = windowRef;
-        this.canDismissHelper = canDismissHelper;
-        this.renderer = renderer;
-        this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
-        this.scrollDisabled = false;
-        this.ionModalDidPresent = new Subject();
-        this.ionModalWillDismiss = new Subject();
-        this.didPresent = firstValueFrom(this.ionModalDidPresent);
-        this.willClose = firstValueFrom(this.ionModalWillDismiss);
-    }
-    ngOnInit() {
-        this.ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
-        this.setAriaLabel();
-        this.listenForIonModalDidPresent();
-        this.listenForIonModalWillDismiss();
-        this.componentPropsInjector = Injector.create({
-            providers: [{ provide: COMPONENT_PROPS, useValue: this.config.componentProps }],
-            parent: this.injector,
-        });
-    }
-    listenForIonModalDidPresent() {
-        if (this.ionModalElement) {
-            this.ionModalElement.addEventListener('ionModalDidPresent', () => {
-                this.ionModalDidPresent.next();
-                this.ionModalDidPresent.complete();
-            });
-        }
-    }
-    listenForIonModalWillDismiss() {
-        if (this.ionModalElement) {
-            this.ionModalElement.addEventListener('ionModalWillDismiss', () => {
-                this.ionModalWillDismiss.next();
-                this.ionModalWillDismiss.complete();
-            });
-        }
-    }
-    setAriaLabel() {
-        const ionModalElementDialog = getIonModalDialogAncestor(this.ionModalElement);
-        const ariaLabel = this.config.htmlAttributes?.['aria-label'];
-        if (ionModalElementDialog && ariaLabel) {
-            this.renderer.setAttribute(ionModalElementDialog, 'aria-label', ariaLabel);
-        }
-    }
-    async close(data) {
-        if (this.ionModalElement) {
-            await this.ionModalElement.dismiss(data);
-        }
-    }
-    set canDismiss(callback) {
-        this.ionModalElement.canDismiss = this.canDismissHelper.getCanDismissCallback(callback);
-    }
-    onFocusChange() {
-        // This fixes an undesired scroll behaviour occurring on keyboard-tabbing backwards (with shift+tab):
-        this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalCompactWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.WindowRef }, { token: CanDismissHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ModalCompactWrapperComponent, isStandalone: true, selector: "kirby-modal-compact-wrapper", inputs: { config: "config", content: "content" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()" }, properties: { "class.ion-page": "false" } }, providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], ngImport: i0, template: "<!-- Outlet for ModalController -->\n<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;padding:24px 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalCompactWrapperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-modal-compact-wrapper', providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], imports: [CommonModule], host: { '[class.ion-page]': 'false' }, template: "<!-- Outlet for ModalController -->\n<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;padding:24px 16px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.WindowRef }, { type: CanDismissHelper }, { type: i0.Renderer2 }], propDecorators: { config: [{
-                type: Input
-            }], content: [{
-                type: Input
-            }], onFocusChange: [{
-                type: HostListener,
-                args: ['window:focus']
-            }, {
-                type: HostListener,
-                args: ['window:focusout']
-            }] } });
-
-class ModalAnimationBuilderService {
-    constructor(platform) {
-        this.platform = platform;
-        this.easingEnter = KirbyAnimation.Easing.modal.enter;
-        this.easingLeave = KirbyAnimation.Easing.modal.exit;
-        this.duration = KirbyAnimation.Duration.LONG;
-        this.SwipeToCloseDefaults = {
-            MIN_PRESENTING_SCALE: 0.93,
-        };
-        this.createEnterAnimation = () => {
-            const backdropAnimation = createAnimation()
-                .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
-                .beforeStyles({
-                'pointer-events': 'none',
-            })
-                .afterClearStyles(['pointer-events']);
-            const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
-            return { backdropAnimation, wrapperAnimation };
-        };
-        this.createLeaveAnimation = () => {
-            const backdropAnimation = createAnimation().fromTo('opacity', 'var(--backdrop-opacity)', 0);
-            const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(0vh)', 'translateY(100vh)');
-            return { backdropAnimation, wrapperAnimation };
-        };
-        /**
-         * Gets the root context of a shadow dom element
-         * On newer browsers this will be the shadowRoot,
-         * but for older browser this may just be the
-         * element itself.
-         *
-         * Useful for whenever you need to explicitly
-         * do "myElement.shadowRoot!.querySelector(...)".
-         */
-        this.getElementRoot = (el, fallback = el) => {
-            return el.shadowRoot || fallback;
-        };
-    }
-    enterAnimation(currentBackdrop) {
-        return (baseEl, opts) => {
-            const { presentingEl } = opts;
-            const root = this.getElementRoot(baseEl);
-            const { wrapperAnimation, backdropAnimation } = this.createEnterAnimation();
-            backdropAnimation.addElement(root.querySelector('ion-backdrop'));
-            wrapperAnimation
-                .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
-                .beforeStyles({ opacity: 1 });
-            const baseAnimation = createAnimation('entering-base')
-                .addElement(baseEl)
-                .easing(this.easingEnter)
-                .duration(this.duration)
-                .addAnimation(wrapperAnimation);
-            let currentBackdropAnimation;
-            if (currentBackdrop) {
-                currentBackdropAnimation = createAnimation()
-                    .addElement(currentBackdrop)
-                    .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
-            }
-            if (presentingEl) {
-                const isMobile = !this.platform.isPhabletOrBigger();
-                const hasCardModal = presentingEl.tagName === 'ION-MODAL' &&
-                    presentingEl.presentingElement !== undefined;
-                const presentingElRoot = this.getElementRoot(presentingEl);
-                const presentingAnimation = createAnimation().beforeStyles({
-                    transform: 'translateY(0)',
-                    'transform-origin': 'top center',
-                    overflow: 'hidden',
-                });
-                const bodyEl = document.body;
-                if (isMobile) {
-                    /**
-                     * Fallback for browsers that does not support `max()` (ex: Firefox)
-                     * No need to worry about statusbar padding since engines like Gecko
-                     * are not used as the engine for standalone Cordova/Capacitor apps
-                     */
-                    const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
-                        ? '30px'
-                        : 'max(30px, var(--ion-safe-area-top))';
-                    const modalTransform = hasCardModal ? '-10px' : transformOffset;
-                    const toPresentingScale = this.SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
-                    const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`;
-                    presentingAnimation
-                        .afterStyles({
-                        transform: finalTransform,
-                    })
-                        .beforeAddWrite(() => bodyEl.style.setProperty('background-color', 'black'))
-                        .addElement(presentingEl)
-                        .keyframes([
-                        {
-                            offset: 0,
-                            filter: 'contrast(1)',
-                            transform: 'translateY(0px) scale(1)',
-                            borderRadius: '0px',
-                        },
-                        {
-                            offset: 1,
-                            filter: 'contrast(0.85)',
-                            transform: finalTransform,
-                            borderRadius: '10px 10px 0 0',
-                        },
-                    ]);
-                    baseAnimation.addAnimation(presentingAnimation);
-                }
-                else {
-                    baseAnimation.addAnimation(backdropAnimation);
-                    if (currentBackdropAnimation) {
-                        baseAnimation.addAnimation(currentBackdropAnimation);
-                    }
-                    if (!hasCardModal) {
-                        wrapperAnimation.fromTo('opacity', '0', '1');
-                    }
-                    else {
-                        const toPresentingScale = hasCardModal
-                            ? this.SwipeToCloseDefaults.MIN_PRESENTING_SCALE
-                            : 1;
-                        const finalTransform = `translateY(-10px) scale(${toPresentingScale})`;
-                        presentingAnimation
-                            .afterStyles({
-                            transform: finalTransform,
-                        })
-                            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
-                            .keyframes([
-                            { offset: 0, filter: 'contrast(1)', transform: 'translateY(0) scale(1)' },
-                            { offset: 1, filter: 'contrast(0.85)', transform: finalTransform },
-                        ]);
-                        const shadowAnimation = createAnimation()
-                            .afterStyles({
-                            transform: finalTransform,
-                        })
-                            .addElement(presentingElRoot.querySelector('.modal-shadow'))
-                            .keyframes([
-                            { offset: 0, opacity: '1', transform: 'translateY(0) scale(1)' },
-                            { offset: 1, opacity: '0', transform: finalTransform },
-                        ]);
-                        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
-                    }
-                }
-            }
-            else {
-                baseAnimation.addAnimation(backdropAnimation);
-                if (currentBackdropAnimation) {
-                    baseAnimation.addAnimation(currentBackdropAnimation);
-                }
-            }
-            return baseAnimation;
-        };
-    }
-    leaveAnimation(currentBackdrop) {
-        return (baseEl, opts, duration = this.duration) => {
-            const { presentingEl } = opts;
-            const root = this.getElementRoot(baseEl);
-            const { wrapperAnimation, backdropAnimation } = this.createLeaveAnimation();
-            backdropAnimation.addElement(root.querySelector('ion-backdrop'));
-            wrapperAnimation
-                .addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow'))
-                .beforeStyles({ opacity: 1 });
-            const baseAnimation = createAnimation('leaving-base')
-                .addElement(baseEl)
-                .easing(this.easingLeave)
-                .duration(duration)
-                .addAnimation(wrapperAnimation);
-            let currentBackdropAnimation;
-            if (currentBackdrop) {
-                currentBackdropAnimation = createAnimation()
-                    .addElement(currentBackdrop)
-                    .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
-                    .afterStyles({ opacity: 'var(--backdrop-opacity)' }); //Ensures backdrop is reset to default opacity after swipe to close
-            }
-            if (presentingEl) {
-                const isMobile = !this.platform.isPhabletOrBigger();
-                const hasCardModal = presentingEl.tagName === 'ION-MODAL' &&
-                    presentingEl.presentingElement !== undefined;
-                const presentingElRoot = this.getElementRoot(presentingEl);
-                const presentingAnimation = createAnimation()
-                    .beforeClearStyles(['transform'])
-                    .afterClearStyles(['transform'])
-                    .onFinish((currentStep) => {
-                    // only reset background color if this is the last card-style modal
-                    if (currentStep !== 1) {
-                        return;
-                    }
-                    presentingEl.style.setProperty('overflow', '');
-                    const numModals = Array.from(bodyEl.querySelectorAll('ion-modal')).filter((m) => m.presentingElement !== undefined).length;
-                    if (numModals <= 1) {
-                        bodyEl.style.setProperty('background-color', '');
-                    }
-                });
-                const bodyEl = document.body;
-                if (isMobile) {
-                    const transformOffset = !CSS.supports('width', 'max(0px, 1px)')
-                        ? '30px'
-                        : 'max(30px, var(--ion-safe-area-top))';
-                    const modalTransform = hasCardModal ? '-10px' : transformOffset;
-                    const toPresentingScale = this.SwipeToCloseDefaults.MIN_PRESENTING_SCALE;
-                    const finalTransform = `translateY(${modalTransform}) scale(${toPresentingScale})`;
-                    presentingAnimation.addElement(presentingEl).keyframes([
-                        {
-                            offset: 0,
-                            filter: 'contrast(0.85)',
-                            transform: finalTransform,
-                            borderRadius: '10px 10px 0 0',
-                        },
-                        {
-                            offset: 1,
-                            filter: 'contrast(1)',
-                            transform: 'translateY(0px) scale(1)',
-                            borderRadius: '0px',
-                        },
-                    ]);
-                    baseAnimation.addAnimation(presentingAnimation);
-                }
-                else {
-                    baseAnimation.addAnimation(backdropAnimation);
-                    if (currentBackdropAnimation) {
-                        baseAnimation.addAnimation(currentBackdropAnimation);
-                    }
-                    if (!hasCardModal) {
-                        wrapperAnimation.fromTo('opacity', '1', '0');
-                    }
-                    else {
-                        const toPresentingScale = hasCardModal
-                            ? this.SwipeToCloseDefaults.MIN_PRESENTING_SCALE
-                            : 1;
-                        const finalTransform = `translateY(-10px) scale(${toPresentingScale})`;
-                        presentingAnimation
-                            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
-                            .afterStyles({
-                            transform: 'translate3d(0, 0, 0)',
-                        })
-                            .keyframes([
-                            { offset: 0, filter: 'contrast(0.85)', transform: finalTransform },
-                            { offset: 1, filter: 'contrast(1)', transform: 'translateY(0) scale(1)' },
-                        ]);
-                        const shadowAnimation = createAnimation()
-                            .addElement(presentingElRoot.querySelector('.modal-shadow'))
-                            .afterStyles({
-                            transform: 'translateY(0) scale(1)',
-                        })
-                            .keyframes([
-                            { offset: 0, opacity: '0', transform: finalTransform },
-                            { offset: 1, opacity: '1', transform: 'translateY(0) scale(1)' },
-                        ]);
-                        baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
-                    }
-                }
-            }
-            else {
-                baseAnimation.addAnimation(backdropAnimation);
-                if (currentBackdropAnimation) {
-                    baseAnimation.addAnimation(currentBackdropAnimation);
-                }
-            }
-            return baseAnimation;
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalAnimationBuilderService, deps: [{ token: i3.PlatformService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalAnimationBuilderService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalAnimationBuilderService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i3.PlatformService }] });
-
-class ModalNavigationService {
-    constructor(router, route) {
-        this.router = router;
-        this.route = route;
-        // Angular Router unsubscribes its internal events Subject during dispose() (e.g. on TestBed teardown).
-        // Subscribing to a closed Subject throws ObjectUnsubscribedError, so route all subscriptions through
-        // this defer-wrapped stream that falls back to EMPTY when the underlying Subject is already closed.
-        this.routerEvents$ = defer(() => {
-            const events = this.router.events;
-            return events.closed ? EMPTY : events;
-        });
-        this.navigationEndListener$ = this.routerEvents$.pipe(filter((event) => event instanceof NavigationEnd));
-    }
-    isModalRoute(url) {
-        return url.includes('(modal:');
-    }
-    getCurrentActivatedRoute() {
-        let childRoute = this.route.root;
-        while (childRoute.firstChild) {
-            childRoute = childRoute.firstChild;
-        }
-        return childRoute;
-    }
-    async getModalRoutes(routeConfig, moduleRootRoutePath) {
-        const flattenedRoutes = [].concat(...routeConfig);
-        let modalRoutes = [];
-        const moduleRootPaths = await this.getModuleRootPath(flattenedRoutes, moduleRootRoutePath);
-        if (moduleRootPaths) {
-            modalRoutes = this.getModalRoutePaths(flattenedRoutes, moduleRootPaths);
-        }
-        return modalRoutes;
-    }
-    async getModuleRootPath(routes, moduleRootRoutePath) {
-        if (moduleRootRoutePath) {
-            const trimmedPaths = moduleRootRoutePath
-                .trim()
-                .split('/')
-                .filter((path) => !!path);
-            const rootPath = [''];
-            return rootPath.concat(trimmedPaths);
-        }
-        const currentRoutePaths = await this.getCurrentRoutePaths();
-        const moduleRootPaths = this.getRoutePathsWithoutChildSegments(currentRoutePaths, routes);
-        return moduleRootPaths;
-    }
-    async getCurrentRoutePaths() {
-        const rootPath = [''];
-        const currentNavigation = this.router.currentNavigation();
-        if (!this.router.navigated && !currentNavigation) {
-            // If router hasn't navigated yet and we are not in the middle of navigating, assume root:
-            return rootPath;
-        }
-        if (currentNavigation) {
-            // Wait for current navigation to finish:
-            await firstValueFrom(this.navigationEndListener$);
-        }
-        let childRoute = this.route.snapshot.root;
-        while (childRoute.firstChild) {
-            childRoute = childRoute.firstChild;
-        }
-        const currentBackdropRoutePath = childRoute.pathFromRoot.filter((route) => route.outlet !== 'modal');
-        return rootPath.concat(...currentBackdropRoutePath.map((route) => route.url.filter((segment) => !!segment.path).map((segment) => segment.path)));
-    }
-    getRoutePathsWithoutChildSegments(routePaths, routes) {
-        if (!routePaths.length)
-            return routePaths;
-        const matchedChildRoute = this.findChildRouteForUrl(routePaths.join('/'), routes);
-        if (!matchedChildRoute)
-            return routePaths;
-        const startSlashRegex = /^\//;
-        const relativeChildRoute = matchedChildRoute.replace(startSlashRegex, '');
-        const childSegmentCount = relativeChildRoute.split('/').length;
-        const routePathsWithoutChildSegments = routePaths.slice(0, -childSegmentCount); // Remove child segments from end of route path array
-        return routePathsWithoutChildSegments;
-    }
-    findChildRouteForUrl(url, routes) {
-        const moduleRelativePaths = this.getRoutePaths(routes, ['']).sort().reverse(); // Ensure child paths are evaluated first
-        let matchedChildRoute = moduleRelativePaths.find((path) => url.endsWith(path));
-        if (!matchedChildRoute) {
-            // No static child route found matching current route - look for child route with url params:
-            const exactMatch = false;
-            matchedChildRoute = moduleRelativePaths.find((path) => path.includes('/:') && this.pathContainsChildRouteWithUrlParams(url, path, exactMatch));
-        }
-        return matchedChildRoute;
-    }
-    pathContainsChildRouteWithUrlParams(path, childRouteWithUrlParams, exactMatch) {
-        const pathSegments = path.split('/');
-        const startSlashRegex = /^\//;
-        let childRouteToMatch = childRouteWithUrlParams;
-        if (!exactMatch) {
-            const relativeChildRoute = childRouteWithUrlParams.replace(startSlashRegex, '');
-            childRouteToMatch = relativeChildRoute;
-        }
-        const childRouteSegments = childRouteToMatch.split('/');
-        // Match each child route segment against url
-        // Match backwards from end to start of child route, i.e. "url ends with child route":
-        const pathContainsChildRoute = childRouteSegments.reverse().every((childRouteSegment) => {
-            const pathSegment = pathSegments.pop();
-            // url params (e.g. `/:id/`) are treated as a match:
-            return childRouteSegment.startsWith(':') || childRouteSegment === pathSegment;
-        });
-        if (exactMatch) {
-            // Only match if we've reached the start of the url to match against:
-            return pathSegments.length === 0 && pathContainsChildRoute;
-        }
-        return pathContainsChildRoute;
-    }
-    getRoutePaths(routes, parentPath) {
-        return Array.isArray(routes)
-            ? [].concat(...routes.map((route) => this.getRoutePath(route, parentPath)))
-            : [];
-    }
-    getRoutePath(route, parentPath) {
-        const routes = [];
-        if (route.outlet)
-            return routes; // Don't return relative paths for outlet routes
-        const currentPath = [...parentPath];
-        if (route.path) {
-            currentPath.push(route.path);
-            routes.push(currentPath.join('/'));
-        }
-        return routes.concat(this.getRoutePaths(route.children, currentPath));
-    }
-    getModalRoutePath(route, parentPath) {
-        const modalOutletName = 'modal';
-        if (!!route.path && route.outlet === modalOutletName) {
-            const modalOutletPath = `(${modalOutletName}:${route.path})`;
-            const modalRoutePath = [...parentPath, modalOutletPath].join('/');
-            return [modalRoutePath];
-        }
-        const currentPath = [...parentPath];
-        if (route.path) {
-            currentPath.push(route.path);
-        }
-        return [].concat(...this.getModalRoutePaths(route.children, currentPath));
-    }
-    getModalRoutePaths(routes, parentPath) {
-        return Array.isArray(routes)
-            ? [].concat(...routes.map((route) => this.getModalRoutePath(route, parentPath)))
-            : [];
-    }
-    isNewModalWindow(navigationEnd) {
-        const currentNavigation = this.router.currentNavigation();
-        if (!currentNavigation || !currentNavigation.previousNavigation) {
-            return true;
-        }
-        const previousRoutePath = (currentNavigation.previousNavigation.finalUrl ||
-            currentNavigation.previousNavigation.extractedUrl).toString();
-        const wasModalRoute = this.isModalRoute(previousRoutePath);
-        const isModalRoute = this.isModalRoute(navigationEnd.urlAfterRedirects);
-        if (!wasModalRoute && isModalRoute) {
-            return true;
-        }
-        const currentModalRouteParent = navigationEnd.urlAfterRedirects.split('/(modal:')[0];
-        const previousModalRouteParent = previousRoutePath.split('/(modal:')[0];
-        return previousModalRouteParent !== currentModalRouteParent;
-    }
-    async waitForCurrentThenGetNavigationEndStream() {
-        if (this.router.currentNavigation()) {
-            const currentNavigationEnd = await firstValueFrom(this.navigationEndListener$);
-            return this.navigationEndListener$.pipe(startWith(currentNavigationEnd));
-        }
-        return this.navigationEndListener$;
-    }
-    modalRouteActivatedFor(navigationEnd$, modalRouteSet, modalRoutesContainsUrlParams) {
-        return navigationEnd$.pipe(filter((navigationEnd) => this.modalRouteSetContainsPath(modalRouteSet, navigationEnd, modalRoutesContainsUrlParams)), map((navigationEnd) => {
-            return {
-                route: this.getCurrentActivatedRoute(),
-                isNewModal: this.isNewModalWindow(navigationEnd),
-            };
-        }));
-    }
-    modalRouteDeactivatedFor(navigationEnd$, modalRouteSet, modalRoutesContainsUrlParams) {
-        return navigationEnd$.pipe(pairwise(), 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        filter(([prevNavigation, _]) => this.modalRouteSetContainsPath(modalRouteSet, prevNavigation, modalRoutesContainsUrlParams)), // Only emit if previous route was modal
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        map(([_, currentNavigation]) => {
-            const isNewModalRoute = this.isModalRoute(currentNavigation.urlAfterRedirects);
-            // Deactivate modal route if new route is NOT modal OR is outside current parent route:
-            return !isNewModalRoute || this.isNewModalWindow(currentNavigation);
-        }), filter((isDeactivation) => isDeactivation));
-    }
-    modalRouteSetContainsPath(modalRouteSet, navigationEnd, modalRoutesContainsUrlParams) {
-        const pathname = navigationEnd.urlAfterRedirects.split('?')[0];
-        let hasRoute = modalRouteSet.has(pathname);
-        if (!hasRoute && modalRoutesContainsUrlParams) {
-            // Use `for ... of` instead of `forEach` so we can break out of the loop if route is found:
-            for (const route of modalRouteSet) {
-                const exactMatch = true;
-                const routeMatchesPath = this.pathContainsChildRouteWithUrlParams(pathname, route, exactMatch);
-                if (routeMatchesPath) {
-                    hasRoute = true;
-                    break;
-                }
-            }
-        }
-        return hasRoute;
-    }
-    async getModalNavigation(routeConfig, moduleRootRoutePath) {
-        if (Array.isArray(routeConfig)) {
-            const navigationEnd$ = await this.waitForCurrentThenGetNavigationEndStream();
-            const modalRoutes = await this.getModalRoutes(routeConfig, moduleRootRoutePath);
-            const hasModalRoutes = modalRoutes.length > 0;
-            if (hasModalRoutes) {
-                const modalRoutesContainsUrlParams = modalRoutes.some((route) => route.includes('/:'));
-                const modalRouteSet = new Set(modalRoutes);
-                const activated$ = this.modalRouteActivatedFor(navigationEnd$, modalRouteSet, modalRoutesContainsUrlParams);
-                const deactivated$ = this.modalRouteDeactivatedFor(navigationEnd$, modalRouteSet, modalRoutesContainsUrlParams);
-                return { activated$, deactivated$ };
-            }
-        }
-        return { activated$: EMPTY, deactivated$: EMPTY };
-    }
-    async navigateToModal(path, queryParams) {
-        const commands = Array.isArray(path) ? [...path] : path.split('/');
-        const childPath = commands.pop();
-        const result = await this.router.navigate([...commands, { outlets: { modal: [childPath] } }], {
-            queryParams,
-            relativeTo: this.getCurrentActivatedRoute(),
-        });
-        return result;
-    }
-    async navigateWithinModal(relativePath, queryParams) {
-        return this.router.navigate([relativePath], {
-            queryParams,
-            relativeTo: this.getCurrentActivatedRoute(),
-        });
-    }
-    async navigateOutOfModalOutlet() {
-        const currentActivatedRoute = this.getCurrentActivatedRoute();
-        const currentNavigationFinalUrl = this.router.currentNavigation()?.finalUrl?.toString();
-        const isCurrentlyNavigatingOutOfModalOutlet = currentNavigationFinalUrl && !this.isModalRoute(currentNavigationFinalUrl);
-        if (currentActivatedRoute.outlet !== 'modal' || isCurrentlyNavigatingOutOfModalOutlet) {
-            // Nothing to do here, bail out:
-            return Promise.resolve(true);
-        }
-        const parentRoute = this.getBackdropRoute(currentActivatedRoute);
-        return this.router.navigate(['./'], {
-            relativeTo: parentRoute,
-        });
-    }
-    getBackdropRoute(currentActivatedRoute) {
-        let parentRoute = currentActivatedRoute.parent;
-        while (parentRoute && !parentRoute.component && !!parentRoute.parent) {
-            parentRoute = parentRoute.parent;
-        }
-        return parentRoute;
-    }
-    handleBrowserBackButton(modal) {
-        const popstateNavigationStart$ = this.routerEvents$.pipe(filter((event) => event instanceof NavigationStart && event.navigationTrigger === 'popstate'));
-        const navigationEnd$ = this.routerEvents$.pipe(filter((event) => event instanceof NavigationEnd));
-        navigationEnd$
-            .pipe(skipUntil(popstateNavigationStart$), takeUntil(modal.onWillDismiss()))
-            .subscribe(() => {
-            modal.dismiss();
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalNavigationService, deps: [{ token: i1$3.Router }, { token: i1$3.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalNavigationService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalNavigationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }] });
-
-class ModalHelper {
-    constructor(ionicModalController, modalAnimationBuilder, modalNavigationService, windowRef, canDismissHelper) {
-        this.ionicModalController = ionicModalController;
-        this.modalAnimationBuilder = modalAnimationBuilder;
-        this.modalNavigationService = modalNavigationService;
-        this.windowRef = windowRef;
-        this.canDismissHelper = canDismissHelper;
-        /*
-          isModalOpening is used to prevent additional instantiations
-          of modals, while a modal is already being instatiated, but not completed.
-          This is the recommended approach by one of the maintainers of Ionic:
-          https://github.com/ionic-team/ionic-framework/issues/23327#issuecomment-847028058
-        */
-        this.isModalOpening = false;
-    }
-    async showModalWindow(config) {
-        if (this.isModalOpening)
-            return;
-        config.flavor = config.flavor || 'modal';
-        let currentBackdrop;
-        const topMostModal = await this.ionicModalController.getTop();
-        if (topMostModal) {
-            currentBackdrop =
-                topMostModal.shadowRoot.querySelector('ion-backdrop');
-        }
-        const enterAnimation = this.modalAnimationBuilder.enterAnimation(currentBackdrop);
-        const leaveAnimation = this.modalAnimationBuilder.leaveAnimation(currentBackdrop);
-        const defaultModalSize = config.interactWithBackground ? null : 'medium';
-        const modalSize = config.size || defaultModalSize;
-        const allow_scroll_class = 'allow-background-scroll';
-        let customCssClasses = [];
-        if (config.cssClass) {
-            customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];
-        }
-        if (config.interactWithBackground) {
-            this.windowRef.nativeWindow.document.body.classList.add(allow_scroll_class);
-        }
-        let canDismiss = true;
-        if (config.canDismiss) {
-            canDismiss = this.canDismissHelper.getCanDismissCallback(config.canDismiss);
-        }
-        this.isModalOpening = true;
-        const ionModal = await this.ionicModalController.create({
-            component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
-            cssClass: [
-                'kirby-overlay',
-                'kirby-modal',
-                modalSize ? `kirby-modal-${modalSize}` : null,
-                config.flavor === 'drawer' ? 'kirby-drawer' : null,
-                config.flavor === 'compact' ? 'kirby-modal-compact' : null,
-                config.interactWithBackground ? 'interact-with-background' : null,
-                ...customCssClasses,
-            ],
-            backdropDismiss: config.flavor === 'compact' || config.interactWithBackground ? false : true,
-            showBackdrop: !config.interactWithBackground,
-            componentProps: { config: config },
-            htmlAttributes: { ...config.htmlAttributes },
-            keyboardClose: false,
-            canDismiss,
-            enterAnimation,
-            leaveAnimation,
-        });
-        if (config.interactWithBackground) {
-            ionModal.onDidDismiss().then(() => {
-                this.windowRef.nativeWindow.document.body.classList.remove(allow_scroll_class);
-            });
-        }
-        if (config.customHeight) {
-            ionModal.style.setProperty('--kirby-modal-height', config.customHeight);
-        }
-        const onWillDismiss = ionModal.onWillDismiss();
-        const overlay = {
-            dismiss: ionModal.dismiss.bind(ionModal),
-            onWillDismiss,
-            onDidDismiss: ionModal.onDidDismiss(),
-            isDismissing: false,
-        };
-        onWillDismiss.then(() => {
-            overlay.isDismissing = true;
-        });
-        await ionModal.present();
-        /**
-         * Due to somewhat unexpected behavior of the ion-modal not being focused when keyboardClose
-         * is set to false we manually focus it, but only if focus is not already inside the modal
-         * See here: https://github.com/ionic-team/ionic-framework/issues/28775#issuecomment-1875475739
-         */
-        const focusedElementWithinModal = ionModal.contains(document.activeElement);
-        if (!focusedElementWithinModal) {
-            ionModal.focus();
-        }
-        // Back button should only be handled manually
-        // if the modal is not instantiated through a route.
-        if (!config.modalRoute) {
-            this.modalNavigationService.handleBrowserBackButton(ionModal);
-        }
-        this.isModalOpening = false;
-        return overlay;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalHelper, deps: [{ token: i1$1.ModalController }, { token: ModalAnimationBuilderService }, { token: ModalNavigationService }, { token: i1.WindowRef }, { token: CanDismissHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalHelper }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalHelper, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ModalController }, { type: ModalAnimationBuilderService }, { type: ModalNavigationService }, { type: i1.WindowRef }, { type: CanDismissHelper }] });
-
-const KIRBY_ACTION_SHEET_DEPRECATION_WARNING = '[Kirby action sheet] Deprecated - Use Menu component instead';
-class ActionSheetComponent {
-    constructor() {
-        this.cancelButtonText = 'Cancel';
-        this.hideCancel = false;
-        this.disabled = false;
-        this.cancel = new EventEmitter();
-        this.itemSelect = new EventEmitter();
-        console.warn(KIRBY_ACTION_SHEET_DEPRECATION_WARNING);
-    }
-    onItemSelect(selection) {
-        this.itemSelect.emit(selection);
-    }
-    onCancel() {
-        this.cancel.emit();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ActionSheetComponent, isStandalone: true, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, template: "<kirby-card>\n  @if (header) {\n    <kirby-card-header\n      [title]=\"header\"\n      [isTitleBold]=\"true\"\n      [subtitle]=\"subheader\"\n    ></kirby-card-header>\n  }\n  @for (item of items; track item.id) {\n    <button\n      kirby-button\n      expand=\"block\"\n      size=\"lg\"\n      [noDecoration]=\"true\"\n      (click)=\"onItemSelect(item)\"\n    >\n      {{ item.text }}\n    </button>\n  }\n</kirby-card>\n@if (!hideCancel) {\n  <button kirby-button class=\"cancel-btn\" size=\"lg\" attentionLevel=\"3\" (click)=\"onCancel()\">\n    {{ cancelButtonText }}\n  </button>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-internal-margin-horizontal-default: 32px}@media(max-width:320px){:host{--kirby-internal-margin-horizontal-default: 16px}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total));padding-bottom:var(--kirby-safe-area-bottom, 0)}:host button[kirby-button].no-decoration:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,var(--kirby-focus-ring-md-inset)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged", "hasPadding"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ActionSheetComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [CardComponent, CardHeaderComponent, ButtonComponent], selector: 'kirby-action-sheet', template: "<kirby-card>\n  @if (header) {\n    <kirby-card-header\n      [title]=\"header\"\n      [isTitleBold]=\"true\"\n      [subtitle]=\"subheader\"\n    ></kirby-card-header>\n  }\n  @for (item of items; track item.id) {\n    <button\n      kirby-button\n      expand=\"block\"\n      size=\"lg\"\n      [noDecoration]=\"true\"\n      (click)=\"onItemSelect(item)\"\n    >\n      {{ item.text }}\n    </button>\n  }\n</kirby-card>\n@if (!hideCancel) {\n  <button kirby-button class=\"cancel-btn\" size=\"lg\" attentionLevel=\"3\" (click)=\"onCancel()\">\n    {{ cancelButtonText }}\n  </button>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-internal-margin-horizontal-default: 32px}@media(max-width:320px){:host{--kirby-internal-margin-horizontal-default: 16px}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total));padding-bottom:var(--kirby-safe-area-bottom, 0)}:host button[kirby-button].no-decoration:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,var(--kirby-focus-ring-md-inset)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { cancelButtonText: [{
-                type: Input
-            }], hideCancel: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], header: [{
-                type: Input
-            }], subheader: [{
-                type: Input
-            }], items: [{
-                type: Input
-            }], cancel: [{
-                type: Output
-            }], itemSelect: [{
-                type: Output
-            }] } });
-
-class ActionSheetHelper {
-    constructor(ionicModalController) {
-        this.ionicModalController = ionicModalController;
-    }
-    async showActionSheet(config) {
-        const cancel = new EventEmitter();
-        const itemSelect = new EventEmitter();
-        const ionModal = await this.ionicModalController.create({
-            component: ActionSheetComponent,
-            cssClass: ['kirby-overlay', 'kirby-action-sheet'],
-            componentProps: {
-                ...config,
-                cancel: cancel,
-                itemSelect: itemSelect,
-            },
-            backdropDismiss: true,
-        });
-        // Remove 'modal-shadow' element as we are no longer able to hide it with CSS in Ionic 6.
-        // We need to remove it so it does not obstruct the backdrop-click to dismiss functionality.
-        ionModal.shadowRoot.querySelector('.modal-shadow').remove();
-        const cancelSubscription = cancel.subscribe(() => ionModal.dismiss());
-        const itemSelectSubscription = itemSelect.subscribe((item) => ionModal.dismiss(item));
-        const onDidDismiss = ionModal.onDidDismiss();
-        onDidDismiss.then(() => {
-            cancelSubscription.unsubscribe();
-            itemSelectSubscription.unsubscribe();
-        });
-        await ionModal.present();
-        return {
-            dismiss: ionModal.dismiss.bind(ionModal),
-            onWillDismiss: ionModal.onWillDismiss(),
-            onDidDismiss: ionModal.onDidDismiss(),
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ActionSheetHelper, deps: [{ token: i1$1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ActionSheetHelper }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ActionSheetHelper, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ModalController }] });
-
-class ModalController {
-    constructor(modalHelper, actionSheetHelper, alertHelper, modalNavigationService, routeConfig) {
-        this.modalHelper = modalHelper;
-        this.actionSheetHelper = actionSheetHelper;
-        this.alertHelper = alertHelper;
-        this.modalNavigationService = modalNavigationService;
-        this.routeConfig = routeConfig;
-        this.overlays = [];
-        this.noOverlayRegisteredErrorMessage = 'No modal overlays are currently registered';
-        this.destroy$ = new Subject();
-    }
-    async initialize(moduleRootRoutePath) {
-        const modalNavigation = await this.modalNavigationService.getModalNavigation(this.routeConfig, moduleRootRoutePath);
-        this.onModalRouteActivated(modalNavigation.activated$);
-        this.onModalRouteDeactivated(modalNavigation.deactivated$);
-    }
-    onModalRouteActivated(modalRouteActivated$) {
-        const navigateOnWillClose = () => {
-            this.modalNavigationService.navigateOutOfModalOutlet();
-        };
-        const siblingModalRouteActivated$ = modalRouteActivated$.pipe(filter((modalRouteActivation) => !modalRouteActivation.isNewModal), map((modalRouteActivation) => modalRouteActivation.route));
-        modalRouteActivated$
-            .pipe(takeUntil(this.destroy$), filter(() => this.overlays.length === 0))
-            .subscribe(async (modalRouteActivation) => {
-            if (modalRouteActivation.isNewModal) {
-                await this.showModalRoute(modalRouteActivation.route, siblingModalRouteActivated$, navigateOnWillClose);
-            }
-        });
-    }
-    onModalRouteDeactivated(modalRouteDeactivated$) {
-        modalRouteDeactivated$
-            .pipe(takeUntil(this.destroy$), filter(() => this.overlays.some((overlay) => overlay.isDismissing !== true)))
-            .subscribe(async () => {
-            await this.hideAll();
-        });
-    }
-    async showModal(config, onClose) {
-        await this.showAndRegisterOverlay(() => this.modalHelper.showModalWindow(config), onClose);
-    }
-    async navigateToModal(path, queryParams) {
-        return this.modalNavigationService.navigateToModal(path, queryParams);
-    }
-    async navigateWithinModal(relativePath, queryParams) {
-        return this.modalNavigationService.navigateWithinModal(relativePath, queryParams);
-    }
-    async showModalRoute(modalRoute, siblingModalRouteActivated$, onWillClose) {
-        const config = {
-            ...modalRoute.snapshot.data.modalConfig,
-            component: null,
-            modalRoute: modalRoute,
-            siblingModalRouteActivated$: siblingModalRouteActivated$,
-        };
-        await this.showAndRegisterOverlay(() => this.modalHelper.showModalWindow(config), null, onWillClose);
-    }
-    async showActionSheet(config, onClose) {
-        await this.showAndRegisterOverlay(() => this.actionSheetHelper.showActionSheet(config), onClose);
-    }
-    async showAlert(config, onClose) {
-        await this.showAndRegisterOverlay(() => this.alertHelper.showAlert(config), onClose);
-    }
-    async showAndRegisterOverlay(showOverlay, onCloseOverlay, onWillCloseOverlay) {
-        const overlay = await showOverlay();
-        if (!overlay)
-            return;
-        this.overlays.push(overlay);
-        if (typeof onWillCloseOverlay === 'function') {
-            overlay.onWillDismiss.then((event) => onWillCloseOverlay(event.data));
-        }
-        overlay.onDidDismiss.then((event) => {
-            this.overlays.pop();
-            if (typeof onCloseOverlay === 'function') {
-                onCloseOverlay(event.data);
-            }
-        });
-    }
-    async hideTopmost(data) {
-        const overlay = this.overlays[this.overlays.length - 1];
-        if (!overlay) {
-            throw new Error(this.noOverlayRegisteredErrorMessage);
-        }
-        return overlay.dismiss(data);
-    }
-    async hideAll() {
-        await Promise.all(this.overlays
-            .filter((overlay) => overlay.isDismissing !== true)
-            .map(async (overlay) => {
-            await overlay.dismiss();
-        }));
-    }
-    getTopMost() {
-        return this.overlays[this.overlays.length - 1];
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalController, deps: [{ token: ModalHelper }, { token: ActionSheetHelper }, { token: AlertHelper }, { token: ModalNavigationService }, { token: ROUTES, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalController }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalController, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: ModalHelper }, { type: ActionSheetHelper }, { type: AlertHelper }, { type: ModalNavigationService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [ROUTES]
-                }] }] });
-
+var ModalWrapperComponent = class ModalWrapperComponent {
+	get _hasCollapsibleTitle() {
+		return !!this.config?.collapseTitle;
+	}
+	static {
+		this.KEYBOARD_HIDE_DELAY_IN_MS = 100;
+	}
+	set scrollDisabled(disabled) {
+		this.ionContent.scrollY = !disabled;
+	}
+	set canDismiss(callback) {
+		this.ionModalElement.canDismiss = this.canDismissHelper.getCanDismissCallback(callback);
+	}
+	get contentTitleElement() {
+		if (!this._contentTitleElement && this._hasCollapsibleTitle) this.changeDetector.detectChanges();
+		return this._contentTitleElement;
+	}
+	get intersectionObserver() {
+		if (!this._intersectionObserver) this._intersectionObserver = this.createModalWrapperIntersectionObserver();
+		return this._intersectionObserver;
+	}
+	get _isDrawer() {
+		return this.config.flavor === "drawer";
+	}
+	constructor(changeDetector, injector, elementRef, renderer, zone, resizeObserverService, windowRef, platform, canDismissHelper, environmentInjector, translations) {
+		this.changeDetector = changeDetector;
+		this.injector = injector;
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.zone = zone;
+		this.resizeObserverService = resizeObserverService;
+		this.windowRef = windowRef;
+		this.platform = platform;
+		this.canDismissHelper = canDismissHelper;
+		this.environmentInjector = environmentInjector;
+		this.translations = translations;
+		this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
+		this.VIEWPORT_RESIZE_DEBOUNCE_TIME = 100;
+		this.keyboardVisible = false;
+		this.toolbarButtons = [];
+		this.delayedClose = () => {};
+		this.viewportResized = false;
+		this.ionModalDidPresent = new Subject();
+		this.didPresent = firstValueFrom(this.ionModalDidPresent);
+		this.ionModalWillDismiss = new Subject();
+		this.willClose = firstValueFrom(this.ionModalWillDismiss);
+		this.viewportResize = new Subject();
+		this.viewportResize$ = this.viewportResize.asObservable().pipe(debounceTime(this.VIEWPORT_RESIZE_DEBOUNCE_TIME));
+		this.destroy$ = new Subject();
+		this.willClose$ = this.ionModalWillDismiss.pipe(first());
+		this._currentFooter = null;
+		this.setAriaLabelFromTitleContent = () => {
+			const titleTextContent = this.ionTitleElement?.nativeElement.textContent;
+			if (this.ionModalDialog && titleTextContent) this.renderer.setAttribute(this.ionModalDialog, "aria-label", titleTextContent);
+		};
+		this.setViewportHeight();
+		this.observeViewportResize();
+		this.modalElementsMoverDelegate = new ModalElementsMoverDelegate(renderer, elementRef);
+	}
+	ngOnInit() {
+		this.ionModalElement = this.elementRef.nativeElement.closest("ion-modal");
+		this.ionModalDialog = getIonModalDialogAncestor(this.elementRef.nativeElement);
+		this.initializeSizing();
+		this.initializeModalRoute();
+		this.listenForIonModalDidPresent();
+		this.listenForIonModalWillDismiss();
+		this.listenForScroll();
+		this.initializeResizeModalToModalWrapper();
+		this.focusTitleOnDidPresent();
+		this.componentPropsInjector = Injector.create({
+			providers: [{
+				provide: COMPONENT_PROPS,
+				useValue: this.config.componentProps
+			}],
+			parent: this.injector
+		});
+		this.modalWrapperInjector = Injector.create({
+			providers: [{
+				provide: ModalElementsAdvertiser,
+				useExisting: ModalWrapperComponent
+			}],
+			parent: this.injector
+		});
+	}
+	ngAfterViewInit() {
+		if (this.toolbarButtonsQuery) this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement);
+		this.setAriaLabel();
+	}
+	set currentFooter(footer) {
+		if (this._currentFooter) this.resizeObserverService.unobserve(this._currentFooter);
+		this._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);
+		});
+	}
+	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$).pipe(takeUntil(this.destroy$)).subscribe(() => {
+			setTimeout(() => {
+				const domRect = this.elementRef.nativeElement.getBoundingClientRect();
+				const right = this.windowRef.nativeWindow.document.documentElement.clientWidth - domRect.right;
+				this.renderer.setStyle(this.ionModalElement, "top", `${domRect.top}px`);
+				this.renderer.setStyle(this.ionModalElement, "left", `${domRect.left}px`);
+				this.renderer.setStyle(this.ionModalElement, "right", `${right}px`);
+			});
+		});
+	}
+	initializeSizing() {
+		if (this.config.size === "full-height") return;
+		this.patchScrollElementSize();
+		this.observeHeaderResize();
+		this.observeModalFullHeight();
+	}
+	initializeModalRoute() {
+		if (this.config.modalRoute) {
+			this.onSiblingModalRouteActivated(this.config.siblingModalRouteActivated$);
+			this.routerOutlet.activateWith(this.config.modalRoute, this.environmentInjector);
+		}
+	}
+	onSiblingModalRouteActivated(siblingModalRouteActivated$) {
+		if (!siblingModalRouteActivated$) return;
+		siblingModalRouteActivated$.pipe(takeUntil(this.willClose$)).subscribe((route) => {
+			if (this.routerOutlet.isActivated) this.routerOutlet.deactivate();
+			this.routerOutlet.activateWith(route, this.environmentInjector);
+			this.focusTitle();
+		});
+	}
+	patchScrollElementSize() {
+		if ("part" in HTMLElement.prototype) return;
+		this.ionContent.getScrollElement().then((scrollElement) => {
+			this.renderer.setStyle(scrollElement, "height", "100%");
+			this.renderer.setStyle(scrollElement, "position", "relative");
+			if (this.config.flavor === "drawer") this.renderer.setStyle(scrollElement, "transition", "padding-bottom " + DesignTokenHelper.softKeyboardTransitionLeave);
+		});
+	}
+	observeModalFullHeight() {
+		const ionModalWrapper = this.getIonModalWrapperElement();
+		if (!ionModalWrapper) return;
+		this.didPresent.then(() => {
+			this.intersectionObserver.observe(ionModalWrapper);
+		});
+	}
+	getIonModalWrapperElement() {
+		return this.ionModalElement.shadowRoot.querySelector(".modal-wrapper");
+	}
+	observeHeaderResize() {
+		this.resizeObserverService.observe(this.ionHeaderElement.nativeElement, (entry) => {
+			const [property, pixelValue] = ["--header-height", `${entry.contentRect.height}px`];
+			this.setCssVar(this.elementRef.nativeElement, property, pixelValue);
+		});
+	}
+	listenForIonModalDidPresent() {
+		if (this.ionModalElement) this.ionModalElement.addEventListener("ionModalDidPresent", () => {
+			this.ionModalDidPresent.next();
+			this.ionModalDidPresent.complete();
+		});
+	}
+	listenForIonModalWillDismiss() {
+		if (this.ionModalElement) this.ionModalElement.addEventListener("ionModalWillDismiss", () => {
+			this.ionModalWillDismiss.next();
+			this.ionModalWillDismiss.complete();
+		});
+	}
+	listenForScroll() {
+		const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`;
+		const mediaQuery = this.windowRef.nativeWindow.matchMedia(query);
+		const enableScrollEvents = (listOrEvent) => {
+			const isDesktop = listOrEvent.matches;
+			this.scrollEventsEnabled = !isDesktop;
+		};
+		enableScrollEvents(mediaQuery);
+		mediaQuery.onchange = enableScrollEvents;
+		this.zone.runOutsideAngular(() => {
+			fromEvent(this.ionContentElement.nativeElement, "ionScroll").pipe(debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.destroy$)).subscribe((scrollInfo) => {
+				const contentScrolledPastOffset = scrollInfo.scrollTop > contentScrolledOffsetInPixels;
+				if (contentScrolledPastOffset !== this.isContentScrolled) {
+					this.isContentScrolled = contentScrolledPastOffset;
+					this.changeDetector.detectChanges();
+				}
+			});
+		});
+	}
+	observeTitleContentChanges() {
+		this.mutationObserverUnobserveFn = observeContent(this.ionTitleElement.nativeElement, this.setAriaLabelFromTitleContent);
+	}
+	setAriaLabel() {
+		const ariaLabel = this.config.htmlAttributes?.["aria-label"];
+		const ionModalElementDialog = getIonModalDialogAncestor(this.ionModalElement);
+		if (ionModalElementDialog && ariaLabel) this.renderer.setAttribute(ionModalElementDialog, "aria-label", ariaLabel);
+		else {
+			this.setAriaLabelFromTitleContent();
+			this.observeTitleContentChanges();
+		}
+	}
+	focusTitleOnDidPresent() {
+		this.ionModalDidPresent.pipe(takeUntil(this.willClose$)).subscribe(() => {
+			this.focusTitle();
+		});
+	}
+	focusTitle() {
+		queueMicrotask(() => {
+			if (this.ionContentElement?.nativeElement.contains(document.activeElement)) return;
+			this.ionTitleElement?.nativeElement.focus();
+		});
+	}
+	scrollToTop(scrollDuration) {
+		this.ionContent.scrollToTop(scrollDuration || 0);
+	}
+	scrollToBottom(scrollDuration) {
+		this.ionContent.scrollToBottom(scrollDuration || 0);
+	}
+	async close(data) {
+		if (!this.ionModalElement) return;
+		if (!this.keyboardVisible || !this.viewportResized) {
+			clearTimeout(this.delayedCloseTimeoutId);
+			await this.ionModalElement.dismiss(data);
+			return;
+		}
+		this.blurActiveElement();
+		return new Promise((resolve) => {
+			this.delayedClose = async () => {
+				await this.ionModalElement.dismiss(data);
+				resolve();
+			};
+			this.delayedCloseTimeoutId = setTimeout(this.delayedClose, ModalWrapperComponent.KEYBOARD_HIDE_DELAY_IN_MS);
+		});
+	}
+	onFocusChange() {
+		this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
+	}
+	_onKeyboardShow(keyboardHeight) {
+		this.setKeyboardVisibility(keyboardHeight);
+	}
+	_onKeyboardHide() {
+		this.setKeyboardVisibility(0);
+	}
+	toggleContentMaxHeight(freeze) {
+		if (!(this.config.flavor === "modal" && this.platform.isPhabletOrBigger())) return;
+		const style = "max-height";
+		const contentElement = this.ionContentElement.nativeElement;
+		this.zone.run(() => {
+			if (freeze) {
+				const contentHeight = contentElement.offsetHeight;
+				this.renderer.setStyle(contentElement, style, `${contentHeight}px`);
+			} else this.renderer.removeStyle(contentElement, style);
+		});
+	}
+	setKeyboardVisibility(keyboardHeight) {
+		const keyboardAlreadyVisible = keyboardHeight > 0 && this.keyboardVisible;
+		const keyboardAlreadyHidden = keyboardHeight === 0 && !this.keyboardVisible;
+		if (keyboardAlreadyVisible || keyboardAlreadyHidden) return;
+		this.keyboardVisible = keyboardHeight > 0;
+		this.toggleContentMaxHeight(this.keyboardVisible);
+		this.setKeyboardOverlap(keyboardHeight);
+	}
+	getViewportHeight() {
+		return this.initialViewportHeight || this.windowRef.nativeWindow.innerHeight;
+	}
+	getKeyboardOverlap(keyboardHeight, element) {
+		const viewportHeight = this.getViewportHeight();
+		if (keyboardHeight <= 0 || !element || !viewportHeight) return 0;
+		const elementDistanceAboveBottomOfScreen = Math.floor(viewportHeight - element.getBoundingClientRect().bottom);
+		return Math.max(keyboardHeight - elementDistanceAboveBottomOfScreen, 0);
+	}
+	setCssVar(element, property, value) {
+		this.zone.run(() => this.renderer.setStyle(element, property, value, RendererStyleFlags2.DashCase));
+	}
+	toggleCssClass(element, klass, condition) {
+		this.zone.run(() => condition ? this.renderer.addClass(element, klass) : this.renderer.removeClass(element, klass));
+	}
+	setKeyboardOverlap(keyboardHeight) {
+		this.toggleCssClass(this.elementRef.nativeElement, "keyboard-visible", this.keyboardVisible);
+		this.liftFooterAboveKeyboard(keyboardHeight);
+		this.reserveContentScrollRoom(keyboardHeight);
+	}
+	liftFooterAboveKeyboard(keyboardHeight) {
+		const footer = this.currentFooter;
+		if (!footer) return;
+		const keyboardOverlap = this.getKeyboardOverlap(keyboardHeight, this.elementRef.nativeElement);
+		this.setCssVar(footer, "--keyboard-offset", `${keyboardOverlap}px`);
+	}
+	reserveContentScrollRoom(keyboardHeight) {
+		const contentKeyboardOverlap = this.currentFooter?.classList.contains("snap-to-keyboard") ?? false ? this.getKeyboardOverlap(keyboardHeight, this.elementRef.nativeElement) : this.getKeyboardOverlap(keyboardHeight, this.ionContentElement.nativeElement);
+		this.setCssVar(this.elementRef.nativeElement, "--kirby-keyboard-content-overlap", `${contentKeyboardOverlap}px`);
+	}
+	onHeaderTouchStart(event) {
+		if (this.keyboardVisible) {
+			if (!this.toolbarButtons.some((button) => {
+				return event.target instanceof HTMLElement && (event.target === button || button.contains(event.target));
+			})) this.blurActiveElement();
+		}
+	}
+	_onWindowResize() {
+		this.setViewportHeight();
+	}
+	setViewportHeight() {
+		const vh = (this.windowRef.nativeWindow.innerHeight * .01).toFixed(2);
+		this.setCssVar(this.elementRef.nativeElement, "--vh", `${vh}px`);
+	}
+	observeViewportResize() {
+		this.resizeObserverService.observe(this.windowRef.nativeWindow.document.body, (entry) => this.onViewportResize(entry));
+	}
+	onViewportResize(entry) {
+		if (!this.initialViewportHeight) {
+			this.initialViewportHeight = entry.contentRect.height;
+			return;
+		}
+		this.viewportResized = entry.contentRect.height !== this.initialViewportHeight;
+		if (!this.viewportResized) {
+			if (this.delayedCloseTimeoutId) {
+				clearTimeout(this.delayedCloseTimeoutId);
+				this.delayedClose();
+			}
+		}
+		this.viewportResize.next();
+	}
+	blurActiveElement() {
+		const BLUR_TARGET_SELECTOR = "input, textarea";
+		if (this.keyboardVisible) {
+			if (document.activeElement instanceof HTMLElement && document.activeElement.matches(BLUR_TARGET_SELECTOR)) document.activeElement.blur();
+		}
+	}
+	createModalWrapperIntersectionObserver() {
+		const callback = (entries) => {
+			if (entries[0].intersectionRatio < 1) this.ionModalElement.classList.add("full-height");
+			else this.ionModalElement.classList.remove("full-height");
+		};
+		const options = {
+			rootMargin: "0px 0px -1px 0px",
+			root: this.windowRef.nativeWindow.frameElement ? this.windowRef.nativeWindow.document : void 0,
+			threshold: [.99, 1]
+		};
+		return new IntersectionObserver(callback, options);
+	}
+	ngOnDestroy() {
+		if (this.routerOutlet.isActivated) this.routerOutlet.deactivate();
+		this.mutationObserverUnobserveFn?.();
+		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.currentFooter);
+		}
+		this.destroy$.next();
+		this.destroy$.complete();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalWrapperComponent,
+			deps: [
+				{ token: i0.ChangeDetectorRef },
+				{ token: i0.Injector },
+				{ token: i0.ElementRef },
+				{ token: i0.Renderer2 },
+				{ token: i0.NgZone },
+				{ token: i1.ResizeObserverService },
+				{ token: i1$2.WindowRef },
+				{ token: i3.PlatformService },
+				{ token: CanDismissHelper },
+				{ token: i0.EnvironmentInjector },
+				{ token: i1.TranslationService }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: ModalWrapperComponent,
+			isStandalone: true,
+			selector: "kirby-modal-wrapper",
+			inputs: {
+				scrollDisabled: "scrollDisabled",
+				config: "config",
+				content: "content"
+			},
+			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
+			}],
+			queries: [{
+				propertyName: "templateRef",
+				first: true,
+				predicate: TemplateRef,
+				descendants: true
+			}],
+			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\n  role=\"presentation\"\n  [class.content-scrolled]=\"isContentScrolled\"\n  (touchstart)=\"onHeaderTouchStart($event)\"\n>\n  <ion-toolbar>\n    <ion-title role=\"heading\" aria-level=\"2\" tabindex=\"-1\"></ion-title>\n    @if (config.flavor === 'drawer' && config.drawerSupplementaryAction) {\n      <ion-buttons slot=\"secondary\">\n        <button\n          kirby-button\n          attentionLevel=\"3\"\n          size=\"md\"\n          (click)=\"config.drawerSupplementaryAction.action($event)\"\n        >\n          <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n        </button>\n      </ion-buttons>\n    }\n    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\n        [attr.aria-label]=\"translations.get('close')\"\n        (click)=\"close()\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n  @if (_hasCollapsibleTitle) {\n    <ion-header collapse=\"condense\">\n      <ion-toolbar>\n        <span class=\"kirby-text-xlarge\" #contentTitle></span>\n      </ion-toolbar>\n    </ion-header>\n  }\n\n  <!-- Outlet for ModalController -->\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n\n  <!-- Outlet for projected content -->\n  <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n  <!-- Outlet for route-based modal -->\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);--padding-bottom: calc(var(--kirby-spacing-xxs) - var(--kirby-stroke-xs));--padding-top: var(--kirby-spacing-xxs);--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-color-content-base));border-bottom:var(--kirby-stroke-xs) solid transparent;transition:border-color var(--kirby-transition-duration-quick) linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - var(--kirby-stroke-xs));--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: var(--kirby-spacing-s)}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-color-border-base-silent)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-color-border-base-silent)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer: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.kirby-drawer: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.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom var(--kirby-transition-soft-keyboard-leave)}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom var(--kirby-transition-soft-keyboard-enter)}}:host-context(ion-modal.kirby-drawer.interact-with-background){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.kirby-drawer.interact-with-background) 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.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom var(--kirby-transition-soft-keyboard-leave)}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom var(--kirby-transition-soft-keyboard-enter)}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}: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:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - var(--kirby-stroke-xs));--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:min(var(--kirby-font-size-n),19.2px);font-weight:var(--kirby-font-weight-bold);outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-color-content-base));--padding-top: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}:host(.keyboard-visible) ion-content{--padding-bottom: calc( var(--kirby-spacing-m) + var(--kirby-keyboard-content-overlap, 0px) - var(--keyboard-offset, 0px) )}@media(min-width:768px){ion-content{--padding-start: var(--kirby-spacing-xxl);--padding-end: var(--kirby-spacing-xxl)}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: var(--kirby-spacing-l);--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s)}}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: RouterModule
+				},
+				{
+					kind: "directive",
+					type: i5.RouterOutlet,
+					selector: "router-outlet",
+					inputs: ["name", "routerOutletData"],
+					outputs: [
+						"activate",
+						"deactivate",
+						"attach",
+						"detach"
+					],
+					exportAs: ["outlet"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
+					inputs: [
+						"attentionLevel",
+						"noDecoration",
+						"themeColor",
+						"expand",
+						"isFloating",
+						"size",
+						"showIconOnly"
+					]
+				},
+				{
+					kind: "component",
+					type: IconComponent,
+					selector: "kirby-icon",
+					inputs: ["size", "name"]
+				},
+				{
+					kind: "ngmodule",
+					type: CommonModule
+				},
+				{
+					kind: "directive",
+					type: i2.NgComponentOutlet,
+					selector: "[ngComponentOutlet]",
+					inputs: [
+						"ngComponentOutlet",
+						"ngComponentOutletInputs",
+						"ngComponentOutletInjector",
+						"ngComponentOutletEnvironmentInjector",
+						"ngComponentOutletContent",
+						"ngComponentOutletNgModule"
+					],
+					exportAs: ["ngComponentOutlet"]
+				},
+				{
+					kind: "directive",
+					type: i2.NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: IonHeader,
+					selector: "ion-header",
+					inputs: [
+						"collapse",
+						"mode",
+						"translucent"
+					]
+				},
+				{
+					kind: "component",
+					type: IonToolbar,
+					selector: "ion-toolbar",
+					inputs: ["color", "mode"]
+				},
+				{
+					kind: "component",
+					type: IonTitle,
+					selector: "ion-title",
+					inputs: ["color", "size"]
+				},
+				{
+					kind: "component",
+					type: IonButtons,
+					selector: "ion-buttons",
+					inputs: ["collapse"]
+				},
+				{
+					kind: "component",
+					type: IonContent,
+					selector: "ion-content",
+					inputs: [
+						"color",
+						"fixedSlotPlacement",
+						"forceOverscroll",
+						"fullscreen",
+						"scrollEvents",
+						"scrollX",
+						"scrollY"
+					],
+					outputs: [
+						"ionScrollStart",
+						"ionScroll",
+						"ionScrollEnd"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalWrapperComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [
+				RouterModule,
+				ButtonComponent,
+				IconComponent,
+				CommonModule,
+				IonHeader,
+				IonToolbar,
+				IonTitle,
+				IonButtons,
+				IonContent
+			],
+			selector: "kirby-modal-wrapper",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			providers: [{
+				provide: Modal,
+				useExisting: ModalWrapperComponent
+			}, {
+				provide: ModalElementsAdvertiser,
+				useExisting: ModalWrapperComponent
+			}],
+			template: "<ion-header\n  role=\"presentation\"\n  [class.content-scrolled]=\"isContentScrolled\"\n  (touchstart)=\"onHeaderTouchStart($event)\"\n>\n  <ion-toolbar>\n    <ion-title role=\"heading\" aria-level=\"2\" tabindex=\"-1\"></ion-title>\n    @if (config.flavor === 'drawer' && config.drawerSupplementaryAction) {\n      <ion-buttons slot=\"secondary\">\n        <button\n          kirby-button\n          attentionLevel=\"3\"\n          size=\"md\"\n          (click)=\"config.drawerSupplementaryAction.action($event)\"\n        >\n          <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n        </button>\n      </ion-buttons>\n    }\n    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\n        [attr.aria-label]=\"translations.get('close')\"\n        (click)=\"close()\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n  @if (_hasCollapsibleTitle) {\n    <ion-header collapse=\"condense\">\n      <ion-toolbar>\n        <span class=\"kirby-text-xlarge\" #contentTitle></span>\n      </ion-toolbar>\n    </ion-header>\n  }\n\n  <!-- Outlet for ModalController -->\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n\n  <!-- Outlet for projected content -->\n  <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n  <!-- Outlet for route-based modal -->\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);--padding-bottom: calc(var(--kirby-spacing-xxs) - var(--kirby-stroke-xs));--padding-top: var(--kirby-spacing-xxs);--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-color-content-base));border-bottom:var(--kirby-stroke-xs) solid transparent;transition:border-color var(--kirby-transition-duration-quick) linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - var(--kirby-stroke-xs));--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: var(--kirby-spacing-s)}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-color-border-base-silent)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-color-border-base-silent)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer: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.kirby-drawer: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.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom var(--kirby-transition-soft-keyboard-leave)}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom var(--kirby-transition-soft-keyboard-enter)}}:host-context(ion-modal.kirby-drawer.interact-with-background){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.kirby-drawer.interact-with-background) 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.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom var(--kirby-transition-soft-keyboard-leave)}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom var(--kirby-transition-soft-keyboard-enter)}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}: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:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - var(--kirby-stroke-xs));--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:min(var(--kirby-font-size-n),19.2px);font-weight:var(--kirby-font-weight-bold);outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-color-content-base));--padding-top: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}:host(.keyboard-visible) ion-content{--padding-bottom: calc( var(--kirby-spacing-m) + var(--kirby-keyboard-content-overlap, 0px) - var(--keyboard-offset, 0px) )}@media(min-width:768px){ion-content{--padding-start: var(--kirby-spacing-xxl);--padding-end: var(--kirby-spacing-xxl)}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: var(--kirby-spacing-l);--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.Injector },
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 },
+		{ type: i0.NgZone },
+		{ type: i1.ResizeObserverService },
+		{ type: i1$2.WindowRef },
+		{ type: i3.PlatformService },
+		{ type: CanDismissHelper },
+		{ type: i0.EnvironmentInjector },
+		{ type: i1.TranslationService }
+	],
+	propDecorators: {
+		_hasCollapsibleTitle: [{
+			type: HostBinding,
+			args: ["class.collapsible-title"]
+		}],
+		scrollDisabled: [{ type: Input }],
+		config: [{ type: Input }],
+		content: [{ type: Input }],
+		templateRef: [{
+			type: ContentChild,
+			args: [TemplateRef]
+		}],
+		toolbarButtonsQuery: [{
+			type: ViewChildren,
+			args: [ButtonComponent, { read: ElementRef }]
+		}],
+		ionContent: [{
+			type: ViewChild,
+			args: [IonContent, { static: true }]
+		}],
+		ionContentElement: [{
+			type: ViewChild,
+			args: [IonContent, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionHeaderElement: [{
+			type: ViewChild,
+			args: [IonHeader, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionToolbarElement: [{
+			type: ViewChild,
+			args: [IonToolbar, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionTitleElement: [{
+			type: ViewChild,
+			args: [IonTitle, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		routerOutlet: [{
+			type: ViewChild,
+			args: [RouterOutlet, { static: true }]
+		}],
+		_contentTitleElement: [{
+			type: ViewChild,
+			args: ["contentTitle", { read: ElementRef }]
+		}],
+		_isDrawer: [{
+			type: HostBinding,
+			args: ["class.drawer"]
+		}],
+		onFocusChange: [{
+			type: HostListener,
+			args: ["window:focus"]
+		}, {
+			type: HostListener,
+			args: ["window:focusout"]
+		}],
+		_onKeyboardShow: [{
+			type: HostListener,
+			args: ["window:ionKeyboardDidShow", ["$event.detail.keyboardHeight"]]
+		}, {
+			type: HostListener,
+			args: ["window:keyboardWillShow", ["$event.keyboardHeight"]]
+		}],
+		_onKeyboardHide: [{
+			type: HostListener,
+			args: ["window:ionKeyboardDidHide"]
+		}, {
+			type: HostListener,
+			args: ["window:keyboardWillHide"]
+		}],
+		_onWindowResize: [{
+			type: HostListener,
+			args: ["window:resize"]
+		}]
+	}
+});
+var DrawerSupplementaryAction = class {};
+var ModalCompactWrapperComponent = class ModalCompactWrapperComponent {
+	constructor(injector, elementRef, windowRef, canDismissHelper, renderer) {
+		this.injector = injector;
+		this.elementRef = elementRef;
+		this.windowRef = windowRef;
+		this.canDismissHelper = canDismissHelper;
+		this.renderer = renderer;
+		this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
+		this.scrollDisabled = false;
+		this.ionModalDidPresent = new Subject();
+		this.ionModalWillDismiss = new Subject();
+		this.didPresent = firstValueFrom(this.ionModalDidPresent);
+		this.willClose = firstValueFrom(this.ionModalWillDismiss);
+	}
+	ngOnInit() {
+		this.ionModalElement = this.elementRef.nativeElement.closest("ion-modal");
+		this.setAriaLabel();
+		this.listenForIonModalDidPresent();
+		this.listenForIonModalWillDismiss();
+		this.componentPropsInjector = Injector.create({
+			providers: [{
+				provide: COMPONENT_PROPS,
+				useValue: this.config.componentProps
+			}],
+			parent: this.injector
+		});
+	}
+	listenForIonModalDidPresent() {
+		if (this.ionModalElement) this.ionModalElement.addEventListener("ionModalDidPresent", () => {
+			this.ionModalDidPresent.next();
+			this.ionModalDidPresent.complete();
+		});
+	}
+	listenForIonModalWillDismiss() {
+		if (this.ionModalElement) this.ionModalElement.addEventListener("ionModalWillDismiss", () => {
+			this.ionModalWillDismiss.next();
+			this.ionModalWillDismiss.complete();
+		});
+	}
+	setAriaLabel() {
+		const ionModalElementDialog = getIonModalDialogAncestor(this.ionModalElement);
+		const ariaLabel = this.config.htmlAttributes?.["aria-label"];
+		if (ionModalElementDialog && ariaLabel) this.renderer.setAttribute(ionModalElementDialog, "aria-label", ariaLabel);
+	}
+	async close(data) {
+		if (this.ionModalElement) await this.ionModalElement.dismiss(data);
+	}
+	set canDismiss(callback) {
+		this.ionModalElement.canDismiss = this.canDismissHelper.getCanDismissCallback(callback);
+	}
+	onFocusChange() {
+		this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalCompactWrapperComponent,
+			deps: [
+				{ token: i0.Injector },
+				{ token: i0.ElementRef },
+				{ token: i1$2.WindowRef },
+				{ token: CanDismissHelper },
+				{ token: i0.Renderer2 }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: ModalCompactWrapperComponent,
+			isStandalone: true,
+			selector: "kirby-modal-compact-wrapper",
+			inputs: {
+				config: "config",
+				content: "content"
+			},
+			host: {
+				listeners: {
+					"window:focus": "onFocusChange()",
+					"window:focusout": "onFocusChange()"
+				},
+				properties: { "class.ion-page": "false" }
+			},
+			providers: [{
+				provide: Modal,
+				useExisting: ModalCompactWrapperComponent
+			}],
+			ngImport: i0,
+			template: "<!-- Outlet for ModalController -->\n<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n",
+			styles: [":host{display:block;padding:var(--kirby-spacing-m) var(--kirby-spacing-s)}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: CommonModule
+				},
+				{
+					kind: "directive",
+					type: i2.NgComponentOutlet,
+					selector: "[ngComponentOutlet]",
+					inputs: [
+						"ngComponentOutlet",
+						"ngComponentOutletInputs",
+						"ngComponentOutletInjector",
+						"ngComponentOutletEnvironmentInjector",
+						"ngComponentOutletContent",
+						"ngComponentOutletNgModule"
+					],
+					exportAs: ["ngComponentOutlet"]
+				},
+				{
+					kind: "directive",
+					type: i2.NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalCompactWrapperComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-modal-compact-wrapper",
+			providers: [{
+				provide: Modal,
+				useExisting: ModalCompactWrapperComponent
+			}],
+			imports: [CommonModule],
+			host: { "[class.ion-page]": "false" },
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<!-- Outlet for ModalController -->\n<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n",
+			styles: [":host{display:block;padding:var(--kirby-spacing-m) var(--kirby-spacing-s)}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.Injector },
+		{ type: i0.ElementRef },
+		{ type: i1$2.WindowRef },
+		{ type: CanDismissHelper },
+		{ type: i0.Renderer2 }
+	],
+	propDecorators: {
+		config: [{ type: Input }],
+		content: [{ type: Input }],
+		onFocusChange: [{
+			type: HostListener,
+			args: ["window:focus"]
+		}, {
+			type: HostListener,
+			args: ["window:focusout"]
+		}]
+	}
+});
+var ModalAnimationBuilderService = class ModalAnimationBuilderService {
+	constructor(platform) {
+		this.platform = platform;
+		this.easingEnter = KirbyAnimation.Easing.modal.enter;
+		this.easingLeave = KirbyAnimation.Easing.modal.exit;
+		this.duration = KirbyAnimation.Duration.LONG;
+		this.SwipeToCloseDefaults = { MIN_PRESENTING_SCALE: .93 };
+		this.createEnterAnimation = () => {
+			return {
+				backdropAnimation: createAnimation().fromTo("opacity", .01, "var(--backdrop-opacity)").beforeStyles({ "pointer-events": "none" }).afterClearStyles(["pointer-events"]),
+				wrapperAnimation: createAnimation().fromTo("transform", "translateY(100vh)", "translateY(0vh)")
+			};
+		};
+		this.createLeaveAnimation = () => {
+			return {
+				backdropAnimation: createAnimation().fromTo("opacity", "var(--backdrop-opacity)", 0),
+				wrapperAnimation: createAnimation().fromTo("transform", "translateY(0vh)", "translateY(100vh)")
+			};
+		};
+		this.getElementRoot = (el, fallback = el) => {
+			return el.shadowRoot || fallback;
+		};
+	}
+	enterAnimation(currentBackdrop) {
+		return (baseEl, opts) => {
+			const { presentingEl } = opts;
+			const root = this.getElementRoot(baseEl);
+			const { wrapperAnimation, backdropAnimation } = this.createEnterAnimation();
+			backdropAnimation.addElement(root.querySelector("ion-backdrop"));
+			wrapperAnimation.addElement(root.querySelectorAll(".modal-wrapper, .modal-shadow")).beforeStyles({ opacity: 1 });
+			const baseAnimation = createAnimation("entering-base").addElement(baseEl).easing(this.easingEnter).duration(this.duration).addAnimation(wrapperAnimation);
+			let currentBackdropAnimation;
+			if (currentBackdrop) currentBackdropAnimation = createAnimation().addElement(currentBackdrop).fromTo("opacity", "var(--backdrop-opacity)", .01);
+			if (presentingEl) {
+				const isMobile = !this.platform.isPhabletOrBigger();
+				const hasCardModal = presentingEl.tagName === "ION-MODAL" && presentingEl.presentingElement !== void 0;
+				const presentingElRoot = this.getElementRoot(presentingEl);
+				const presentingAnimation = createAnimation().beforeStyles({
+					transform: "translateY(0)",
+					"transform-origin": "top center",
+					overflow: "hidden"
+				});
+				const bodyEl = document.body;
+				if (isMobile) {
+					const transformOffset = !CSS.supports("width", "max(0px, 1px)") ? "30px" : "max(30px, var(--ion-safe-area-top))";
+					const finalTransform = `translateY(${hasCardModal ? "-10px" : transformOffset}) scale(${this.SwipeToCloseDefaults.MIN_PRESENTING_SCALE})`;
+					presentingAnimation.afterStyles({ transform: finalTransform }).beforeAddWrite(() => bodyEl.style.setProperty("background-color", "black")).addElement(presentingEl).keyframes([{
+						offset: 0,
+						filter: "contrast(1)",
+						transform: "translateY(0px) scale(1)",
+						borderRadius: "0px"
+					}, {
+						offset: 1,
+						filter: "contrast(0.85)",
+						transform: finalTransform,
+						borderRadius: "10px 10px 0 0"
+					}]);
+					baseAnimation.addAnimation(presentingAnimation);
+				} else {
+					baseAnimation.addAnimation(backdropAnimation);
+					if (currentBackdropAnimation) baseAnimation.addAnimation(currentBackdropAnimation);
+					if (!hasCardModal) wrapperAnimation.fromTo("opacity", "0", "1");
+					else {
+						const finalTransform = `translateY(-10px) scale(${hasCardModal ? this.SwipeToCloseDefaults.MIN_PRESENTING_SCALE : 1})`;
+						presentingAnimation.afterStyles({ transform: finalTransform }).addElement(presentingElRoot.querySelector(".modal-wrapper")).keyframes([{
+							offset: 0,
+							filter: "contrast(1)",
+							transform: "translateY(0) scale(1)"
+						}, {
+							offset: 1,
+							filter: "contrast(0.85)",
+							transform: finalTransform
+						}]);
+						const shadowAnimation = createAnimation().afterStyles({ transform: finalTransform }).addElement(presentingElRoot.querySelector(".modal-shadow")).keyframes([{
+							offset: 0,
+							opacity: "1",
+							transform: "translateY(0) scale(1)"
+						}, {
+							offset: 1,
+							opacity: "0",
+							transform: finalTransform
+						}]);
+						baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+					}
+				}
+			} else {
+				baseAnimation.addAnimation(backdropAnimation);
+				if (currentBackdropAnimation) baseAnimation.addAnimation(currentBackdropAnimation);
+			}
+			return baseAnimation;
+		};
+	}
+	leaveAnimation(currentBackdrop) {
+		return (baseEl, opts, duration = this.duration) => {
+			const { presentingEl } = opts;
+			const root = this.getElementRoot(baseEl);
+			const { wrapperAnimation, backdropAnimation } = this.createLeaveAnimation();
+			backdropAnimation.addElement(root.querySelector("ion-backdrop"));
+			wrapperAnimation.addElement(root.querySelectorAll(".modal-wrapper, .modal-shadow")).beforeStyles({ opacity: 1 });
+			const baseAnimation = createAnimation("leaving-base").addElement(baseEl).easing(this.easingLeave).duration(duration).addAnimation(wrapperAnimation);
+			let currentBackdropAnimation;
+			if (currentBackdrop) currentBackdropAnimation = createAnimation().addElement(currentBackdrop).fromTo("opacity", .01, "var(--backdrop-opacity)").afterStyles({ opacity: "var(--backdrop-opacity)" });
+			if (presentingEl) {
+				const isMobile = !this.platform.isPhabletOrBigger();
+				const hasCardModal = presentingEl.tagName === "ION-MODAL" && presentingEl.presentingElement !== void 0;
+				const presentingElRoot = this.getElementRoot(presentingEl);
+				const presentingAnimation = createAnimation().beforeClearStyles(["transform"]).afterClearStyles(["transform"]).onFinish((currentStep) => {
+					if (currentStep !== 1) return;
+					presentingEl.style.setProperty("overflow", "");
+					if (Array.from(bodyEl.querySelectorAll("ion-modal")).filter((m) => m.presentingElement !== void 0).length <= 1) bodyEl.style.setProperty("background-color", "");
+				});
+				const bodyEl = document.body;
+				if (isMobile) {
+					const transformOffset = !CSS.supports("width", "max(0px, 1px)") ? "30px" : "max(30px, var(--ion-safe-area-top))";
+					const finalTransform = `translateY(${hasCardModal ? "-10px" : transformOffset}) scale(${this.SwipeToCloseDefaults.MIN_PRESENTING_SCALE})`;
+					presentingAnimation.addElement(presentingEl).keyframes([{
+						offset: 0,
+						filter: "contrast(0.85)",
+						transform: finalTransform,
+						borderRadius: "10px 10px 0 0"
+					}, {
+						offset: 1,
+						filter: "contrast(1)",
+						transform: "translateY(0px) scale(1)",
+						borderRadius: "0px"
+					}]);
+					baseAnimation.addAnimation(presentingAnimation);
+				} else {
+					baseAnimation.addAnimation(backdropAnimation);
+					if (currentBackdropAnimation) baseAnimation.addAnimation(currentBackdropAnimation);
+					if (!hasCardModal) wrapperAnimation.fromTo("opacity", "1", "0");
+					else {
+						const finalTransform = `translateY(-10px) scale(${hasCardModal ? this.SwipeToCloseDefaults.MIN_PRESENTING_SCALE : 1})`;
+						presentingAnimation.addElement(presentingElRoot.querySelector(".modal-wrapper")).afterStyles({ transform: "translate3d(0, 0, 0)" }).keyframes([{
+							offset: 0,
+							filter: "contrast(0.85)",
+							transform: finalTransform
+						}, {
+							offset: 1,
+							filter: "contrast(1)",
+							transform: "translateY(0) scale(1)"
+						}]);
+						const shadowAnimation = createAnimation().addElement(presentingElRoot.querySelector(".modal-shadow")).afterStyles({ transform: "translateY(0) scale(1)" }).keyframes([{
+							offset: 0,
+							opacity: "0",
+							transform: finalTransform
+						}, {
+							offset: 1,
+							opacity: "1",
+							transform: "translateY(0) scale(1)"
+						}]);
+						baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
+					}
+				}
+			} else {
+				baseAnimation.addAnimation(backdropAnimation);
+				if (currentBackdropAnimation) baseAnimation.addAnimation(currentBackdropAnimation);
+			}
+			return baseAnimation;
+		};
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalAnimationBuilderService,
+			deps: [{ token: i3.PlatformService }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalAnimationBuilderService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalAnimationBuilderService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i3.PlatformService }]
+});
+var ModalNavigationService = class ModalNavigationService {
+	constructor(router, route) {
+		this.router = router;
+		this.route = route;
+		this.routerEvents$ = defer(() => {
+			const events = this.router.events;
+			return events.closed ? EMPTY : events;
+		});
+		this.navigationEndListener$ = this.routerEvents$.pipe(filter((event) => event instanceof NavigationEnd));
+	}
+	isModalRoute(url) {
+		return url.includes("(modal:");
+	}
+	getCurrentActivatedRoute() {
+		let childRoute = this.route.root;
+		while (childRoute.firstChild) childRoute = childRoute.firstChild;
+		return childRoute;
+	}
+	async getModalRoutes(routeConfig, moduleRootRoutePath) {
+		const flattenedRoutes = [].concat(...routeConfig);
+		let modalRoutes = [];
+		const moduleRootPaths = await this.getModuleRootPath(flattenedRoutes, moduleRootRoutePath);
+		if (moduleRootPaths) modalRoutes = this.getModalRoutePaths(flattenedRoutes, moduleRootPaths);
+		return modalRoutes;
+	}
+	async getModuleRootPath(routes, moduleRootRoutePath) {
+		if (moduleRootRoutePath) {
+			const trimmedPaths = moduleRootRoutePath.trim().split("/").filter((path) => !!path);
+			return [""].concat(trimmedPaths);
+		}
+		const currentRoutePaths = await this.getCurrentRoutePaths();
+		return this.getRoutePathsWithoutChildSegments(currentRoutePaths, routes);
+	}
+	async getCurrentRoutePaths() {
+		const rootPath = [""];
+		const currentNavigation = this.router.currentNavigation();
+		if (!this.router.navigated && !currentNavigation) return rootPath;
+		if (currentNavigation) await firstValueFrom(this.navigationEndListener$);
+		let childRoute = this.route.snapshot.root;
+		while (childRoute.firstChild) childRoute = childRoute.firstChild;
+		const currentBackdropRoutePath = childRoute.pathFromRoot.filter((route) => route.outlet !== "modal");
+		return rootPath.concat(...currentBackdropRoutePath.map((route) => route.url.filter((segment) => !!segment.path).map((segment) => segment.path)));
+	}
+	getRoutePathsWithoutChildSegments(routePaths, routes) {
+		if (!routePaths.length) return routePaths;
+		const matchedChildRoute = this.findChildRouteForUrl(routePaths.join("/"), routes);
+		if (!matchedChildRoute) return routePaths;
+		const childSegmentCount = matchedChildRoute.replace(/^\//, "").split("/").length;
+		return routePaths.slice(0, -childSegmentCount);
+	}
+	findChildRouteForUrl(url, routes) {
+		const moduleRelativePaths = this.getRoutePaths(routes, [""]).sort().reverse();
+		let matchedChildRoute = moduleRelativePaths.find((path) => url.endsWith(path));
+		if (!matchedChildRoute) {
+			const exactMatch = false;
+			matchedChildRoute = moduleRelativePaths.find((path) => path.includes("/:") && this.pathContainsChildRouteWithUrlParams(url, path, exactMatch));
+		}
+		return matchedChildRoute;
+	}
+	pathContainsChildRouteWithUrlParams(path, childRouteWithUrlParams, exactMatch) {
+		const pathSegments = path.split("/");
+		const startSlashRegex = /^\//;
+		let childRouteToMatch = childRouteWithUrlParams;
+		if (!exactMatch) childRouteToMatch = childRouteWithUrlParams.replace(startSlashRegex, "");
+		const pathContainsChildRoute = childRouteToMatch.split("/").reverse().every((childRouteSegment) => {
+			const pathSegment = pathSegments.pop();
+			return childRouteSegment.startsWith(":") || childRouteSegment === pathSegment;
+		});
+		if (exactMatch) return pathSegments.length === 0 && pathContainsChildRoute;
+		return pathContainsChildRoute;
+	}
+	getRoutePaths(routes, parentPath) {
+		return Array.isArray(routes) ? [].concat(...routes.map((route) => this.getRoutePath(route, parentPath))) : [];
+	}
+	getRoutePath(route, parentPath) {
+		const routes = [];
+		if (route.outlet) return routes;
+		const currentPath = [...parentPath];
+		if (route.path) {
+			currentPath.push(route.path);
+			routes.push(currentPath.join("/"));
+		}
+		return routes.concat(this.getRoutePaths(route.children, currentPath));
+	}
+	getModalRoutePath(route, parentPath) {
+		const modalOutletName = "modal";
+		if (!!route.path && route.outlet === modalOutletName) {
+			const modalOutletPath = `(${modalOutletName}:${route.path})`;
+			return [[...parentPath, modalOutletPath].join("/")];
+		}
+		const currentPath = [...parentPath];
+		if (route.path) currentPath.push(route.path);
+		return [].concat(...this.getModalRoutePaths(route.children, currentPath));
+	}
+	getModalRoutePaths(routes, parentPath) {
+		return Array.isArray(routes) ? [].concat(...routes.map((route) => this.getModalRoutePath(route, parentPath))) : [];
+	}
+	isNewModalWindow(navigationEnd) {
+		const currentNavigation = this.router.currentNavigation();
+		if (!currentNavigation || !currentNavigation.previousNavigation) return true;
+		const previousRoutePath = (currentNavigation.previousNavigation.finalUrl || currentNavigation.previousNavigation.extractedUrl).toString();
+		const wasModalRoute = this.isModalRoute(previousRoutePath);
+		const isModalRoute = this.isModalRoute(navigationEnd.urlAfterRedirects);
+		if (!wasModalRoute && isModalRoute) return true;
+		const currentModalRouteParent = navigationEnd.urlAfterRedirects.split("/(modal:")[0];
+		return previousRoutePath.split("/(modal:")[0] !== currentModalRouteParent;
+	}
+	async waitForCurrentThenGetNavigationEndStream() {
+		if (this.router.currentNavigation()) {
+			const currentNavigationEnd = await firstValueFrom(this.navigationEndListener$);
+			return this.navigationEndListener$.pipe(startWith(currentNavigationEnd));
+		}
+		return this.navigationEndListener$;
+	}
+	modalRouteActivatedFor(navigationEnd$, modalRouteSet, modalRoutesContainsUrlParams) {
+		return navigationEnd$.pipe(filter((navigationEnd) => this.modalRouteSetContainsPath(modalRouteSet, navigationEnd, modalRoutesContainsUrlParams)), map((navigationEnd) => {
+			return {
+				route: this.getCurrentActivatedRoute(),
+				isNewModal: this.isNewModalWindow(navigationEnd)
+			};
+		}));
+	}
+	modalRouteDeactivatedFor(navigationEnd$, modalRouteSet, modalRoutesContainsUrlParams) {
+		return navigationEnd$.pipe(pairwise(), filter(([prevNavigation, _]) => this.modalRouteSetContainsPath(modalRouteSet, prevNavigation, modalRoutesContainsUrlParams)), map(([_, currentNavigation]) => {
+			return !this.isModalRoute(currentNavigation.urlAfterRedirects) || this.isNewModalWindow(currentNavigation);
+		}), filter((isDeactivation) => isDeactivation));
+	}
+	modalRouteSetContainsPath(modalRouteSet, navigationEnd, modalRoutesContainsUrlParams) {
+		const pathname = navigationEnd.urlAfterRedirects.split("?")[0];
+		let hasRoute = modalRouteSet.has(pathname);
+		if (!hasRoute && modalRoutesContainsUrlParams) {
+			for (const route of modalRouteSet) if (this.pathContainsChildRouteWithUrlParams(pathname, route, true)) {
+				hasRoute = true;
+				break;
+			}
+		}
+		return hasRoute;
+	}
+	async getModalNavigation(routeConfig, moduleRootRoutePath) {
+		if (Array.isArray(routeConfig)) {
+			const navigationEnd$ = await this.waitForCurrentThenGetNavigationEndStream();
+			const modalRoutes = await this.getModalRoutes(routeConfig, moduleRootRoutePath);
+			if (modalRoutes.length > 0) {
+				const modalRoutesContainsUrlParams = modalRoutes.some((route) => route.includes("/:"));
+				const modalRouteSet = new Set(modalRoutes);
+				return {
+					activated$: this.modalRouteActivatedFor(navigationEnd$, modalRouteSet, modalRoutesContainsUrlParams),
+					deactivated$: this.modalRouteDeactivatedFor(navigationEnd$, modalRouteSet, modalRoutesContainsUrlParams)
+				};
+			}
+		}
+		return {
+			activated$: EMPTY,
+			deactivated$: EMPTY
+		};
+	}
+	async navigateToModal(path, queryParams) {
+		const commands = Array.isArray(path) ? [...path] : path.split("/");
+		const childPath = commands.pop();
+		return await this.router.navigate([...commands, { outlets: { modal: [childPath] } }], {
+			queryParams,
+			relativeTo: this.getCurrentActivatedRoute()
+		});
+	}
+	async navigateWithinModal(relativePath, queryParams) {
+		return this.router.navigate([relativePath], {
+			queryParams,
+			relativeTo: this.getCurrentActivatedRoute()
+		});
+	}
+	async navigateOutOfModalOutlet() {
+		const currentActivatedRoute = this.getCurrentActivatedRoute();
+		const currentNavigationFinalUrl = this.router.currentNavigation()?.finalUrl?.toString();
+		const isCurrentlyNavigatingOutOfModalOutlet = currentNavigationFinalUrl && !this.isModalRoute(currentNavigationFinalUrl);
+		if (currentActivatedRoute.outlet !== "modal" || isCurrentlyNavigatingOutOfModalOutlet) return Promise.resolve(true);
+		const parentRoute = this.getBackdropRoute(currentActivatedRoute);
+		return this.router.navigate(["./"], { relativeTo: parentRoute });
+	}
+	getBackdropRoute(currentActivatedRoute) {
+		let parentRoute = currentActivatedRoute.parent;
+		while (parentRoute && !parentRoute.component && !!parentRoute.parent) parentRoute = parentRoute.parent;
+		return parentRoute;
+	}
+	handleBrowserBackButton(modal) {
+		const popstateNavigationStart$ = this.routerEvents$.pipe(filter((event) => event instanceof NavigationStart && event.navigationTrigger === "popstate"));
+		this.routerEvents$.pipe(filter((event) => event instanceof NavigationEnd)).pipe(skipUntil(popstateNavigationStart$), takeUntil(modal.onWillDismiss())).subscribe(() => {
+			modal.dismiss();
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalNavigationService,
+			deps: [{ token: i5.Router }, { token: i5.ActivatedRoute }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalNavigationService,
+			providedIn: "root"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalNavigationService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => [{ type: i5.Router }, { type: i5.ActivatedRoute }]
+});
+var ModalHelper = class ModalHelper {
+	constructor(ionicModalController, modalAnimationBuilder, modalNavigationService, windowRef, canDismissHelper) {
+		this.ionicModalController = ionicModalController;
+		this.modalAnimationBuilder = modalAnimationBuilder;
+		this.modalNavigationService = modalNavigationService;
+		this.windowRef = windowRef;
+		this.canDismissHelper = canDismissHelper;
+		this.isModalOpening = false;
+	}
+	async showModalWindow(config) {
+		if (this.isModalOpening) return;
+		config.flavor = config.flavor || "modal";
+		let currentBackdrop;
+		const topMostModal = await this.ionicModalController.getTop();
+		if (topMostModal) currentBackdrop = topMostModal.shadowRoot.querySelector("ion-backdrop");
+		const enterAnimation = this.modalAnimationBuilder.enterAnimation(currentBackdrop);
+		const leaveAnimation = this.modalAnimationBuilder.leaveAnimation(currentBackdrop);
+		const defaultModalSize = config.interactWithBackground ? null : "medium";
+		const modalSize = config.size || defaultModalSize;
+		const allow_scroll_class = "allow-background-scroll";
+		let customCssClasses = [];
+		if (config.cssClass) customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];
+		if (config.interactWithBackground) this.windowRef.nativeWindow.document.body.classList.add(allow_scroll_class);
+		let canDismiss = true;
+		if (config.canDismiss) canDismiss = this.canDismissHelper.getCanDismissCallback(config.canDismiss);
+		this.isModalOpening = true;
+		const ionModal = await this.ionicModalController.create({
+			component: config.flavor === "compact" ? ModalCompactWrapperComponent : ModalWrapperComponent,
+			cssClass: [
+				"kirby-overlay",
+				"kirby-modal",
+				modalSize ? `kirby-modal-${modalSize}` : null,
+				config.flavor === "drawer" ? "kirby-drawer" : null,
+				config.flavor === "compact" ? "kirby-modal-compact" : null,
+				config.interactWithBackground ? "interact-with-background" : null,
+				...customCssClasses
+			],
+			backdropDismiss: config.flavor === "compact" || config.interactWithBackground ? false : true,
+			showBackdrop: !config.interactWithBackground,
+			componentProps: { config },
+			htmlAttributes: { ...config.htmlAttributes },
+			keyboardClose: false,
+			canDismiss,
+			enterAnimation,
+			leaveAnimation
+		});
+		if (config.interactWithBackground) ionModal.onDidDismiss().then(() => {
+			this.windowRef.nativeWindow.document.body.classList.remove(allow_scroll_class);
+		});
+		if (config.customHeight) ionModal.style.setProperty("--kirby-modal-height", config.customHeight);
+		const onWillDismiss = ionModal.onWillDismiss();
+		const overlay = {
+			dismiss: ionModal.dismiss.bind(ionModal),
+			onWillDismiss,
+			onDidDismiss: ionModal.onDidDismiss(),
+			isDismissing: false
+		};
+		onWillDismiss.then(() => {
+			overlay.isDismissing = true;
+		});
+		await ionModal.present();
+		if (!ionModal.contains(document.activeElement)) ionModal.focus();
+		if (!config.modalRoute) this.modalNavigationService.handleBrowserBackButton(ionModal);
+		this.isModalOpening = false;
+		return overlay;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalHelper,
+			deps: [
+				{ token: i1$1.ModalController },
+				{ token: ModalAnimationBuilderService },
+				{ token: ModalNavigationService },
+				{ token: i1$2.WindowRef },
+				{ token: CanDismissHelper }
+			],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalHelper
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalHelper,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [
+		{ type: i1$1.ModalController },
+		{ type: ModalAnimationBuilderService },
+		{ type: ModalNavigationService },
+		{ type: i1$2.WindowRef },
+		{ type: CanDismissHelper }
+	]
+});
+const KIRBY_ACTION_SHEET_DEPRECATION_WARNING = "[Kirby action sheet] Deprecated - Use Menu component instead";
+var ActionSheetComponent = class ActionSheetComponent {
+	constructor() {
+		this.cancelButtonText = "Cancel";
+		this.hideCancel = false;
+		this.disabled = false;
+		this.cancel = new EventEmitter();
+		this.itemSelect = new EventEmitter();
+		console.warn(KIRBY_ACTION_SHEET_DEPRECATION_WARNING);
+	}
+	onItemSelect(selection) {
+		this.itemSelect.emit(selection);
+	}
+	onCancel() {
+		this.cancel.emit();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ActionSheetComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: ActionSheetComponent,
+			isStandalone: true,
+			selector: "kirby-action-sheet",
+			inputs: {
+				cancelButtonText: "cancelButtonText",
+				hideCancel: "hideCancel",
+				disabled: "disabled",
+				header: "header",
+				subheader: "subheader",
+				items: "items"
+			},
+			outputs: {
+				cancel: "cancel",
+				itemSelect: "itemSelect"
+			},
+			ngImport: i0,
+			template: "<kirby-card>\n  @if (header) {\n    <kirby-card-header\n      [title]=\"header\"\n      [isTitleBold]=\"true\"\n      [subtitle]=\"subheader\"\n    ></kirby-card-header>\n  }\n  @for (item of items; track item.id) {\n    <button\n      kirby-button\n      expand=\"block\"\n      size=\"lg\"\n      [noDecoration]=\"true\"\n      (click)=\"onItemSelect(item)\"\n    >\n      {{ item.text }}\n    </button>\n  }\n</kirby-card>\n@if (!hideCancel) {\n  <button kirby-button class=\"cancel-btn\" size=\"lg\" attentionLevel=\"3\" (click)=\"onCancel()\">\n    {{ cancelButtonText }}\n  </button>\n}\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-internal-margin-horizontal-default: var(--kirby-spacing-l)}@media(max-width:320px){:host{--kirby-internal-margin-horizontal-default: var(--kirby-spacing-s)}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total));padding-bottom:var(--kirby-safe-area-bottom, 0)}:host button[kirby-button].no-decoration:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:var(--kirby-elevation-8)}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-8),var(--kirby-focus-ring-md-inset)}.cancel-btn{font-weight:var(--kirby-font-weight-bold);margin-top:var(--kirby-spacing-s);margin-bottom:var(--kirby-spacing-m);pointer-events:auto}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: CardComponent,
+					selector: "kirby-card",
+					inputs: [
+						"title",
+						"subtitle",
+						"backgroundImageUrl",
+						"hasPadding",
+						"sizes",
+						"variant"
+					]
+				},
+				{
+					kind: "component",
+					type: CardHeaderComponent,
+					selector: "kirby-card-header",
+					inputs: [
+						"title",
+						"subtitle",
+						"isTitleBold",
+						"flagged",
+						"hasPadding"
+					]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "button[kirby-button],Button[kirby-button],a[kirby-button]",
+					inputs: [
+						"attentionLevel",
+						"noDecoration",
+						"themeColor",
+						"expand",
+						"isFloating",
+						"size",
+						"showIconOnly"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ActionSheetComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [
+				CardComponent,
+				CardHeaderComponent,
+				ButtonComponent
+			],
+			selector: "kirby-action-sheet",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<kirby-card>\n  @if (header) {\n    <kirby-card-header\n      [title]=\"header\"\n      [isTitleBold]=\"true\"\n      [subtitle]=\"subheader\"\n    ></kirby-card-header>\n  }\n  @for (item of items; track item.id) {\n    <button\n      kirby-button\n      expand=\"block\"\n      size=\"lg\"\n      [noDecoration]=\"true\"\n      (click)=\"onItemSelect(item)\"\n    >\n      {{ item.text }}\n    </button>\n  }\n</kirby-card>\n@if (!hideCancel) {\n  <button kirby-button class=\"cancel-btn\" size=\"lg\" attentionLevel=\"3\" (click)=\"onCancel()\">\n    {{ cancelButtonText }}\n  </button>\n}\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-internal-margin-horizontal-default: var(--kirby-spacing-l)}@media(max-width:320px){:host{--kirby-internal-margin-horizontal-default: var(--kirby-spacing-s)}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total));padding-bottom:var(--kirby-safe-area-bottom, 0)}:host button[kirby-button].no-decoration:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:var(--kirby-elevation-8)}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-8),var(--kirby-focus-ring-md-inset)}.cancel-btn{font-weight:var(--kirby-font-weight-bold);margin-top:var(--kirby-spacing-s);margin-bottom:var(--kirby-spacing-m);pointer-events:auto}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		cancelButtonText: [{ type: Input }],
+		hideCancel: [{ type: Input }],
+		disabled: [{ type: Input }],
+		header: [{ type: Input }],
+		subheader: [{ type: Input }],
+		items: [{ type: Input }],
+		cancel: [{ type: Output }],
+		itemSelect: [{ type: Output }]
+	}
+});
+var ActionSheetHelper = class ActionSheetHelper {
+	constructor(ionicModalController) {
+		this.ionicModalController = ionicModalController;
+	}
+	async showActionSheet(config) {
+		const cancel = new EventEmitter();
+		const itemSelect = new EventEmitter();
+		const ionModal = await this.ionicModalController.create({
+			component: ActionSheetComponent,
+			cssClass: ["kirby-overlay", "kirby-action-sheet"],
+			componentProps: {
+				...config,
+				cancel,
+				itemSelect
+			},
+			backdropDismiss: true
+		});
+		ionModal.shadowRoot.querySelector(".modal-shadow").remove();
+		const cancelSubscription = cancel.subscribe(() => ionModal.dismiss());
+		const itemSelectSubscription = itemSelect.subscribe((item) => ionModal.dismiss(item));
+		ionModal.onDidDismiss().then(() => {
+			cancelSubscription.unsubscribe();
+			itemSelectSubscription.unsubscribe();
+		});
+		await ionModal.present();
+		return {
+			dismiss: ionModal.dismiss.bind(ionModal),
+			onWillDismiss: ionModal.onWillDismiss(),
+			onDidDismiss: ionModal.onDidDismiss()
+		};
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ActionSheetHelper,
+			deps: [{ token: i1$1.ModalController }],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ActionSheetHelper
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ActionSheetHelper,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [{ type: i1$1.ModalController }]
+});
+var ModalController = class ModalController {
+	constructor(modalHelper, actionSheetHelper, alertHelper, modalNavigationService, routeConfig) {
+		this.modalHelper = modalHelper;
+		this.actionSheetHelper = actionSheetHelper;
+		this.alertHelper = alertHelper;
+		this.modalNavigationService = modalNavigationService;
+		this.routeConfig = routeConfig;
+		this.overlays = [];
+		this.noOverlayRegisteredErrorMessage = "No modal overlays are currently registered";
+		this.destroy$ = new Subject();
+	}
+	async initialize(moduleRootRoutePath) {
+		const modalNavigation = await this.modalNavigationService.getModalNavigation(this.routeConfig, moduleRootRoutePath);
+		this.onModalRouteActivated(modalNavigation.activated$);
+		this.onModalRouteDeactivated(modalNavigation.deactivated$);
+	}
+	onModalRouteActivated(modalRouteActivated$) {
+		const navigateOnWillClose = () => {
+			this.modalNavigationService.navigateOutOfModalOutlet();
+		};
+		const siblingModalRouteActivated$ = modalRouteActivated$.pipe(filter((modalRouteActivation) => !modalRouteActivation.isNewModal), map((modalRouteActivation) => modalRouteActivation.route));
+		modalRouteActivated$.pipe(takeUntil(this.destroy$), filter(() => this.overlays.length === 0)).subscribe(async (modalRouteActivation) => {
+			if (modalRouteActivation.isNewModal) await this.showModalRoute(modalRouteActivation.route, siblingModalRouteActivated$, navigateOnWillClose);
+		});
+	}
+	onModalRouteDeactivated(modalRouteDeactivated$) {
+		modalRouteDeactivated$.pipe(takeUntil(this.destroy$), filter(() => this.overlays.some((overlay) => overlay.isDismissing !== true))).subscribe(async () => {
+			await this.hideAll();
+		});
+	}
+	async showModal(config, onClose) {
+		await this.showAndRegisterOverlay(() => this.modalHelper.showModalWindow(config), onClose);
+	}
+	async navigateToModal(path, queryParams) {
+		return this.modalNavigationService.navigateToModal(path, queryParams);
+	}
+	async navigateWithinModal(relativePath, queryParams) {
+		return this.modalNavigationService.navigateWithinModal(relativePath, queryParams);
+	}
+	async showModalRoute(modalRoute, siblingModalRouteActivated$, onWillClose) {
+		const config = {
+			...modalRoute.snapshot.data.modalConfig,
+			component: null,
+			modalRoute,
+			siblingModalRouteActivated$
+		};
+		await this.showAndRegisterOverlay(() => this.modalHelper.showModalWindow(config), null, onWillClose);
+	}
+	async showActionSheet(config, onClose) {
+		await this.showAndRegisterOverlay(() => this.actionSheetHelper.showActionSheet(config), onClose);
+	}
+	async showAlert(config, onClose) {
+		await this.showAndRegisterOverlay(() => this.alertHelper.showAlert(config), onClose);
+	}
+	async showAndRegisterOverlay(showOverlay, onCloseOverlay, onWillCloseOverlay) {
+		const overlay = await showOverlay();
+		if (!overlay) return;
+		this.overlays.push(overlay);
+		if (typeof onWillCloseOverlay === "function") overlay.onWillDismiss.then((event) => onWillCloseOverlay(event.data));
+		overlay.onDidDismiss.then((event) => {
+			this.overlays.pop();
+			if (typeof onCloseOverlay === "function") onCloseOverlay(event.data);
+		});
+	}
+	async hideTopmost(data) {
+		const overlay = this.overlays[this.overlays.length - 1];
+		if (!overlay) throw new Error(this.noOverlayRegisteredErrorMessage);
+		return overlay.dismiss(data);
+	}
+	async hideAll() {
+		await Promise.all(this.overlays.filter((overlay) => overlay.isDismissing !== true).map(async (overlay) => {
+			await overlay.dismiss();
+		}));
+	}
+	getTopMost() {
+		return this.overlays[this.overlays.length - 1];
+	}
+	ngOnDestroy() {
+		this.destroy$.next();
+		this.destroy$.complete();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalController,
+			deps: [
+				{ token: ModalHelper },
+				{ token: ActionSheetHelper },
+				{ token: AlertHelper },
+				{ token: ModalNavigationService },
+				{
+					token: ROUTES,
+					optional: true
+				}
+			],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalController
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalController,
+	decorators: [{ type: Injectable }],
+	ctorParameters: () => [
+		{ type: ModalHelper },
+		{ type: ActionSheetHelper },
+		{ type: AlertHelper },
+		{ type: ModalNavigationService },
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: [ROUTES]
+			}]
+		}
+	]
+});
 const CanDismissModalGuard = async (_component, _currentRoute, currentState, nextState) => {
-    const modalNavService = inject(ModalNavigationService);
-    const currentRouteIsModal = modalNavService.isModalRoute(currentState.url);
-    const nextRouteIsModal = modalNavService.isModalRoute(nextState.url);
-    const isNavigatingWithinModal = currentRouteIsModal && nextRouteIsModal;
-    if (isNavigatingWithinModal) {
-        return true;
-    }
-    const modalController = inject(ModalController);
-    const topMostModal = modalController.getTopMost();
-    if (topMostModal) {
-        if (topMostModal.isDismissing) {
-            return true;
-        }
-        return topMostModal.dismiss();
-    }
-    else {
-        // Declarative modals are not created through Kirby Modalcontroller, let's try Ionic:
-        const ionicModalController = inject(ModalController$1);
-        const ionModal = await ionicModalController.getTop();
-        if (ionModal) {
-            return ionModal.dismiss();
-        }
-    }
-    return true;
+	const modalNavService = inject(ModalNavigationService);
+	const currentRouteIsModal = modalNavService.isModalRoute(currentState.url);
+	const nextRouteIsModal = modalNavService.isModalRoute(nextState.url);
+	if (currentRouteIsModal && nextRouteIsModal) return true;
+	const topMostModal = inject(ModalController).getTopMost();
+	if (topMostModal) {
+		if (topMostModal.isDismissing) return true;
+		return topMostModal.dismiss();
+	} else {
+		const ionModal = await inject(ModalController$1).getTop();
+		if (ionModal) return ionModal.dismiss();
+	}
+	return true;
 };
-
-class ModalComponent {
-    set canDismiss(canDismiss) {
-        typeof canDismiss === 'boolean'
-            ? (this._canDismiss = canDismiss)
-            : (this._canDismiss = this.canDismissHelper.getCanDismissCallback(canDismiss));
-    }
-    constructor(canDismissHelper, modalNavigationService, windowRef, elementRef) {
-        this.canDismissHelper = canDismissHelper;
-        this.modalNavigationService = modalNavigationService;
-        this.windowRef = windowRef;
-        this.elementRef = elementRef;
-        this.isOpen = false;
-        this.size = 'medium';
-        this.scrollDisabled = false;
-        // NOTE: input properties forwarded to modal-wrapper ModalConfig
-        this.collapseTitle = false;
-        this.customHeight = undefined;
-        this.flavor = 'modal';
-        this.drawerSupplementaryAction = undefined;
-        this.interactWithBackground = false;
-        // end NOTE
-        this.willPresent = new EventEmitter();
-        this.didPresent = new EventEmitter();
-        this.didDismiss = new EventEmitter();
-        this.willDismiss = new EventEmitter();
-        /**
-         * We populate the ModalConfig with defaults here. This ensures that we can
-         * guard for `if (key in this._config)` and only update the config when any of these
-         * inputs change.
-         */
-        this._config = {
-            collapseTitle: this.collapseTitle,
-            customHeight: this.customHeight,
-            flavor: this.flavor,
-            drawerSupplementaryAction: this.drawerSupplementaryAction,
-            interactWithBackground: this.interactWithBackground,
-        };
-        this._canDismiss = true;
-    }
-    ngOnInit() {
-        this.forwardAriaLabel();
-    }
-    ngOnChanges(changes) {
-        this.updateModalConfigOnChange(changes);
-    }
-    scrollToTop(scrollDuration) {
-        this.ionContent.scrollToTop(scrollDuration);
-    }
-    scrollToBottom(scrollDuration) {
-        this.ionContent.scrollToBottom(scrollDuration);
-    }
-    _onWillPresent(event) {
-        this.willPresent.emit(event);
-        if (this.interactWithBackground) {
-            this.windowRef.nativeWindow.document.body.classList.add('allow-background-scroll');
-        }
-    }
-    _onDidPresent(event) {
-        this.modalNavigationService.handleBrowserBackButton(this.modalElement.nativeElement);
-        this.didPresent.emit(event);
-    }
-    _onWillDismiss(event) {
-        if (this.interactWithBackground) {
-            this.windowRef.nativeWindow.document.body.classList.remove('allow-background-scroll');
-        }
-        this.willDismiss.emit(event);
-    }
-    _onDidDismiss(event) {
-        this.didDismiss.emit(event);
-    }
-    updateModalConfigOnChange(changes) {
-        Object.entries(changes).forEach(([key]) => {
-            const isModalConfigProperty = key in this._config;
-            if (isModalConfigProperty) {
-                this._config[key] = changes[key].currentValue;
-            }
-        });
-    }
-    forwardAriaLabel() {
-        // Instead of setting aria label on ion-modal in the template we forward it to modal-wrapper for consistency
-        // and so we do not start listening for title changes in the modal-wrapper.
-        this._config.htmlAttributes = {
-            'aria-label': inheritAriaLabelText(this.elementRef.nativeElement),
-        };
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalComponent, deps: [{ token: CanDismissHelper }, { token: ModalNavigationService }, { token: i1.WindowRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ModalComponent, isStandalone: true, selector: "kirby-modal", inputs: { isOpen: "isOpen", trigger: "trigger", size: "size", scrollDisabled: "scrollDisabled", canDismiss: "canDismiss", collapseTitle: "collapseTitle", customHeight: "customHeight", flavor: "flavor", drawerSupplementaryAction: "drawerSupplementaryAction", interactWithBackground: "interactWithBackground" }, outputs: { willPresent: "willPresent", didPresent: "didPresent", didDismiss: "didDismiss", willDismiss: "willDismiss" }, queries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true, static: true }], viewQueries: [{ propertyName: "modalElement", first: true, predicate: IonModal, descendants: true, read: ElementRef, static: true }, { propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-modal\n  class=\"kirby-modal kirby-overlay kirby-modal-{{ size }}\"\n  [ngClass]=\"[\n    flavor === 'compact' ? 'kirby-modal-compact' : 'kirby-' + flavor,\n    interactWithBackground ? 'interact-with-background' : '',\n  ]\"\n  [isOpen]=\"isOpen\"\n  [trigger]=\"trigger\"\n  [canDismiss]=\"_canDismiss\"\n  [showBackdrop]=\"!interactWithBackground\"\n  [style.--kirby-modal-height]=\"customHeight\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    @if (flavor === 'compact') {\n      <kirby-modal-compact-wrapper\n        [config]=\"_config\"\n        [content]=\"template\"\n      ></kirby-modal-compact-wrapper>\n    } @else {\n      <kirby-modal-wrapper\n        class=\"ion-page\"\n        [config]=\"_config\"\n        [content]=\"template\"\n        [scrollDisabled]=\"scrollDisabled\"\n      ></kirby-modal-wrapper>\n    }\n  </ng-template>\n</ion-modal>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonModal, selector: "ion-modal" }, { kind: "component", type: ModalWrapperComponent, selector: "kirby-modal-wrapper", inputs: ["scrollDisabled", "config", "content"] }, { kind: "component", type: ModalCompactWrapperComponent, selector: "kirby-modal-compact-wrapper", inputs: ["config", "content"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-modal', imports: [
-                        CommonModule,
-                        IconComponent,
-                        IonModal,
-                        ModalWrapperComponent,
-                        ModalCompactWrapperComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-modal\n  class=\"kirby-modal kirby-overlay kirby-modal-{{ size }}\"\n  [ngClass]=\"[\n    flavor === 'compact' ? 'kirby-modal-compact' : 'kirby-' + flavor,\n    interactWithBackground ? 'interact-with-background' : '',\n  ]\"\n  [isOpen]=\"isOpen\"\n  [trigger]=\"trigger\"\n  [canDismiss]=\"_canDismiss\"\n  [showBackdrop]=\"!interactWithBackground\"\n  [style.--kirby-modal-height]=\"customHeight\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    @if (flavor === 'compact') {\n      <kirby-modal-compact-wrapper\n        [config]=\"_config\"\n        [content]=\"template\"\n      ></kirby-modal-compact-wrapper>\n    } @else {\n      <kirby-modal-wrapper\n        class=\"ion-page\"\n        [config]=\"_config\"\n        [content]=\"template\"\n        [scrollDisabled]=\"scrollDisabled\"\n      ></kirby-modal-wrapper>\n    }\n  </ng-template>\n</ion-modal>\n" }]
-        }], ctorParameters: () => [{ type: CanDismissHelper }, { type: ModalNavigationService }, { type: i1.WindowRef }, { type: i0.ElementRef }], propDecorators: { modalElement: [{
-                type: ViewChild,
-                args: [IonModal, { static: true, read: ElementRef }]
-            }], ionContent: [{
-                type: ViewChild,
-                args: [IonContent]
-            }], template: [{
-                type: ContentChild,
-                args: [TemplateRef, { static: true }]
-            }], isOpen: [{
-                type: Input
-            }], trigger: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], scrollDisabled: [{
-                type: Input
-            }], canDismiss: [{
-                type: Input
-            }], collapseTitle: [{
-                type: Input
-            }], customHeight: [{
-                type: Input
-            }], flavor: [{
-                type: Input
-            }], drawerSupplementaryAction: [{
-                type: Input
-            }], interactWithBackground: [{
-                type: Input
-            }], willPresent: [{
-                type: Output
-            }], didPresent: [{
-                type: Output
-            }], didDismiss: [{
-                type: Output
-            }], willDismiss: [{
-                type: Output
-            }] } });
-
-class ModalFooterComponent extends ModalElementComponent {
-    get _cssClass() {
-        return [this.themeColor, this.type].filter((cssClass) => !!cssClass);
-    }
-    constructor(elementRef, modalElementsAdvertiser) {
-        super(ModalElementType.FOOTER, elementRef, modalElementsAdvertiser);
-        this.snapToKeyboard = false;
-        this.type = 'fixed';
-        this.themeColor = 'white';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalFooterComponent, deps: [{ token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ModalFooterComponent, isStandalone: true, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type", themeColor: "themeColor" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this._cssClass" } }, usesInheritance: true, ngImport: i0, template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;box-sizing:inherit;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:16px;padding-bottom:calc(12px + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:24px}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background-color:var(--kirby-background-color)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);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-safe-area-bottom)) * -1))}\n"], dependencies: [{ kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalFooterComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [IonFooter], selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;box-sizing:inherit;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:16px;padding-bottom:calc(12px + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:24px}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background-color:var(--kirby-background-color)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);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-safe-area-bottom)) * -1))}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { snapToKeyboard: [{
-                type: HostBinding,
-                args: ['class.snap-to-keyboard']
-            }, {
-                type: Input
-            }], type: [{
-                type: Input
-            }], themeColor: [{
-                type: Input
-            }], _cssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var ModalComponent = class ModalComponent {
+	set canDismiss(canDismiss) {
+		typeof canDismiss === "boolean" ? this._canDismiss = canDismiss : this._canDismiss = this.canDismissHelper.getCanDismissCallback(canDismiss);
+	}
+	constructor(canDismissHelper, modalNavigationService, windowRef, elementRef) {
+		this.canDismissHelper = canDismissHelper;
+		this.modalNavigationService = modalNavigationService;
+		this.windowRef = windowRef;
+		this.elementRef = elementRef;
+		this.isOpen = false;
+		this.size = "medium";
+		this.scrollDisabled = false;
+		this.collapseTitle = false;
+		this.customHeight = void 0;
+		this.flavor = "modal";
+		this.drawerSupplementaryAction = void 0;
+		this.interactWithBackground = false;
+		this.willPresent = new EventEmitter();
+		this.didPresent = new EventEmitter();
+		this.didDismiss = new EventEmitter();
+		this.willDismiss = new EventEmitter();
+		this._config = {
+			collapseTitle: this.collapseTitle,
+			customHeight: this.customHeight,
+			flavor: this.flavor,
+			drawerSupplementaryAction: this.drawerSupplementaryAction,
+			interactWithBackground: this.interactWithBackground
+		};
+		this._canDismiss = true;
+	}
+	ngOnInit() {
+		this.forwardAriaLabel();
+	}
+	ngOnChanges(changes) {
+		this.updateModalConfigOnChange(changes);
+	}
+	scrollToTop(scrollDuration) {
+		this.ionContent.scrollToTop(scrollDuration);
+	}
+	scrollToBottom(scrollDuration) {
+		this.ionContent.scrollToBottom(scrollDuration);
+	}
+	_onWillPresent(event) {
+		this.willPresent.emit(event);
+		if (this.interactWithBackground) this.windowRef.nativeWindow.document.body.classList.add("allow-background-scroll");
+	}
+	_onDidPresent(event) {
+		this.modalNavigationService.handleBrowserBackButton(this.modalElement.nativeElement);
+		this.didPresent.emit(event);
+	}
+	_onWillDismiss(event) {
+		if (this.interactWithBackground) this.windowRef.nativeWindow.document.body.classList.remove("allow-background-scroll");
+		this.willDismiss.emit(event);
+	}
+	_onDidDismiss(event) {
+		this.didDismiss.emit(event);
+	}
+	updateModalConfigOnChange(changes) {
+		Object.entries(changes).forEach(([key]) => {
+			if (key in this._config) this._config[key] = changes[key].currentValue;
+		});
+	}
+	forwardAriaLabel() {
+		this._config.htmlAttributes = { "aria-label": inheritAriaLabelText(this.elementRef.nativeElement) };
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalComponent,
+			deps: [
+				{ token: CanDismissHelper },
+				{ token: ModalNavigationService },
+				{ token: i1$2.WindowRef },
+				{ token: i0.ElementRef }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: ModalComponent,
+			isStandalone: true,
+			selector: "kirby-modal",
+			inputs: {
+				isOpen: "isOpen",
+				trigger: "trigger",
+				size: "size",
+				scrollDisabled: "scrollDisabled",
+				canDismiss: "canDismiss",
+				collapseTitle: "collapseTitle",
+				customHeight: "customHeight",
+				flavor: "flavor",
+				drawerSupplementaryAction: "drawerSupplementaryAction",
+				interactWithBackground: "interactWithBackground"
+			},
+			outputs: {
+				willPresent: "willPresent",
+				didPresent: "didPresent",
+				didDismiss: "didDismiss",
+				willDismiss: "willDismiss"
+			},
+			queries: [{
+				propertyName: "template",
+				first: true,
+				predicate: TemplateRef,
+				descendants: true,
+				static: true
+			}],
+			viewQueries: [{
+				propertyName: "modalElement",
+				first: true,
+				predicate: IonModal,
+				descendants: true,
+				read: ElementRef,
+				static: true
+			}, {
+				propertyName: "ionContent",
+				first: true,
+				predicate: IonContent,
+				descendants: true
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<ion-modal\n  class=\"kirby-modal kirby-overlay kirby-modal-{{ size }}\"\n  [ngClass]=\"[\n    flavor === 'compact' ? 'kirby-modal-compact' : 'kirby-' + flavor,\n    interactWithBackground ? 'interact-with-background' : '',\n  ]\"\n  [isOpen]=\"isOpen\"\n  [trigger]=\"trigger\"\n  [canDismiss]=\"_canDismiss\"\n  [showBackdrop]=\"!interactWithBackground\"\n  [style.--kirby-modal-height]=\"customHeight\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    @if (flavor === 'compact') {\n      <kirby-modal-compact-wrapper\n        [config]=\"_config\"\n        [content]=\"template\"\n      ></kirby-modal-compact-wrapper>\n    } @else {\n      <kirby-modal-wrapper\n        class=\"ion-page\"\n        [config]=\"_config\"\n        [content]=\"template\"\n        [scrollDisabled]=\"scrollDisabled\"\n      ></kirby-modal-wrapper>\n    }\n  </ng-template>\n</ion-modal>\n",
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: CommonModule
+				},
+				{
+					kind: "directive",
+					type: i2.NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "component",
+					type: IonModal,
+					selector: "ion-modal"
+				},
+				{
+					kind: "component",
+					type: ModalWrapperComponent,
+					selector: "kirby-modal-wrapper",
+					inputs: [
+						"scrollDisabled",
+						"config",
+						"content"
+					]
+				},
+				{
+					kind: "component",
+					type: ModalCompactWrapperComponent,
+					selector: "kirby-modal-compact-wrapper",
+					inputs: ["config", "content"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-modal",
+			imports: [
+				CommonModule,
+				IconComponent,
+				IonModal,
+				ModalWrapperComponent,
+				ModalCompactWrapperComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ion-modal\n  class=\"kirby-modal kirby-overlay kirby-modal-{{ size }}\"\n  [ngClass]=\"[\n    flavor === 'compact' ? 'kirby-modal-compact' : 'kirby-' + flavor,\n    interactWithBackground ? 'interact-with-background' : '',\n  ]\"\n  [isOpen]=\"isOpen\"\n  [trigger]=\"trigger\"\n  [canDismiss]=\"_canDismiss\"\n  [showBackdrop]=\"!interactWithBackground\"\n  [style.--kirby-modal-height]=\"customHeight\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    @if (flavor === 'compact') {\n      <kirby-modal-compact-wrapper\n        [config]=\"_config\"\n        [content]=\"template\"\n      ></kirby-modal-compact-wrapper>\n    } @else {\n      <kirby-modal-wrapper\n        class=\"ion-page\"\n        [config]=\"_config\"\n        [content]=\"template\"\n        [scrollDisabled]=\"scrollDisabled\"\n      ></kirby-modal-wrapper>\n    }\n  </ng-template>\n</ion-modal>\n"
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: CanDismissHelper },
+		{ type: ModalNavigationService },
+		{ type: i1$2.WindowRef },
+		{ type: i0.ElementRef }
+	],
+	propDecorators: {
+		modalElement: [{
+			type: ViewChild,
+			args: [IonModal, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionContent: [{
+			type: ViewChild,
+			args: [IonContent]
+		}],
+		template: [{
+			type: ContentChild,
+			args: [TemplateRef, { static: true }]
+		}],
+		isOpen: [{ type: Input }],
+		trigger: [{ type: Input }],
+		size: [{ type: Input }],
+		scrollDisabled: [{ type: Input }],
+		canDismiss: [{ type: Input }],
+		collapseTitle: [{ type: Input }],
+		customHeight: [{ type: Input }],
+		flavor: [{ type: Input }],
+		drawerSupplementaryAction: [{ type: Input }],
+		interactWithBackground: [{ type: Input }],
+		willPresent: [{ type: Output }],
+		didPresent: [{ type: Output }],
+		didDismiss: [{ type: Output }],
+		willDismiss: [{ type: Output }]
+	}
+});
+var ModalFooterComponent = class ModalFooterComponent extends ModalElementComponent {
+	get _cssClass() {
+		return [
+			this.themeColor,
+			this.type,
+			this.surface
+		].filter((cssClass) => !!cssClass);
+	}
+	get surface() {
+		if (this.type === "inline") return null;
+		return this.themeColor === "light" ? "kirby-surface-base" : "kirby-surface-raised";
+	}
+	constructor(elementRef, modalElementsAdvertiser) {
+		super(ModalElementType.FOOTER, elementRef, modalElementsAdvertiser);
+		this.snapToKeyboard = false;
+		this.type = "fixed";
+		this.themeColor = "white";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ModalFooterComponent,
+			deps: [{ token: i0.ElementRef }, {
+				token: ModalElementsAdvertiser,
+				optional: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: ModalFooterComponent,
+			isStandalone: true,
+			selector: "kirby-modal-footer",
+			inputs: {
+				snapToKeyboard: "snapToKeyboard",
+				type: "type",
+				themeColor: "themeColor"
+			},
+			host: { properties: {
+				"class.snap-to-keyboard": "this.snapToKeyboard",
+				"class": "this._cssClass"
+			} },
+			usesInheritance: true,
+			ngImport: i0,
+			template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:var(--kirby-elevation-8);box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-color-fill-base));color:var(--kirby-modal-footer-color, var(--kirby-color-content-base));padding:var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xs) + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:var(--kirby-spacing-m)}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform var(--kirby-transition-soft-keyboard-leave)}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform var(--kirby-transition-soft-keyboard-enter);transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-safe-area-bottom)) * -1))}\n"],
+			dependencies: [{
+				kind: "component",
+				type: IonFooter,
+				selector: "ion-footer",
+				inputs: [
+					"collapse",
+					"mode",
+					"translucent"
+				]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ModalFooterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			imports: [IonFooter],
+			selector: "kirby-modal-footer",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:var(--kirby-elevation-8);box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-color-fill-base));color:var(--kirby-modal-footer-color, var(--kirby-color-content-base));padding:var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xs) + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:var(--kirby-spacing-m)}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform var(--kirby-transition-soft-keyboard-leave)}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform var(--kirby-transition-soft-keyboard-enter);transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-safe-area-bottom)) * -1))}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, {
+		type: ModalElementsAdvertiser,
+		decorators: [{ type: Optional }]
+	}],
+	propDecorators: {
+		snapToKeyboard: [{
+			type: HostBinding,
+			args: ["class.snap-to-keyboard"]
+		}, { type: Input }],
+		type: [{ type: Input }],
+		themeColor: [{ type: Input }],
+		_cssClass: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
 export { ActionSheetComponent, ActionSheetHelper, AlertComponent, AlertHelper, COMPONENT_PROPS, CanDismissHelper, CanDismissModalGuard, DrawerSupplementaryAction, Modal, ModalCompactWrapperComponent, ModalComponent, ModalController, ModalElementComponent, ModalElementType, ModalElementsAdvertiser, ModalFooterComponent, ModalHelper, ModalNavigationService, ModalWrapperComponent };
-//# sourceMappingURL=kirbydesign-designsystem-modal.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-modal.mjs.map