@kirbydesign/designsystem 11.0.0 → 11.1.1

package/fesm2022/kirbydesign-designsystem-modal.mjs

@@ -1,363 +1,139 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, Component, ViewChild, ChangeDetectionStrategy, Optional, InjectionToken, ElementRef, Injector, RendererStyleFlags2, TemplateRef, HostListener, HostBinding, ViewChildren, ContentChild, Inject, inject } from '@angular/core';
-import * as i1 from '@angular/router';
-import { NavigationEnd, NavigationStart, RouterModule, RouterOutlet, ROUTES } from '@angular/router';
-import { firstValueFrom, EMPTY, of, Subject, merge } from 'rxjs';
-import { filter, startWith, map, pairwise, skipUntil, takeUntil, debounceTime, first } from 'rxjs/operators';
-import * as i1$2 from '@ionic/angular/standalone';
-import { IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, createAnimation, ModalController as ModalController$1, IonModal, IonFooter } from '@ionic/angular/standalone';
-import * as i4 from '@angular/common';
+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, EMPTY } from 'rxjs';
+import { debounceTime, first, takeUntil, map, filter, startWith, pairwise, skipUntil } from 'rxjs/operators';
+import * as i3$1 from '@kirbydesign/designsystem/helpers';
+import { getIonModalDialogAncestor, DesignTokenHelper, observeContent, KirbyAnimation } from '@kirbydesign/designsystem/helpers';
+import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import * as i1$1 from '@kirbydesign/designsystem/card';
-import { CardModule } from '@kirbydesign/designsystem/card';
-import * as i1$3 from '@kirbydesign/designsystem/types';
 import * as i6 from '@kirbydesign/designsystem/icon';
 import { IconModule } from '@kirbydesign/designsystem/icon';
-import * as i1$4 from '@kirbydesign/designsystem/shared';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import * as i1$2 from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, createAnimation, ModalController as ModalController$1, IonModal, IonFooter } from '@ionic/angular/standalone';
+import * as i1$1 from '@kirbydesign/designsystem/shared';
 import { ThemeColorDirective, inheritAriaLabelText } from '@kirbydesign/designsystem/shared';
+import * as i1 from '@kirbydesign/designsystem/types';
 import * as i3 from '@kirbydesign/designsystem/empty-state';
 import { EmptyStateModule } from '@kirbydesign/designsystem/empty-state';
-import * as i3$1 from '@kirbydesign/designsystem/helpers';
-import { getIonModalDialogAncestor, DesignTokenHelper, observeContent, KirbyAnimation } from '@kirbydesign/designsystem/helpers';
+import * as i1$4 from '@kirbydesign/designsystem/card';
+import { CardModule } from '@kirbydesign/designsystem/card';
 
-class ModalNavigationService {
-    constructor(router, route) {
-        this.router = router;
-        this.route = route;
-        this.navigationEndListener$ = this.router.events.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.getCurrentNavigation();
-        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));
+class Modal {
+}
+/**
+ * WARNING: This is for internal use only and should not be used outside of Kirby.
+ */
+var ModalElementType;
+(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;
     }
-    getModalRoutePaths(routes, parentPath) {
-        return Array.isArray(routes)
-            ? [].concat(...routes.map((route) => this.getModalRoutePath(route, parentPath)))
-            : [];
+    constructor(modalElementType, elementRef, modalElementsAdvertiser) {
+        this.modalElementType = modalElementType;
+        this.elementRef = elementRef;
+        this.modalElementsAdvertiser = modalElementsAdvertiser;
     }
-    isNewModalWindow(navigationEnd) {
-        const currentNavigation = this.router.getCurrentNavigation();
-        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;
+    ngAfterViewInit() {
+        if (this.isContainedInModal) {
+            this.modalElementsAdvertiser.addModalElement(this.modalElementType, this.elementRef);
         }
-        const currentModalRouteParent = navigationEnd.urlAfterRedirects.split('/(modal:')[0];
-        const previousModalRouteParent = previousRoutePath.split('/(modal:')[0];
-        return previousModalRouteParent !== currentModalRouteParent;
     }
-    async waitForCurrentThenGetNavigationEndStream() {
-        if (this.router.getCurrentNavigation()) {
-            const currentNavigationEnd = await firstValueFrom(this.navigationEndListener$);
-            return this.navigationEndListener$.pipe(startWith(currentNavigationEnd));
+    ngOnDestroy() {
+        if (this.isContainedInModal) {
+            this.modalElementsAdvertiser.removeModalElement(this.modalElementType, this.elementRef);
         }
-        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));
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", 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: "20.2.0", type: ModalElementComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", 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;
     }
-    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;
+    addFooter(footerElementRef) {
+        // Move the footer next to ion-content
+        this.moveChild(footerElementRef, this.elementRef);
     }
-    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 };
+    removeFooter(footerElementRef) {
+        this.removeChild(footerElementRef);
     }
-    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;
+    addPageProgress(pageProgressElementRef, ionToolbarElement) {
+        this.moveChild(pageProgressElementRef, ionToolbarElement);
     }
-    async navigateWithinModal(relativePath, queryParams) {
-        return this.router.navigate([relativePath], {
-            queryParams,
-            relativeTo: this.getCurrentActivatedRoute(),
-        });
+    removePageProgress(pageProgressElementRef) {
+        this.removeChild(pageProgressElementRef);
     }
-    async navigateOutOfModalOutlet() {
-        const currentActivatedRoute = this.getCurrentActivatedRoute();
-        const currentNavigationFinalUrl = this.router.getCurrentNavigation()?.finalUrl?.toString();
-        const isCurrentlyNavigatingOutOfModalOutlet = currentNavigationFinalUrl && !this.isModalRoute(currentNavigationFinalUrl);
-        if (currentActivatedRoute.outlet !== 'modal' || isCurrentlyNavigatingOutOfModalOutlet) {
-            // Nothing to do here, bail out:
-            return Promise.resolve(true);
+    /*
+       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);
         }
-        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;
+    removeTitle(titleElementRef, hasCollapsibleTitle, contentTitleElement) {
+        this.removeChild(titleElementRef);
+        if (hasCollapsibleTitle) {
+            const kirbyPageTitleElement = contentTitleElement.nativeElement.querySelector('kirby-page-title');
+            this.removeChild(new ElementRef(kirbyPageTitleElement));
         }
-        return parentRoute;
     }
-    handleBrowserBackButton(modal) {
-        const popstateNavigationStart$ = this.router.events.pipe(filter((event) => event instanceof NavigationStart && event.navigationTrigger === 'popstate'));
-        const navigationEnd$ = this.router.events.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: "19.2.14", ngImport: i0, type: ModalNavigationService, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalNavigationService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalNavigationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }] });
-
-class ActionSheetComponent {
-    constructor() {
-        this.cancelButtonText = 'Cancel';
-        this.hideCancel = false;
-        this.disabled = false;
-        this.cancel = new EventEmitter();
-        this.itemSelect = new EventEmitter();
-    }
-    onItemSelect(selection) {
-        this.itemSelect.emit(selection);
-    }
-    onCancel() {
-        this.cancel.emit();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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  <kirby-card-header\n    *ngIf=\"header\"\n    [title]=\"header\"\n    [isTitleBold]=\"true\"\n    [subtitle]=\"subheader\"\n  ></kirby-card-header>\n  <button\n    kirby-button\n    expand=\"block\"\n    size=\"lg\"\n    [noDecoration]=\"true\"\n    (click)=\"onItemSelect(item)\"\n    *ngFor=\"let item of items\"\n  >\n    {{ item.text }}\n  </button>\n</kirby-card>\n<button\n  *ngIf=\"!hideCancel\"\n  kirby-button\n  class=\"cancel-btn\"\n  size=\"lg\"\n  attentionLevel=\"3\"\n  (click)=\"onCancel()\"\n>\n  {{ cancelButtonText }}\n</button>\n", styles: [":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))}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: i1$1.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"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionSheetComponent, decorators: [{
-            type: Component,
-            args: [{ imports: [CardModule, ButtonComponent, CommonModule], selector: 'kirby-action-sheet', template: "<kirby-card>\n  <kirby-card-header\n    *ngIf=\"header\"\n    [title]=\"header\"\n    [isTitleBold]=\"true\"\n    [subtitle]=\"subheader\"\n  ></kirby-card-header>\n  <button\n    kirby-button\n    expand=\"block\"\n    size=\"lg\"\n    [noDecoration]=\"true\"\n    (click)=\"onItemSelect(item)\"\n    *ngFor=\"let item of items\"\n  >\n    {{ item.text }}\n  </button>\n</kirby-card>\n<button\n  *ngIf=\"!hideCancel\"\n  kirby-button\n  class=\"cancel-btn\"\n  size=\"lg\"\n  attentionLevel=\"3\"\n  (click)=\"onCancel()\"\n>\n  {{ cancelButtonText }}\n</button>\n", styles: [":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))}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"] }]
-        }], 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;
+    moveChild(childElementRef, newParentElementRef) {
+        const child = childElementRef.nativeElement;
+        const newParent = newParentElementRef.nativeElement;
+        this.renderer.removeChild(child.parentElement, child);
+        this.renderer.appendChild(newParent, child);
     }
-    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(),
-        };
+    removeChild(childElementRef, parentElement) {
+        const child = childElementRef.nativeElement;
+        if (child) {
+            this.renderer.removeChild(parentElement || child.parentElement, child);
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionSheetHelper, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionSheetHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ActionSheetHelper, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.ModalController }] });
 
 class AlertComponent {
     set title(title) {
@@ -366,6 +142,12 @@ class AlertComponent {
     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;
@@ -390,10 +172,10 @@ class AlertComponent {
         const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
         ionModalElement?.dismiss(true);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: i1$3.WindowRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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    <button\n      kirby-button\n      *ngIf=\"cancelBtn\"\n      attentionLevel=\"3\"\n      class=\"cancel-btn\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelBtn }}\n    </button>\n    <button\n      kirby-button\n      [size]=\"cancelBtn ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn }}\n    </button>\n  </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px}.buttongroup button{flex:1 1 50%;margin-inline:0}.buttongroup button:only-child{flex-grow:0}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "directive", type: i1$4.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: "ngmodule", type: EmptyStateModule }, { kind: "component", type: i3.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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", 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: "20.2.0", 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: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px}.buttongroup button{flex:1 1 50%;margin-inline:0}.buttongroup button:only-child{flex-grow:0}\n"], dependencies: [{ kind: "ngmodule", type: IconModule }, { kind: "directive", type: i1$1.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: "ngmodule", type: EmptyStateModule }, { kind: "component", type: i3.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: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         IconModule,
@@ -402,8 +184,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         CommonModule,
                         EmptyStateModule,
                         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    <button\n      kirby-button\n      *ngIf=\"cancelBtn\"\n      attentionLevel=\"3\"\n      class=\"cancel-btn\"\n      (click)=\"onCancel()\"\n    >\n      {{ cancelBtn }}\n    </button>\n    <button\n      kirby-button\n      [size]=\"cancelBtn ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn }}\n    </button>\n  </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px}.buttongroup button{flex:1 1 50%;margin-inline:0}.buttongroup button:only-child{flex-grow:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$3.WindowRef }], propDecorators: { alertWrapper: [{
+                    ], 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: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px}.buttongroup button{flex:1 1 50%;margin-inline:0}.buttongroup button:only-child{flex-grow:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.WindowRef }], propDecorators: { alertWrapper: [{
                 type: ViewChild,
                 args: ['alertWrapper', { static: true }]
             }], title: [{
@@ -445,7 +227,6 @@ class AlertHelper {
         return {
             ...config,
             okBtn: this.getOkBtn(config),
-            cancelBtn: config.cancelBtn,
             okBtnIsDestructive: this.getOkBtnIsDestructive(config),
             iconName: config.icon && config.icon.name,
             iconThemeColor: config.icon && config.icon.themeColor,
@@ -454,11 +235,11 @@ class AlertHelper {
     getOkBtn(config) {
         let text;
         if (config.okBtn) {
-            if (typeof config.okBtn === 'string') {
+            if (typeof config.okBtn === 'string' || isObservable(config.okBtn)) {
                 text = config.okBtn;
             }
             else {
-                text = config.okBtn.text;
+                text = config.okBtn?.text;
             }
         }
         return text;
@@ -466,64 +247,13 @@ class AlertHelper {
     getOkBtnIsDestructive(config) {
         return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertHelper, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AlertHelper, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AlertHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AlertHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: AlertHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$2.ModalController }] });
 
-class Modal {
-}
-/**
- * WARNING: This is for internal use only and should not be used outside of Kirby.
- */
-var ModalElementType;
-(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: "19.2.14", 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: "19.2.14", type: ModalElementComponent, isStandalone: false, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalElementComponent, decorators: [{
-            type: Component,
-            args: [{
-                    template: '',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: ModalElementType }, { type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
-                    type: Optional
-                }] }] });
-
 class CanDismissHelper {
     constructor(alertHelper) {
         this.alertHelper = alertHelper;
@@ -542,76 +272,13 @@ class CanDismissHelper {
         const result = await alert.onWillDismiss;
         return result.data;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanDismissHelper, deps: [{ token: AlertHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanDismissHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: CanDismissHelper, deps: [{ token: AlertHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: CanDismissHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CanDismissHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: CanDismissHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: AlertHelper }] });
 
-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);
-        }
-    }
-}
-
 const contentScrollDebounceTimeInMS = 10;
 const contentScrolledOffsetInPixels = 4;
 class ModalWrapperComponent {
@@ -709,6 +376,10 @@ class ModalWrapperComponent {
         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] = [
@@ -1061,13 +732,13 @@ class ModalWrapperComponent {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$4.ResizeObserverService }, { token: i1$3.WindowRef }, { token: i3$1.PlatformService }, { token: CanDismissHelper }, { token: i0.EnvironmentInjector }, { token: i1$4.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1$1.ResizeObserverService }, { token: i1.WindowRef }, { token: i3$1.PlatformService }, { token: CanDismissHelper }, { token: i0.EnvironmentInjector }, { token: i1$1.TranslationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", 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    <ion-buttons\n      slot=\"secondary\"\n      *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\"\n    >\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    <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  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-xlarge\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\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: ["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}@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:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--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}@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.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: "ngmodule", type: IconModule }, { kind: "component", type: i6.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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"] }] }); }
+        ], 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: ["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}@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:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--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}@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: "ngmodule", type: IconModule }, { kind: "component", type: i6.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i7.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: "19.2.14", ngImport: i0, type: ModalWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalWrapperComponent, decorators: [{
             type: Component,
             args: [{ imports: [
                         RouterModule,
@@ -1082,8 +753,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                     ], 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    <ion-buttons\n      slot=\"secondary\"\n      *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\"\n    >\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    <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  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-xlarge\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\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: ["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}@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:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--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}@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$4.ResizeObserverService }, { type: i1$3.WindowRef }, { type: i3$1.PlatformService }, { type: CanDismissHelper }, { type: i0.EnvironmentInjector }, { type: i1$4.TranslationService }], propDecorators: { _hasCollapsibleTitle: [{
+                    ], 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: ["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}@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:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--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}@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$1.ResizeObserverService }, { type: i1.WindowRef }, { type: i3$1.PlatformService }, { type: CanDismissHelper }, { type: i0.EnvironmentInjector }, { type: i1$1.TranslationService }], propDecorators: { _hasCollapsibleTitle: [{
                 type: HostBinding,
                 args: ['class.collapsible-title']
             }], scrollDisabled: [{
@@ -1207,13 +878,13 @@ class ModalCompactWrapperComponent {
         // 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: "19.2.14", ngImport: i0, type: ModalCompactWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1$3.WindowRef }, { token: CanDismissHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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:24px 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", 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: "20.2.0", 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:24px 16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalCompactWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", 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: [":host{display:block;padding:24px 16px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1$3.WindowRef }, { type: CanDismissHelper }, { type: i0.Renderer2 }], propDecorators: { config: [{
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.WindowRef }, { type: CanDismissHelper }, { type: i0.Renderer2 }], propDecorators: { config: [{
                 type: Input
             }], content: [{
                 type: Input
@@ -1262,68 +933,176 @@ class ModalAnimationBuilderService {
             return el.shadowRoot || fallback;
         };
     }
-    enterAnimation(currentBackdrop) {
-        return (baseEl, opts) => {
+    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.createEnterAnimation();
+            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('entering-base')
+            const baseAnimation = createAnimation('leaving-base')
                 .addElement(baseEl)
-                .easing(this.easingEnter)
-                .duration(this.duration)
+                .easing(this.easingLeave)
+                .duration(duration)
                 .addAnimation(wrapperAnimation);
             let currentBackdropAnimation;
             if (currentBackdrop) {
                 currentBackdropAnimation = createAnimation()
                     .addElement(currentBackdrop)
-                    .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
+                    .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().beforeStyles({
-                    transform: 'translateY(0)',
-                    'transform-origin': 'top center',
-                    overflow: 'hidden',
+                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) {
-                    /**
-                     * 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([
+                    presentingAnimation.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',
                         },
+                        {
+                            offset: 1,
+                            filter: 'contrast(1)',
+                            transform: 'translateY(0px) scale(1)',
+                            borderRadius: '0px',
+                        },
                     ]);
                     baseAnimation.addAnimation(presentingAnimation);
                 }
@@ -1333,7 +1112,7 @@ class ModalAnimationBuilderService {
                         baseAnimation.addAnimation(currentBackdropAnimation);
                     }
                     if (!hasCardModal) {
-                        wrapperAnimation.fromTo('opacity', '0', '1');
+                        wrapperAnimation.fromTo('opacity', '1', '0');
                     }
                     else {
                         const toPresentingScale = hasCardModal
@@ -1341,22 +1120,22 @@ class ModalAnimationBuilderService {
                             : 1;
                         const finalTransform = `translateY(-10px) scale(${toPresentingScale})`;
                         presentingAnimation
+                            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
                             .afterStyles({
-                            transform: finalTransform,
+                            transform: 'translate3d(0, 0, 0)',
                         })
-                            .addElement(presentingElRoot.querySelector('.modal-wrapper'))
                             .keyframes([
-                            { offset: 0, filter: 'contrast(1)', transform: 'translateY(0) scale(1)' },
-                            { offset: 1, filter: 'contrast(0.85)', transform: finalTransform },
+                            { 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: finalTransform,
+                            transform: 'translateY(0) scale(1)',
                         })
-                            .addElement(presentingElRoot.querySelector('.modal-shadow'))
                             .keyframes([
-                            { offset: 0, opacity: '1', transform: 'translateY(0) scale(1)' },
-                            { offset: 1, opacity: '0', transform: finalTransform },
+                            { offset: 0, opacity: '0', transform: finalTransform },
+                            { offset: 1, opacity: '1', transform: 'translateY(0) scale(1)' },
                         ]);
                         baseAnimation.addAnimation([presentingAnimation, shadowAnimation]);
                     }
@@ -1371,121 +1150,272 @@ class ModalAnimationBuilderService {
             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]);
-                    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalAnimationBuilderService, deps: [{ token: i3$1.PlatformService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalAnimationBuilderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalAnimationBuilderService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i3$1.PlatformService }] });
+
+class ModalNavigationService {
+    constructor(router, route) {
+        this.router = router;
+        this.route = route;
+        this.navigationEndListener$ = this.router.events.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.getCurrentNavigation();
+        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.getCurrentNavigation();
+        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.getCurrentNavigation()) {
+            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;
                 }
             }
-            else {
-                baseAnimation.addAnimation(backdropAnimation);
-                if (currentBackdropAnimation) {
-                    baseAnimation.addAnimation(currentBackdropAnimation);
-                }
+        }
+        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 baseAnimation;
-        };
+        }
+        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.getCurrentNavigation()?.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.router.events.pipe(filter((event) => event instanceof NavigationStart && event.navigationTrigger === 'popstate'));
+        const navigationEnd$ = this.router.events.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: "19.2.14", ngImport: i0, type: ModalAnimationBuilderService, deps: [{ token: i3$1.PlatformService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalAnimationBuilderService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", 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: "20.2.0", ngImport: i0, type: ModalNavigationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalAnimationBuilderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalNavigationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i3$1.PlatformService }] });
+        }], ctorParameters: () => [{ type: i1$3.Router }, { type: i1$3.ActivatedRoute }] });
 
 class ModalHelper {
     constructor(ionicModalController, modalAnimationBuilder, modalNavigationService, windowRef, canDismissHelper) {
@@ -1585,12 +1515,91 @@ class ModalHelper {
         this.isModalOpening = false;
         return overlay;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalHelper, deps: [{ token: i1$2.ModalController }, { token: ModalAnimationBuilderService }, { token: ModalNavigationService }, { token: i1$3.WindowRef }, { token: CanDismissHelper }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalHelper, deps: [{ token: i1$2.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: "20.2.0", ngImport: i0, type: ModalHelper }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalHelper, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$2.ModalController }, { type: ModalAnimationBuilderService }, { type: ModalNavigationService }, { type: i1.WindowRef }, { type: CanDismissHelper }] });
+
+class ActionSheetComponent {
+    constructor() {
+        this.cancelButtonText = 'Cancel';
+        this.hideCancel = false;
+        this.disabled = false;
+        this.cancel = new EventEmitter();
+        this.itemSelect = new EventEmitter();
+    }
+    onItemSelect(selection) {
+        this.itemSelect.emit(selection);
+    }
+    onCancel() {
+        this.cancel.emit();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.0", 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: [":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))}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$4.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: i1$4.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: "20.2.0", ngImport: i0, type: ActionSheetComponent, decorators: [{
+            type: Component,
+            args: [{ imports: [CardModule, 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: [":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))}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"] }]
+        }], 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: "20.2.0", ngImport: i0, type: ActionSheetHelper, deps: [{ token: i1$2.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ActionSheetHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ActionSheetHelper, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.ModalController }, { type: ModalAnimationBuilderService }, { type: ModalNavigationService }, { type: i1$3.WindowRef }, { type: CanDismissHelper }] });
+        }], ctorParameters: () => [{ type: i1$2.ModalController }] });
 
 class ModalController {
     constructor(modalHelper, actionSheetHelper, alertHelper, modalNavigationService, routeConfig) {
@@ -1688,10 +1697,10 @@ class ModalController {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", ngImport: i0, type: ModalController }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", 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: "20.2.0", ngImport: i0, type: ModalController }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalController, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalController, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: ModalHelper }, { type: ActionSheetHelper }, { type: AlertHelper }, { type: ModalNavigationService }, { type: undefined, decorators: [{
                     type: Optional
@@ -1812,10 +1821,10 @@ class ModalComponent {
             'aria-label': inheritAriaLabelText(this.elementRef.nativeElement),
         };
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalComponent, deps: [{ token: CanDismissHelper }, { token: ModalNavigationService }, { token: i1$3.WindowRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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    <kirby-modal-compact-wrapper\n      *ngIf=\"flavor === 'compact'; else modalWrapper\"\n      [config]=\"_config\"\n      [content]=\"template\"\n    ></kirby-modal-compact-wrapper>\n  </ng-template>\n</ion-modal>\n\n<ng-template #modalWrapper>\n  <kirby-modal-wrapper\n    class=\"ion-page\"\n    [config]=\"_config\"\n    [content]=\"template\"\n    [scrollDisabled]=\"scrollDisabled\"\n  ></kirby-modal-wrapper>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: IconModule }, { 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", 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: "20.2.0", 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: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: IconModule }, { 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: "19.2.14", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-modal', imports: [
                         CommonModule,
@@ -1823,8 +1832,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         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    <kirby-modal-compact-wrapper\n      *ngIf=\"flavor === 'compact'; else modalWrapper\"\n      [config]=\"_config\"\n      [content]=\"template\"\n    ></kirby-modal-compact-wrapper>\n  </ng-template>\n</ion-modal>\n\n<ng-template #modalWrapper>\n  <kirby-modal-wrapper\n    class=\"ion-page\"\n    [config]=\"_config\"\n    [content]=\"template\"\n    [scrollDisabled]=\"scrollDisabled\"\n  ></kirby-modal-wrapper>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: CanDismissHelper }, { type: ModalNavigationService }, { type: i1$3.WindowRef }, { type: i0.ElementRef }], propDecorators: { modalElement: [{
+                    ], 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: [{
@@ -1873,12 +1882,12 @@ class ModalFooterComponent extends ModalElementComponent {
         this.type = 'fixed';
         this.themeColor = 'white';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", 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: "19.2.14", 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: ["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-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-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}: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-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-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-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.0", 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: "20.2.0", 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: ["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-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-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}: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-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-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-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ModalFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.0", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, IonFooter], selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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-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-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}: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-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-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-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
+            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: ["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-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-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}: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-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-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-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
                     type: Optional
                 }] }], propDecorators: { snapToKeyboard: [{