@kirbydesign/designsystem 6.1.1 → 6.1.2-pubtest.0

package/fesm2020/kirbydesign-designsystem.mjs

@@ -1,7 +1,7 @@
 import { DesignTokenHelper, ColorHelper, capitalizeFirstLetter } from '@kirbydesign/core';
 export { ColorHelper, DesignTokenHelper, camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, kebabToTitleCase } from '@kirbydesign/core';
 import * as i0 from '@angular/core';
-import { Directive, Injectable, Component, ChangeDetectionStrategy, HostBinding, Input, ElementRef, ContentChild, EventEmitter, Output, ContentChildren, ViewChild, InjectionToken, Injector, HostListener, RendererStyleFlags2, ViewChildren, Optional, Inject, NgModule, ChangeDetectorRef, NgZone, LOCALE_ID, forwardRef, TemplateRef, Pipe, SkipSelf, APP_INITIALIZER } from '@angular/core';
+import { Directive, Injectable, Component, ChangeDetectionStrategy, HostBinding, Input, ElementRef, ContentChild, EventEmitter, Output, ContentChildren, ViewChild, Optional, InjectionToken, Injector, HostListener, RendererStyleFlags2, ViewChildren, Inject, NgModule, ChangeDetectorRef, NgZone, LOCALE_ID, forwardRef, TemplateRef, Pipe, SkipSelf, APP_INITIALIZER } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1 from '@ionic/angular';
 import { IonContent, IonHeader, IonToolbar, IonTitle, IonApp, IonicModule, IonRadio, IonFabButton, IonItemSliding, IonList, IonTabs, IonFooter, IonBackButtonDelegate } from '@ionic/angular';
@@ -1161,6 +1161,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
 
 class Modal {
 }
+var ModalElementType;
+(function (ModalElementType) {
+    ModalElementType[ModalElementType["PAGE_PROGRESS"] = 0] = "PAGE_PROGRESS";
+    ModalElementType[ModalElementType["FOOTER"] = 1] = "FOOTER";
+    ModalElementType[ModalElementType["TITLE"] = 2] = "TITLE";
+})(ModalElementType || (ModalElementType = {}));
+class ModalElementsAdvertiser {
+}
+class ModalElementComponent {
+    constructor(modalElementType, elementRef, modalElementsAdvertiser) {
+        this.modalElementType = modalElementType;
+        this.elementRef = elementRef;
+        this.modalElementsAdvertiser = modalElementsAdvertiser;
+    }
+    get isContainedInModal() {
+        return this.modalElementsAdvertiser !== null;
+    }
+    ngAfterViewInit() {
+        if (this.isContainedInModal) {
+            this.modalElementsAdvertiser.addModalElement(this.modalElementType, this.elementRef);
+        }
+    }
+    ngOnDestroy() {
+        if (this.isContainedInModal) {
+            this.modalElementsAdvertiser.removeModalElement(this.modalElementType, this.elementRef);
+        }
+    }
+}
+/** @nocollapse */ ModalElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalElementComponent, deps: [{ token: ModalElementType }, { token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ModalElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalElementComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalElementComponent, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: function () { return [{ type: ModalElementType }, { type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
+                    type: Optional
+                }] }]; } });
 
 const COMPONENT_PROPS = new InjectionToken('componentProps');
 
@@ -1249,8 +1285,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: WindowRef }]; } });
 
+/*
+  The ModalWrapperComponent class was growing large.
+
+  Hence the functions responsible for moving modal elements around
+  has been encapsulated in this class.
+*/
+class ModalElementsMoverDelegate {
+    constructor(renderer, elementRef) {
+        this.renderer = renderer;
+        this.elementRef = elementRef;
+    }
+    addFooter(footerElementRef) {
+        // Move the footer next to ion-content
+        this.moveChild(footerElementRef, this.elementRef);
+    }
+    removeFooter(footerElementRef) {
+        this.removeChild(footerElementRef);
+    }
+    addPageProgress(pageProgressElementRef, ionToolbarElement) {
+        this.moveChild(pageProgressElementRef, ionToolbarElement);
+    }
+    removePageProgress(pageProgressElementRef) {
+        this.removeChild(pageProgressElementRef);
+    }
+    /*
+       contentTitleElement & ionTitleElement has to be passed
+       as arguments to the method; not part of the constructor, as they
+       might reference completely different elements between calls.
+  
+       For example in a multi-page routed modal where the elements are destroyed
+       and recreated.
+    */
+    addTitle(titleElementRef, contentTitleElement, hasCollapsibleTitle, ionTitleElement) {
+        this.moveChild(titleElementRef, ionTitleElement);
+        // If title is collapsible append it to content area; required by ionic implementation.
+        if (hasCollapsibleTitle) {
+            const titleElementClone = titleElementRef.nativeElement.cloneNode(true);
+            this.moveChild(new ElementRef(titleElementClone), contentTitleElement);
+        }
+    }
+    removeTitle(titleElementRef, hasCollapsibleTitle, contentTitleElement) {
+        this.removeChild(titleElementRef);
+        if (hasCollapsibleTitle) {
+            const kirbyPageTitleElement = contentTitleElement.nativeElement.querySelector('kirby-page-title');
+            this.removeChild(new ElementRef(kirbyPageTitleElement));
+        }
+    }
+    moveChild(childElementRef, newParentElementRef) {
+        const child = childElementRef.nativeElement;
+        const newParent = newParentElementRef.nativeElement;
+        this.renderer.removeChild(child.parentElement, child);
+        this.renderer.appendChild(newParent, child);
+    }
+    removeChild(childElementRef, parentElement) {
+        const child = childElementRef.nativeElement;
+        if (!!child) {
+            this.renderer.removeChild(parentElement || child.parentElement, child);
+        }
+    }
+}
+
 class ModalWrapperComponent {
-    constructor(injector, elementRef, renderer, zone, resizeObserverService, componentFactoryResolver, windowRef, platform) {
+    constructor(changeDetector, injector, elementRef, renderer, zone, resizeObserverService, componentFactoryResolver, windowRef, platform) {
+        this.changeDetector = changeDetector;
         this.injector = injector;
         this.elementRef = elementRef;
         this.renderer = renderer;
@@ -1275,13 +1373,10 @@ class ModalWrapperComponent {
             .pipe(debounceTime(this.VIEWPORT_RESIZE_DEBOUNCE_TIME));
         this.destroy$ = new Subject();
         this.willClose$ = this.ionModalWillDismiss.pipe(first());
-        this.elementToParentMap = {
-            'KIRBY-MODAL-FOOTER': () => [this.elementRef.nativeElement],
-            'KIRBY-PAGE-TITLE': () => [this.ionTitleElement.nativeElement, this.contentTitle?.nativeElement].filter((element) => element !== undefined),
-            'KIRBY-PAGE-PROGRESS': () => [this.ionToolbarElement.nativeElement],
-        };
+        this._currentFooter = null;
         this.setViewportHeight();
         this.observeViewportResize();
+        this.modalElementsMoverDelegate = new ModalElementsMoverDelegate(renderer, elementRef);
     }
     get _hasCollapsibleTitle() {
         return !!this.config?.collapseTitle;
@@ -1289,11 +1384,15 @@ class ModalWrapperComponent {
     set scrollDisabled(disabled) {
         this.ionContent.scrollY = !disabled;
     }
-    get mutationObserver() {
-        if (!this._mutationObserver) {
-            this._mutationObserver = this.createEmbeddedElementsMutationObserver();
+    get contentTitleElement() {
+        /*
+            contentTitleElement has ngIf directive dependent on _hasCollapsibleTitle; trigger CD to make sure element has been queried.
+            Solution taken from: https://danieleyassu.com/angular-viewchild-and-ngif/
+          */
+        if (!this._contentTitleElement && this._hasCollapsibleTitle) {
+            this.changeDetector.detectChanges();
         }
-        return this._mutationObserver;
+        return this._contentTitleElement;
     }
     get intersectionObserver() {
         if (!this._intersectionObserver) {
@@ -1316,6 +1415,43 @@ class ModalWrapperComponent {
             parent: this.injector,
         });
     }
+    set currentFooter(footer) {
+        if (footer !== null) {
+            this.resizeObserverService.observe(footer, (entry) => {
+                const [property, pixelValue] = [
+                    '--footer-height',
+                    `${Math.floor(entry.contentRect.height)}px`,
+                ];
+                this.setCssVar(this.elementRef.nativeElement, property, pixelValue);
+            });
+        }
+        this._currentFooter = footer;
+    }
+    get currentFooter() {
+        return this._currentFooter;
+    }
+    addModalElement(type, modalElement) {
+        const addModalElementFn = {
+            [ModalElementType.FOOTER]: () => {
+                this.modalElementsMoverDelegate.addFooter(modalElement);
+                this.currentFooter = modalElement.nativeElement;
+            },
+            [ModalElementType.TITLE]: () => this.modalElementsMoverDelegate.addTitle(modalElement, this.contentTitleElement, this._hasCollapsibleTitle, this.ionTitleElement),
+            [ModalElementType.PAGE_PROGRESS]: () => this.modalElementsMoverDelegate.addPageProgress(modalElement, this.ionToolbarElement),
+        }[type];
+        addModalElementFn();
+    }
+    removeModalElement(type, modalElement) {
+        const removeModalElementFn = {
+            [ModalElementType.FOOTER]: () => {
+                this.modalElementsMoverDelegate.removeFooter(modalElement);
+                this.currentFooter = null;
+            },
+            [ModalElementType.TITLE]: () => this.modalElementsMoverDelegate.removeTitle(modalElement, this._hasCollapsibleTitle, this.contentTitleElement),
+            [ModalElementType.PAGE_PROGRESS]: () => this.modalElementsMoverDelegate.removePageProgress(modalElement),
+        }[type];
+        removeModalElementFn();
+    }
     initializeResizeModalToModalWrapper() {
         if (this.config.flavor === 'drawer' && this.config.interactWithBackground) {
             merge(this.ionModalDidPresent, this.viewportResize$)
@@ -1352,12 +1488,9 @@ class ModalWrapperComponent {
             return;
         siblingModalRouteActivated$.pipe(takeUntil(this.willClose$)).subscribe((route) => {
             if (this.routerOutlet.isActivated) {
-                this.mutationObserver.disconnect();
                 this.routerOutlet.deactivate();
-                this.clearEmbeddedElements();
             }
             this.routerOutlet.activateWith(route, this.componentFactoryResolver);
-            this.checkForEmbeddedElements();
         });
     }
     patchScrollElementSize() {
@@ -1385,11 +1518,6 @@ class ModalWrapperComponent {
         if (this.toolbarButtonsQuery) {
             this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement);
         }
-        this.checkForEmbeddedElements();
-    }
-    checkForEmbeddedElements() {
-        this.moveEmbeddedElements();
-        this.observeEmbeddedElements();
     }
     observeHeaderResize() {
         this.resizeObserverService.observe(this.ionHeaderElement.nativeElement, (entry) => {
@@ -1397,17 +1525,6 @@ class ModalWrapperComponent {
             this.setCssVar(this.elementRef.nativeElement, property, pixelValue);
         });
     }
-    moveEmbeddedElements() {
-        const parentElement = this.getEmbeddedComponentElement();
-        if (parentElement) {
-            Object.entries(this.elementToParentMap).forEach(([tagName, getNewParent]) => {
-                const embeddedElement = parentElement.querySelector(tagName);
-                if (embeddedElement) {
-                    this.moveChild(embeddedElement, getNewParent());
-                }
-            });
-        }
-    }
     listenForIonModalDidPresent() {
         if (this.ionModalElement) {
             this.ionModalElement.addEventListener('ionModalDidPresent', () => {
@@ -1504,7 +1621,7 @@ class ModalWrapperComponent {
         this.toggleCssClass(this.elementRef.nativeElement, 'keyboard-visible', keyboardHeight > 0);
         const keyboardOverlap = this.getKeyboardOverlap(keyboardHeight, this.elementRef.nativeElement);
         let snapFooterToKeyboard = false;
-        const embeddedFooterElement = this.getEmbeddedFooterElement();
+        const embeddedFooterElement = this.currentFooter;
         if (embeddedFooterElement) {
             this.setCssVar(embeddedFooterElement, '--keyboard-offset', `${keyboardOverlap}px`);
             snapFooterToKeyboard = embeddedFooterElement.classList.contains('snap-to-keyboard');
@@ -1563,86 +1680,6 @@ class ModalWrapperComponent {
             }
         }
     }
-    clearEmbeddedElements() {
-        Object.entries(this.elementToParentMap).forEach(([tagName, getParents]) => {
-            const newParents = getParents();
-            newParents.forEach((newParent) => {
-                const embeddedElement = newParent.querySelector(`:scope > ${tagName}`);
-                this.removeChild(embeddedElement);
-            });
-        });
-    }
-    /* TODO: Rewrite to make this function independent of element order.
-       See: https://github.com/kirbydesign/designsystem/issues/2096
-    */
-    getEmbeddedComponentElement() {
-        const contentElementChildren = Array.from(this.ionContentElement.nativeElement.children).reverse(); // Reverse makes it easier to retrieve the last children in the list
-        const embeddedComponentElement = !!this.config.modalRoute
-            ? contentElementChildren[0]
-            : contentElementChildren[1];
-        /*
-          As ModalConfig.component has type 'any' all values are valid for component;
-          explicitly handle the case where no embedded component element is found due to
-          this.
-        */
-        if (!embeddedComponentElement)
-            return null;
-        return embeddedComponentElement;
-    }
-    getEmbeddedFooterElement() {
-        return this.elementRef.nativeElement.querySelector('kirby-modal-footer');
-    }
-    moveChild(child, newParents) {
-        this.renderer.removeChild(child.parentElement, child);
-        newParents.forEach((newParent, index) => {
-            const childToAppend = index > 0 ? child.cloneNode(true) : child;
-            this.renderer.appendChild(newParent, childToAppend);
-            // Append adds child as last element of parent; therefore retrieve with lastElementChild
-            const childElement = newParent.lastElementChild;
-            if (childElement.tagName === 'KIRBY-MODAL-FOOTER') {
-                this.resizeObserverService.observe(childElement, (entry) => {
-                    const [property, pixelValue] = [
-                        '--footer-height',
-                        `${Math.floor(entry.contentRect.height)}px`,
-                    ];
-                    this.setCssVar(this.elementRef.nativeElement, property, pixelValue);
-                });
-            }
-        });
-    }
-    removeChild(child) {
-        if (!!child) {
-            this.renderer.removeChild(child.parentElement, child);
-        }
-    }
-    observeEmbeddedElements() {
-        const parentElement = this.getEmbeddedComponentElement();
-        if (parentElement === null)
-            return; // Mute observe warning when parentElement is null
-        this.mutationObserver.observe(parentElement, {
-            childList: true, // Listen for addition or removal of child nodes
-        });
-    }
-    createEmbeddedElementsMutationObserver() {
-        const observedElements = Object.keys(this.elementToParentMap);
-        const callback = (mutations) => {
-            const addedNodes = mutations
-                .filter((mutation) => mutation.type === 'childList') // Filter for mutation to the tree of nodes
-                .map((mutation) => {
-                // Only check for addedNodes as removal is handled by the Angular renderer:
-                return Array.from(mutation.addedNodes).filter((node) => observedElements.includes(node.nodeName));
-            });
-            const addedElements = Array.prototype
-                .concat(...addedNodes)
-                .filter((node) => node instanceof HTMLElement);
-            addedElements.forEach((addedElement) => {
-                const newParentElement = this.elementToParentMap[addedElement.nodeName]();
-                // Move embedded element out of content and append to new parent:
-                this.moveChild(addedElement, newParentElement);
-            });
-        };
-        return new MutationObserver(callback);
-    }
     createModalWrapperIntersectionObserver() {
         const callback = (entries) => {
             const entry = entries[0];
@@ -1670,26 +1707,31 @@ class ModalWrapperComponent {
             this.routerOutlet.deactivate();
         }
         //clean up the observer
-        this.mutationObserver.disconnect();
         delete this._mutationObserver;
         this.intersectionObserver.disconnect();
         delete this._intersectionObserver;
         if (this.resizeObserverService) {
             this.resizeObserverService.unobserve(this.windowRef.nativeWindow.document.body);
             this.resizeObserverService.unobserve(this.ionHeaderElement.nativeElement);
-            this.resizeObserverService.unobserve(this.getEmbeddedFooterElement());
+            this.resizeObserverService.unobserve(this.currentFooter);
         }
         this.destroy$.next();
         this.destroy$.complete();
     }
 }
 ModalWrapperComponent.KEYBOARD_HIDE_DELAY_IN_MS = 100;
-/** @nocollapse */ ModalWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ResizeObserverService }, { token: i0.ComponentFactoryResolver }, { token: WindowRef }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ModalWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalWrapperComponent, selector: "kirby-modal-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()", "window:ionKeyboardDidShow": "_onKeyboardShow($event.detail.keyboardHeight)", "window:keyboardWillShow": "_onKeyboardShow($event.keyboardHeight)", "window:ionKeyboardDidHide": "_onKeyboardHide()", "window:keyboardWillHide": "_onKeyboardHide()", "window:resize": "_onWindowResize()" }, properties: { "class.collapsible-title": "this._hasCollapsibleTitle", "class.drawer": "this._isDrawer" } }, providers: [{ provide: Modal, useExisting: ModalWrapperComponent }], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "contentTitle", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title></ion-title>\n    <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n      <ng-container\n        *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n      ></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"4\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n  <button kirby-button attentionLevel=\"2\" size=\"md\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media (min-width: 721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-start: 56px;--padding-end: 56px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+/** @nocollapse */ ModalWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Injector }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: ResizeObserverService }, { token: i0.ComponentFactoryResolver }, { token: WindowRef }, { token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ModalWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalWrapperComponent, selector: "kirby-modal-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()", "window:ionKeyboardDidShow": "_onKeyboardShow($event.detail.keyboardHeight)", "window:keyboardWillShow": "_onKeyboardShow($event.keyboardHeight)", "window:ionKeyboardDidHide": "_onKeyboardHide()", "window:keyboardWillHide": "_onKeyboardHide()", "window:resize": "_onWindowResize()" }, properties: { "class.collapsible-title": "this._hasCollapsibleTitle", "class.drawer": "this._isDrawer" } }, providers: [
+        { provide: Modal, useExisting: ModalWrapperComponent },
+        { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
+    ], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "_contentTitleElement", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title></ion-title>\n    <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n      <ng-container\n        *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n      ></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"4\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n  <button kirby-button attentionLevel=\"2\" size=\"md\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media (min-width: 721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-start: 56px;--padding-end: 56px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-modal-wrapper', providers: [{ provide: Modal, useExisting: ModalWrapperComponent }], template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title></ion-title>\n    <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n      <ng-container\n        *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n      ></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"4\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n  <button kirby-button attentionLevel=\"2\" size=\"md\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media (min-width: 721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-start: 56px;--padding-end: 56px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ResizeObserverService }, { type: i0.ComponentFactoryResolver }, { type: WindowRef }, { type: PlatformService }]; }, propDecorators: { _hasCollapsibleTitle: [{
+            args: [{ selector: 'kirby-modal-wrapper', providers: [
+                        { provide: Modal, useExisting: ModalWrapperComponent },
+                        { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
+                    ], template: "<ion-header (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title></ion-title>\n    <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n      <ng-container\n        *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n      ></ng-container>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\">\n  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"4\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n  <button kirby-button attentionLevel=\"2\" size=\"md\" (click)=\"btn.action($event)\">\n    <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media (min-width: 721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-start: 56px;--padding-end: 56px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: ResizeObserverService }, { type: i0.ComponentFactoryResolver }, { type: WindowRef }, { type: PlatformService }]; }, propDecorators: { _hasCollapsibleTitle: [{
                 type: HostBinding,
                 args: ['class.collapsible-title']
             }], config: [{
@@ -1715,7 +1757,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
             }], routerOutlet: [{
                 type: ViewChild,
                 args: [RouterOutlet, { static: true }]
-            }], contentTitle: [{
+            }], _contentTitleElement: [{
                 type: ViewChild,
                 args: ['contentTitle', { read: ElementRef }]
             }], _isDrawer: [{
@@ -5057,7 +5099,6 @@ class DropdownComponent {
         this.changeDetectorRef = changeDetectorRef;
         this.keyboardHandlerService = keyboardHandlerService;
         this.state = OpenState.closed;
-        this.hasConfiguredSlottedItems = false;
         this.horizontalDirection = HorizontalDirection.right;
         this.verticalDirection = VerticalDirection.down;
         this._items = [];
@@ -5133,6 +5174,24 @@ class DropdownComponent {
     get _popoutUp() {
         return this.verticalDirection === VerticalDirection.up;
     }
+    set kirbyItemsSlotted(kirbyItems) {
+        const hasSlottedItems = this.itemClickUnlisten?.length > 0;
+        if (hasSlottedItems) {
+            this.unlistenAllSlottedItems();
+        }
+        // Setup a click listener for each new slotted items
+        kirbyItems.forEach((kirbyItem, index) => {
+            this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');
+            const unlisten = this.renderer.listen(kirbyItem.nativeElement, 'click', () => {
+                this.onItemSelect(index);
+            });
+            this.itemClickUnlisten.push(unlisten);
+        });
+        this._kirbyItemsSlotted = kirbyItems;
+    }
+    get kirbyItemsSlotted() {
+        return this._kirbyItemsSlotted;
+    }
     onToggle(event) {
         event.stopPropagation();
         if (!this.isOpen) {
@@ -5150,18 +5209,6 @@ class DropdownComponent {
         // Prevent button focus;
         event.preventDefault();
     }
-    ngAfterContentChecked() {
-        if (!this.hasConfiguredSlottedItems && this.kirbyItemsSlotted.length) {
-            this.kirbyItemsSlotted.forEach((kirbyItem, index) => {
-                this.renderer.setAttribute(kirbyItem.nativeElement, 'role', 'option');
-                const unlisten = this.renderer.listen(kirbyItem.nativeElement, 'click', () => {
-                    this.onItemSelect(index);
-                });
-                this.itemClickUnlisten.push(unlisten);
-            });
-            this.hasConfiguredSlottedItems = true;
-        }
-    }
     /* Utility that makes it easier to set styles on card element
     when using popover*/
     setPopoverCardStyle(style, value) {
@@ -5414,11 +5461,14 @@ class DropdownComponent {
         }
         return false;
     }
-    ngOnDestroy() {
-        let unlisten;
-        while ((unlisten = this.itemClickUnlisten.pop()) !== undefined) {
-            unlisten();
+    unlistenAllSlottedItems() {
+        let unlistenItem;
+        while ((unlistenItem = this.itemClickUnlisten.pop()) !== undefined) {
+            unlistenItem();
         }
+    }
+    ngOnDestroy() {
+        this.unlistenAllSlottedItems();
         if (this.intersectionObserverRef) {
             this.intersectionObserverRef.disconnect();
         }
@@ -7814,18 +7864,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 }]
         }] });
 
-class ModalFooterComponent {
-    constructor() {
+class ModalFooterComponent extends ModalElementComponent {
+    constructor(elementRef, modalElementsAdvertiser) {
+        super(ModalElementType.FOOTER, elementRef, modalElementsAdvertiser);
         this.snapToKeyboard = false;
         this.type = 'fixed';
     }
 }
-/** @nocollapse */ ModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalFooterComponent, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, ngImport: i0, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], components: [{ type: i1.IonFooter, selector: "ion-footer", inputs: ["mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ModalFooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, deps: [{ token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ ModalFooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalFooterComponent, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, usesInheritance: true, ngImport: i0, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], components: [{ type: i1.IonFooter, selector: "ion-footer", inputs: ["mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: ["ion-footer{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:8px 16px;padding-bottom:calc(8px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
-        }], propDecorators: { snapToKeyboard: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { snapToKeyboard: [{
                 type: HostBinding,
                 args: ['class.snap-to-keyboard']
             }, {
@@ -8080,8 +8133,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                 type: Input,
                 args: ['kirbyPageContent']
             }] } });
-class PageProgressComponent {
-    constructor(modalWrapper) {
+class PageProgressComponent extends ModalElementComponent {
+    constructor(modalWrapper, modalElementsAdvertiser, elementRef) {
+        super(ModalElementType.PAGE_PROGRESS, elementRef, modalElementsAdvertiser);
         this.modalWrapper = modalWrapper;
         // TODO: Find alternative implementation, which aligns with future page configuration / consumption
         // This implementation was chosen over expanding `moveChild` method in component wrapper with yet another scenario
@@ -8093,8 +8147,8 @@ class PageProgressComponent {
         }
     }
 }
-/** @nocollapse */ PageProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageProgressComponent, deps: [{ token: ModalWrapperComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ PageProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageProgressComponent, selector: "kirby-page-progress", host: { properties: { "attr.slot": "this.slot" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:flex}\n"] });
+/** @nocollapse */ PageProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageProgressComponent, deps: [{ token: ModalWrapperComponent, optional: true, skipSelf: true }, { token: ModalElementsAdvertiser, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PageProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageProgressComponent, selector: "kirby-page-progress", host: { properties: { "attr.slot": "this.slot" } }, usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{display:flex}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageProgressComponent, decorators: [{
             type: Component,
             args: [{
@@ -8106,21 +8160,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }]; }, propDecorators: { slot: [{
+                }] }, { type: ModalElementsAdvertiser, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { slot: [{
                 type: HostBinding,
                 args: ['attr.slot']
             }] } });
-class PageTitleComponent {
+class PageTitleComponent extends ModalElementComponent {
+    constructor(elementRef, modalElementsAdvertiser) {
+        super(ModalElementType.TITLE, elementRef, modalElementsAdvertiser);
+    }
 }
-/** @nocollapse */ PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageTitleComponent, selector: "kirby-page-title", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
+/** @nocollapse */ PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleComponent, deps: [{ token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageTitleComponent, selector: "kirby-page-title", usesInheritance: true, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kirby-page-title',
                     template: ` <ng-content></ng-content> `,
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
+                    type: Optional
+                }] }]; } });
 class PageContentComponent {
 }
 /** @nocollapse */ PageContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });