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

package/fesm2022/kirbydesign-designsystem-page.mjs

@@ -1,918 +1,1539 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Input, HostBinding, Optional, Component, EventEmitter, Injector, RendererStyleFlags2, ElementRef, TemplateRef, HostListener, ContentChild, ContentChildren, ViewChild, ViewChildren, Output, SkipSelf, Inject, ChangeDetectionStrategy, NgModule } from '@angular/core';
-import * as i2 from '@angular/router';
-import { NavigationStart, NavigationEnd } from '@angular/router';
-import * as i5 from '@ionic/angular/standalone';
-import { IonHeader, IonToolbar, IonButtons, IonBackButton, IonTitle, IonContent, IonRefresher, IonFooter } from '@ionic/angular/standalone';
-import { componentOnReady } from '@ionic/core';
-import * as i4 from '@kirbydesign/designsystem/tabs';
-import { selectedTabClickEvent } from '@kirbydesign/designsystem/tabs';
-import { Subject } from 'rxjs';
-import { filter, takeUntil, debounceTime, map } from 'rxjs/operators';
-import { ACTIONGROUP_CONFIG } from '@kirbydesign/designsystem/action-group';
-import { HeaderComponent, HeaderModule } from '@kirbydesign/designsystem/header';
-import * as i6 from '@kirbydesign/designsystem/helpers';
-import { observeContent, KirbyAnimation, IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
-import * as i1 from '@kirbydesign/designsystem/modal';
-import { ModalElementComponent, ModalElementType } from '@kirbydesign/designsystem/modal';
-import * as i3 from '@kirbydesign/designsystem/shared';
-import { FitHeadingDirective } from '@kirbydesign/designsystem/shared';
-import { getGlobalConfig } from '@kirbydesign/designsystem/config';
-import { NgTemplateOutlet, NgClass, CommonModule } from '@angular/common';
-import { SpinnerComponent, SpinnerModule } from '@kirbydesign/designsystem/spinner';
-import * as i7 from '@angular/platform-browser';
-
-/**
- * Specify scroll event debounce time in ms and scrolled offset from top in pixels
- */
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Inject, InjectionToken, Injector, Input, NgModule, Optional, Output, RendererStyleFlags2, SkipSelf, TemplateRef, ViewChild, ViewChildren } from "@angular/core";
+import * as i2 from "@angular/router";
+import { NavigationEnd, NavigationStart } from "@angular/router";
+import * as i5 from "@ionic/angular";
+import { IonBackButton, IonButtons, IonContent, IonFooter, IonHeader, IonRefresher, IonTitle, IonToolbar } from "@ionic/angular";
+import { componentOnReady } from "@ionic/core";
+import * as i4 from "@kirbydesign/designsystem/tabs";
+import { selectedTabClickEvent } from "@kirbydesign/designsystem/tabs";
+import { Subject, fromEvent } from "rxjs";
+import { debounceTime, filter, map, startWith, takeUntil } from "rxjs/operators";
+import { ACTIONGROUP_CONFIG } from "@kirbydesign/designsystem/action-group";
+import { HeaderComponent, HeaderModule } from "@kirbydesign/designsystem/header";
+import * as i6 from "@kirbydesign/designsystem/helpers";
+import { IonicElementPartHelper, KirbyAnimation, observeContent } from "@kirbydesign/designsystem/helpers";
+import * as i1 from "@kirbydesign/designsystem/modal";
+import { ModalElementComponent, ModalElementType } from "@kirbydesign/designsystem/modal";
+import * as i3 from "@kirbydesign/designsystem/shared";
+import { FitHeadingDirective } from "@kirbydesign/designsystem/shared";
+import { getGlobalConfig } from "@kirbydesign/designsystem/config";
+import { CommonModule, NgClass, NgTemplateOutlet } from "@angular/common";
+import { SpinnerComponent, SpinnerModule } from "@kirbydesign/designsystem/spinner";
+import * as i7 from "@angular/platform-browser";
 const contentScrollDebounceTimeInMS = 10;
 const contentScrolledOffsetInPixels = 4;
-const PAGE_BACK_BUTTON_OVERRIDE = new InjectionToken('page-back-button-override');
-class PageTitleDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: PageTitleDirective, isStandalone: true, selector: "[kirbyPageTitle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageTitleDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyPageTitle]' }]
-        }] });
-class PageSubtitleDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: PageSubtitleDirective, isStandalone: true, selector: "[kirbyPageSubtitle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageSubtitleDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyPageSubtitle]' }]
-        }] });
-class PageToolbarTitleDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageToolbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: PageToolbarTitleDirective, isStandalone: true, selector: "[kirbyPageToolbarTitle]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageToolbarTitleDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyPageToolbarTitle]' }]
-        }] });
-class PageActionsDirective {
-    constructor(template) {
-        this.template = template;
-        this.stickyDefault = true;
-        this.fixedDefault = false;
-        console.warn('Defining Page Actions via *kirbyPageActions is deprecated and will be removed in Kirby v11. A Kirby Header with Actions should be used instead, as it has an improved API with better support for responsive layouts.');
-    }
-    get isSticky() {
-        return this.config ? this.config.sticky : this.stickyDefault;
-    }
-    get isFixed() {
-        return this.config ? this.config.fixed : this.fixedDefault;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageActionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: PageActionsDirective, isStandalone: true, selector: "[kirbyPageActions]", inputs: { config: ["kirbyPageActions", "config"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageActionsDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyPageActions]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { config: [{
-                type: Input,
-                args: ['kirbyPageActions']
-            }] } });
-class PageContentDirective {
-    constructor(template) {
-        this.template = template;
-    }
-    get isFixed() {
-        return this.config && this.config.fixed;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: PageContentDirective, isStandalone: true, selector: "[kirbyPageContent]", inputs: { config: ["kirbyPageContent", "config"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageContentDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyPageContent]' }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { config: [{
-                type: Input,
-                args: ['kirbyPageContent']
-            }] } });
-class PageStickyContentDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageStickyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: PageStickyContentDirective, isStandalone: true, selector: "[kirbyPageStickyContent]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageStickyContentDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyPageStickyContent]' }]
-        }] });
-class PageProgressComponent extends ModalElementComponent {
-    constructor(modalElementsAdvertiser, elementRef) {
-        super(ModalElementType.PAGE_PROGRESS, elementRef, modalElementsAdvertiser);
-        // 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
-        this.slot = 'start';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageProgressComponent, deps: [{ token: i1.ModalElementsAdvertiser, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: PageProgressComponent, isStandalone: true, selector: "kirby-page-progress", host: { properties: { "attr.slot": "this.slot" } }, usesInheritance: true, ngImport: i0, template: `
+const PAGE_BACK_BUTTON_OVERRIDE = new InjectionToken("page-back-button-override");
+var PageTitleDirective = class PageTitleDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageTitleDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageTitleDirective,
+			isStandalone: true,
+			selector: "[kirbyPageTitle]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyPageTitle]" }]
+	}]
+});
+var PageSubtitleDirective = class PageSubtitleDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageSubtitleDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageSubtitleDirective,
+			isStandalone: true,
+			selector: "[kirbyPageSubtitle]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageSubtitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyPageSubtitle]" }]
+	}]
+});
+var PageToolbarTitleDirective = class PageToolbarTitleDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageToolbarTitleDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageToolbarTitleDirective,
+			isStandalone: true,
+			selector: "[kirbyPageToolbarTitle]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageToolbarTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyPageToolbarTitle]" }]
+	}]
+});
+var PageActionsDirective = class PageActionsDirective {
+	constructor(template) {
+		this.template = template;
+		this.stickyDefault = true;
+		this.fixedDefault = false;
+		console.warn("Defining Page Actions via *kirbyPageActions is deprecated and will be removed in Kirby v11. A Kirby Header with Actions should be used instead, as it has an improved API with better support for responsive layouts.");
+	}
+	get isSticky() {
+		return this.config ? this.config.sticky : this.stickyDefault;
+	}
+	get isFixed() {
+		return this.config ? this.config.fixed : this.fixedDefault;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageActionsDirective,
+			deps: [{ token: i0.TemplateRef }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageActionsDirective,
+			isStandalone: true,
+			selector: "[kirbyPageActions]",
+			inputs: { config: ["kirbyPageActions", "config"] },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageActionsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyPageActions]" }]
+	}],
+	ctorParameters: () => [{ type: i0.TemplateRef }],
+	propDecorators: { config: [{
+		type: Input,
+		args: ["kirbyPageActions"]
+	}] }
+});
+var PageContentDirective = class PageContentDirective {
+	constructor(template) {
+		this.template = template;
+	}
+	get isFixed() {
+		return this.config && this.config.fixed;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageContentDirective,
+			deps: [{ token: i0.TemplateRef }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageContentDirective,
+			isStandalone: true,
+			selector: "[kirbyPageContent]",
+			inputs: { config: ["kirbyPageContent", "config"] },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyPageContent]" }]
+	}],
+	ctorParameters: () => [{ type: i0.TemplateRef }],
+	propDecorators: { config: [{
+		type: Input,
+		args: ["kirbyPageContent"]
+	}] }
+});
+var PageStickyContentDirective = class PageStickyContentDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageStickyContentDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageStickyContentDirective,
+			isStandalone: true,
+			selector: "[kirbyPageStickyContent]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageStickyContentDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyPageStickyContent]" }]
+	}]
+});
+var PageProgressComponent = class PageProgressComponent extends ModalElementComponent {
+	constructor(modalElementsAdvertiser, elementRef) {
+		super(ModalElementType.PAGE_PROGRESS, elementRef, modalElementsAdvertiser);
+		this.slot = "start";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageProgressComponent,
+			deps: [{
+				token: i1.ModalElementsAdvertiser,
+				optional: true
+			}, { token: i0.ElementRef }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageProgressComponent,
+			isStandalone: true,
+			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;margin-inline-end:4px}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageProgressComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-page-progress', template: `
+  `,
+			isInline: true,
+			styles: [":host{display:flex;margin-inline-end:4px}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageProgressComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-page-progress",
+			template: `
     <ng-content></ng-content>
-  `, styles: [":host{display:flex;margin-inline-end:4px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ModalElementsAdvertiser, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ElementRef }], propDecorators: { slot: [{
-                type: HostBinding,
-                args: ['attr.slot']
-            }] } });
-class PageTitleComponent extends ModalElementComponent {
-    constructor(elementRef, modalElementsAdvertiser) {
-        super(ModalElementType.TITLE, elementRef, modalElementsAdvertiser);
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageTitleComponent, deps: [{ token: i0.ElementRef }, { token: i1.ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: PageTitleComponent, isStandalone: true, selector: "kirby-page-title", usesInheritance: true, ngImport: i0, template: `
+  `,
+			changeDetection: ChangeDetectionStrategy.Eager,
+			styles: [":host{display:flex;margin-inline-end:4px}\n"]
+		}]
+	}],
+	ctorParameters: () => [{
+		type: i1.ModalElementsAdvertiser,
+		decorators: [{ type: Optional }]
+	}, { type: i0.ElementRef }],
+	propDecorators: { slot: [{
+		type: HostBinding,
+		args: ["attr.slot"]
+	}] }
+});
+var PageTitleComponent = class PageTitleComponent extends ModalElementComponent {
+	constructor(elementRef, modalElementsAdvertiser) {
+		super(ModalElementType.TITLE, elementRef, modalElementsAdvertiser);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageTitleComponent,
+			deps: [{ token: i0.ElementRef }, {
+				token: i1.ModalElementsAdvertiser,
+				optional: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageTitleComponent,
+			isStandalone: true,
+			selector: "kirby-page-title",
+			usesInheritance: true,
+			ngImport: i0,
+			template: `
     <ng-content></ng-content>
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageTitleComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kirby-page-title',
-                    template: `
+  `,
+			isInline: true,
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageTitleComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-page-title",
+			template: `
     <ng-content></ng-content>
   `,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ModalElementsAdvertiser, decorators: [{
-                    type: Optional
-                }] }] });
-class PageContentComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: PageContentComponent, isStandalone: true, selector: "kirby-page-content", ngImport: i0, template: `
+			changeDetection: ChangeDetectionStrategy.Eager
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, {
+		type: i1.ModalElementsAdvertiser,
+		decorators: [{ type: Optional }]
+	}]
+});
+var PageContentComponent = class PageContentComponent {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageContentComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageContentComponent,
+			isStandalone: true,
+			selector: "kirby-page-content",
+			ngImport: i0,
+			template: `
     <ng-content></ng-content>
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageContentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kirby-page-content',
-                    template: `
+  `,
+			isInline: true,
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageContentComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-page-content",
+			template: `
     <ng-content></ng-content>
   `,
-                }]
-        }] });
-class PageActionsComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: PageActionsComponent, isStandalone: true, selector: "kirby-page-actions", ngImport: i0, template: `
+			changeDetection: ChangeDetectionStrategy.Eager
+		}]
+	}]
+});
+var PageActionsComponent = class PageActionsComponent {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageActionsComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageActionsComponent,
+			isStandalone: true,
+			selector: "kirby-page-actions",
+			ngImport: i0,
+			template: `
     <ng-content select="button[kirby-button]"></ng-content>
-  `, isInline: true, styles: [":host{display:inline-flex;column-gap:8px}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-page-actions', template: `
+  `,
+			isInline: true,
+			styles: [":host{display:inline-flex;column-gap:8px}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageActionsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-page-actions",
+			template: `
     <ng-content select="button[kirby-button]"></ng-content>
-  `, styles: [":host{display:inline-flex;column-gap:8px}\n"] }]
-        }] });
-class PageComponent {
-    set maxWidth(width) {
-        this._maxWidth = width;
-    }
-    get maxWidth() {
-        return this._maxWidth;
-    }
-    get tabBarBottomHidden() {
-        return this._tabBarBottomHidden;
-    }
-    set tabBarBottomHidden(value) {
-        if (this.tabsComponent) {
-            // as we are setting a class on tabs, we need this to happen in a separate cd cycle
-            setTimeout(() => {
-                this.tabsComponent.tabBarBottomHidden = value;
-                this.changeDetectorRef.markForCheck();
-            });
-        }
-        this._tabBarBottomHidden = value;
-    }
-    constructor(elementRef, injector, renderer, router, changeDetectorRef, zone, modalNavigationService, resizeObserverService, tabsComponent, backButtonOverride, routerOutlet, navCtrl, ionicElementPartHelper, translations, htmlDocTitle) {
-        this.elementRef = elementRef;
-        this.injector = injector;
-        this.renderer = renderer;
-        this.router = router;
-        this.changeDetectorRef = changeDetectorRef;
-        this.zone = zone;
-        this.modalNavigationService = modalNavigationService;
-        this.resizeObserverService = resizeObserverService;
-        this.tabsComponent = tabsComponent;
-        this.backButtonOverride = backButtonOverride;
-        this.routerOutlet = routerOutlet;
-        this.navCtrl = navCtrl;
-        this.ionicElementPartHelper = ionicElementPartHelper;
-        this.translations = translations;
-        this.htmlDocTitle = htmlDocTitle;
-        this.titleAlignment = 'left';
-        this._maxWidth = 'default';
-        this.enter = new EventEmitter();
-        this.leave = new EventEmitter();
-        this.refresh = new EventEmitter();
-        this.backButtonClick = new EventEmitter();
-        this.toolbarTitleClick = new EventEmitter();
-        this.isStickyContentPinned = false;
-        this.isObservingTitle = false;
-        this.isObservingActions = false;
-        this.isDocTitleSet = false;
-        this.ngOnDestroy$ = new Subject();
-        this.navigationStart$ = this.router.events.pipe(filter((event) => event instanceof NavigationStart), takeUntil(this.ngOnDestroy$));
-        this.navigationEnd$ = this.router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.ngOnDestroy$));
-    }
-    whenContentReady() {
-        if (!this.contentReadyPromise) {
-            this.contentReadyPromise = new Promise((resolve) => {
-                this.resizeObserverService.observe(this.ionContentElement, (entry) => {
-                    if (entry.contentRect.height > 0) {
-                        this.resizeObserverService.unobserve(this.ionContentElement);
-                        resolve();
-                    }
-                });
-            });
-        }
-        return this.contentReadyPromise;
-    }
-    ngOnInit() {
-        this.removeWrapper();
-        this.ionicElementPartHelper.setPart('background', this.ionToolbarElement, '.toolbar-background');
-        const actionGroupConfig = {
-            isCondensed: true,
-            maxVisibleActions: 1,
-        };
-        this.toolbarActionGroupInjector = Injector.create({
-            providers: [
-                {
-                    provide: ACTIONGROUP_CONFIG,
-                    useValue: actionGroupConfig,
-                },
-            ],
-            parent: this.injector,
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.titleMaxLines) {
-            this.fitHeadingConfig = {
-                maxLines: changes.titleMaxLines.currentValue,
-            };
-        }
-        if (changes.subtitle && !changes.subtitle.isFirstChange) {
-            this.subtitle = changes.title.currentValue;
-            this.hasPageSubtitle = this.subtitle !== undefined;
-        }
-        if (changes.title || changes.toolbarTitle) {
-            this.setHTMLDocumentTitle(this.title || this.toolbarTitle);
-        }
-    }
-    ngAfterViewInit() {
-        this.zone.runOutsideAngular(() => {
-            this.contentScrolled$ = this.content.ionScroll.pipe(debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.ngOnDestroy$));
-            this.contentScrolled$.subscribe((scrollInfo) => {
-                if (scrollInfo.scrollTop > contentScrolledOffsetInPixels !== this.isContentScrolled) {
-                    this.isContentScrolled = !this.isContentScrolled;
-                    this.changeDetectorRef.detectChanges();
-                }
-            });
-        });
-        // This instance has observed a page enter so register the correct url for this instance
-        this.url = this.router.url;
-        this.onEnter();
-        // Watch navigation events for page enter and leave
-        this.navigationStart$.subscribe((event) => {
-            if (this.getPathname(event.url) !== this.getPathname(this.url) &&
-                !this.modalNavigationService.isModalRoute(this.url) &&
-                !this.modalNavigationService.isModalRoute(event.url)) {
-                this.onLeave();
-            }
-        });
-        this.navigationEnd$.subscribe((event) => {
-            if (this.getPathname(event.urlAfterRedirects) === this.getPathname(this.url)) {
-                this.onEnter();
-            }
-        });
-        this.interceptBackButtonClicksSetup();
-        this.initializeStickyIntersectionObserver();
-        this.setActionButtonsWidth();
-    }
-    ngAfterContentChecked() {
-        this.initializeHeader();
-        this.initializeTitle();
-        this.initializeActions();
-        this.initializeContent();
-        this.initializeStickyContent();
-        this.changeDetectorRef.detectChanges();
-    }
-    ngOnDestroy() {
-        this.ngOnDestroy$.next();
-        this.ngOnDestroy$.complete();
-        this.titleIntersectionObserver?.disconnect();
-        this.stickyActionsIntersectionObserver?.disconnect();
-        this.stickyContentIntersectionObserver?.disconnect();
-        this.unobserveTitleMutation?.();
-    }
-    delegateRefreshEvent(event) {
-        this.refresh.emit({
-            complete: event.target.complete.bind(event.target),
-        });
-    }
-    getMaxWidthClasses() {
-        if (!this.maxWidth) {
-            return '';
-        }
-        if (this.maxWidth === 'default') {
-            return '';
-        }
-        return `max-width-${this.maxWidth}`;
-    }
-    onTitleClick(event) {
-        if (this.toolbarTitleClick.observed) {
-            this.toolbarTitleClick.emit(event);
-        }
-        else {
-            this.header?.titleClick.emit(event);
-        }
-    }
-    removeWrapper() {
-        const parent = this.elementRef.nativeElement.parentNode;
-        this.renderer.removeChild(parent, this.elementRef.nativeElement);
-        this.renderer.appendChild(parent, this.ionHeaderElement.nativeElement);
-        this.renderer.appendChild(parent, this.ionContentElement.nativeElement);
-        this.renderer.appendChild(parent, this.ionFooterElement.nativeElement);
-    }
-    onEnter() {
-        if (this.isActive)
-            return;
-        this.isActive = true;
-        this.enter.emit();
-        this.patchIonLastFocused();
-        this.observeTitle();
-        this.observeActions();
-        this.setHTMLDocumentTitle(this.header?.title || this.title || this.toolbarTitle);
-        this.observeTitleDOMChanges();
-    }
-    onLeave() {
-        if (!this.isActive)
-            return;
-        this.isActive = false;
-        this.leave.emit();
-        this.unobserveTitle();
-        this.unobserveActions();
-        this.unobserveTitleMutation?.();
-        if (this.tabBarBottomHidden && this.tabsComponent) {
-            this.tabsComponent.tabBarBottomHidden = false;
-        }
-    }
-    interceptBackButtonClicksSetup() {
-        if (this.backButtonOverride) {
-            this.backButton.onClick = (event) => {
-                event.preventDefault();
-                this.backButtonOverride.navigateBack(this.routerOutlet, this.navCtrl, this.defaultBackHref);
-            };
-        }
-        // Intercept back-button click events, defaulting to the built-in click-handler.
-        if (this.backButtonClick.observers.length === 0) {
-            this.backButtonClick
-                .pipe(takeUntil(this.ngOnDestroy$))
-                .subscribe(this.backButton.onClick.bind(this.backButton));
-        }
-        this.backButton.onClick = (event) => {
-            this.backButtonClick.emit(event);
-        };
-    }
-    patchIonLastFocused() {
-        const ionLastFocus = this.ionContentElement.nativeElement.querySelector('[ion-last-focus="true"]');
-        // When a focusManagerPriority is set, Ionic handles moving focus back to the element that presented the current view.
-        // Unfortunately, we need to schedule a removal of tabindex="-1" from ionLastFocus element after Ionic might have set it
-        // to work around elements becoming inaccessible after navigating back: https://github.com/ionic-team/ionic-framework/issues/29875
-        setTimeout(() => {
-            if (ionLastFocus?.getAttribute('tabindex') !== '-1')
-                return;
-            this.renderer.removeAttribute(ionLastFocus, 'tabindex');
-        });
-    }
-    initializeStickyIntersectionObserver() {
-        if (this.stickyContentTemplate) {
-            // Sticky content present - start observing for stickiness
-            if (!this.stickyContentIntersectionObserver) {
-                this.stickyContentIntersectionObserver = this.createStickyContentIntersectionObserver();
-            }
-            setTimeout(() => {
-                this.stickyContentIntersectionObserver.observe(this.stickyContentContainer.nativeElement);
-            });
-        }
-    }
-    initializeHeader() {
-        if (this.hasHeader === undefined && !!this.header) {
-            this.hasHeader = true;
-            // Header could later be removed from DOM (e.g. in virtual scrolling scenarios),
-            // so store a reference to `header.titleActionIconTemplate` and `header.titleClick`:
-            this.titleActionIconTemplate = this.header.titleActionIconTemplate;
-            if (this.header.titleClick.observed && this.hasInteractiveTitle === undefined) {
-                this.hasInteractiveTitle = true;
-            }
-            // Set document title from header immediately if present, then subscribe to changes
-            this.setHTMLDocumentTitle(this.header.title);
-            this.header.title$.pipe(takeUntil(this.ngOnDestroy$)).subscribe(() => {
-                this.setHTMLDocumentTitle(this.header.title);
-            });
-        }
-    }
-    initializeTitle() {
-        if (this.hasHeader && this.isObservingTitle && !this.header?.titleElement) {
-            // If we're already observing the header's title element, but it's no longer present,
-            // it means it has been removed from DOM (e.g. in virtual scrolling scenarios).
-            // Flip observing flag:
-            this.isObservingTitle = false;
-        }
-        if (this.hasPageTitle) {
-            if (!this.isObservingTitle && !!this.header?.titleElement) {
-                // Header and title element re-attached to DOM - observe title:
-                this.observeTitle();
-            }
-            // Ensures rest of initializeTitle() won't run, if already initialized
-            return;
-        }
-        this.hasPageTitle =
-            this.title !== undefined || !!this.customTitleTemplate || !!this.header?.title;
-        this.toolbarTitleVisible = !this.hasPageTitle;
-        this.hasPageSubtitle = this.subtitle !== undefined || !!this.customSubtitleTemplate;
-        if (this.header?.title && !this.toolbarTitle) {
-            this.toolbarTitle = this.header.title;
-            this.header.title$.pipe(takeUntil(this.ngOnDestroy$)).subscribe((title) => {
-                this.toolbarTitle = title;
-            });
-        }
-        this.observeTitle();
-        const defaultTitleTemplate = this.customTitleTemplate || this.simpleTitleTemplate;
-        /* eslint-disable */
-        // prettier-ignore
-        this.toolbarTitleTemplate = this.customToolbarTitleTemplate
-            ? this.customToolbarTitleTemplate
-            : typeof this.toolbarTitle === 'string'
-                ? this.simpleToolbarTitleTemplate
-                : defaultTitleTemplate;
-        if (this.toolbarTitleClick.observed && this.hasInteractiveTitle === undefined) {
-            this.hasInteractiveTitle = true;
-        }
-    }
-    observeTitle() {
-        if (!this.hasPageTitle) {
-            // Nothing to observe
-            return;
-        }
-        if (this.isObservingTitle) {
-            // Already observing
-            return;
-        }
-        // We are not actually observing the title until after the `whenContentReady` promise has resolved,
-        // but since we've already checked that the page has a title in the guard above,
-        // we'll - eagerly - set this flag now to prevent unnecessary re-runs of the rest of this method:
-        this.isObservingTitle = true;
-        if (!this.titleIntersectionObserver) {
-            this.titleIntersectionObserver = new IntersectionObserver((entries) => {
-                // In rare scenarios we get more than 1 entry - use the last one:
-                const lastEntry = entries[entries.length - 1];
-                if (lastEntry) {
-                    const showToolbarTitle = !lastEntry.isIntersecting;
-                    // Only flip the flag and run Change Detection when changed:
-                    if (showToolbarTitle !== this.toolbarTitleVisible) {
-                        this.toolbarTitleVisible = showToolbarTitle;
-                        this.changeDetectorRef.detectChanges();
-                    }
-                }
-            }, { root: this.ionContentElement.nativeElement });
-        }
-        // Run outside Angular to prevent unnecessary triggering change detection
-        // and - under certain conditions - an infinite loop when called within ngAfterContentChecked:
-        this.zone.runOutsideAngular(() => {
-            this.whenContentReady().then(() => {
-                const titleElementRef = this.pageTitle || this.header?.titleElement;
-                if (titleElementRef?.nativeElement) {
-                    this.titleIntersectionObserver.observe(titleElementRef.nativeElement);
-                }
-            });
-        });
-    }
-    unobserveTitle() {
-        const titleElementRef = this.pageTitle || this.header?.titleElement;
-        if (titleElementRef) {
-            this.titleIntersectionObserver?.unobserve(titleElementRef.nativeElement);
-        }
-        this.isObservingTitle = false;
-    }
-    observeTitleDOMChanges() {
-        const globalKirbyConfig = getGlobalConfig();
-        if (!globalKirbyConfig?.setHtmlDocTitle)
-            return;
-        if (this.isDocTitleSet)
-            return; // we never want to observe if the document title is already set via any title properties (or already observed)
-        const titleArea = this.ionHeaderElement.nativeElement.querySelector('ion-toolbar ion-title .toolbar-title');
-        this.setHTMLDocumentTitle(titleArea.textContent);
-        this.unobserveTitleMutation = observeContent(titleArea, () => {
-            this.setHTMLDocumentTitle(titleArea.textContent);
-        });
-    }
-    setHTMLDocumentTitle(title) {
-        const globalKirbyConfig = getGlobalConfig();
-        if (!globalKirbyConfig?.setHtmlDocTitle || !title || title.trim() === '')
-            return;
-        this.htmlDocTitle.setTitle(title);
-        this.isDocTitleSet = true;
-    }
-    initializeActions() {
-        if (this.headerActionsTemplate === undefined && !!this.header) {
-            this.headerActionsTemplate = this.header.actionsTemplate;
-        }
-        if (this.hasHeader && this.isObservingActions && !this.header?.actionsElement) {
-            // If we're already observing the header's actions element, but it's no longer present,
-            // it means it has been removed from DOM (e.g. in virtual scrolling scenarios).
-            // Flip observing flag:
-            this.isObservingActions = false;
-        }
-        this.observeActions();
-        this.customActions.forEach((pageAction) => {
-            if (pageAction.isFixed) {
-                this.fixedActionsTemplate = pageAction.template;
-            }
-            else if (pageAction.isSticky) {
-                this.stickyActionsTemplate = pageAction.template;
-            }
-            else {
-                this.pageActionsTemplate = pageAction.template;
-            }
-        });
-    }
-    observeActions() {
-        if (!this.header?.actionsElement) {
-            // Nothing to observe
-            return;
-        }
-        if (this.isObservingActions) {
-            // Already observing
-            return;
-        }
-        // We are not actually observing actions until after the `whenContentReady` promise has resolved,
-        // but since we've already checked that there's an actions element present in the guard above,
-        // we'll - eagerly - set this flag now to prevent unnecessary re-runs of the rest of this method:
-        this.isObservingActions = true;
-        if (!this.stickyActionsIntersectionObserver) {
-            this.stickyActionsIntersectionObserver = new IntersectionObserver((entries) => {
-                // In rare scenarios we get more than 1 entry - use the last one:
-                const lastEntry = entries[entries.length - 1];
-                if (lastEntry) {
-                    const showToolbarActions = !lastEntry.isIntersecting;
-                    // Only flip the flag and run Change Detection when changed:
-                    if (showToolbarActions !== this.toolbarActionsVisible) {
-                        this.toolbarActionsVisible = showToolbarActions;
-                        this.changeDetectorRef.detectChanges();
-                    }
-                }
-            }, { root: this.ionContentElement.nativeElement });
-        }
-        // Run outside Angular to prevent unnecessary triggering change detection
-        // and - under certain conditions - an infinite loop when called within ngAfterContentChecked:
-        this.zone.runOutsideAngular(() => {
-            this.whenContentReady().then(() => {
-                if (this.header?.actionsElement?.nativeElement) {
-                    this.stickyActionsIntersectionObserver.observe(this.header.actionsElement.nativeElement);
-                }
-            });
-        });
-    }
-    unobserveActions() {
-        if (this.header?.actionsElement) {
-            this.stickyActionsIntersectionObserver?.unobserve(this.header.actionsElement.nativeElement);
-        }
-        this.isObservingActions = false;
-    }
-    setActionButtonsWidth() {
-        if (!this.ionToolbarButtonsElement)
-            return;
-        // Ensure ion-toolbar custom element has been defined (primarily when testing, but doesn't hurt):
-        customElements.whenDefined(this.ionToolbarElement.nativeElement.localName).then(() => {
-            // Ensure toolbar and buttons have been rendered and has dimensions:
-            componentOnReady(this.ionToolbarElement.nativeElement, (toolbar) => {
-                let startButtonsWidth = 0;
-                let endButtonsWidth = 0;
-                this.ionToolbarButtonsElement
-                    .map((ionButtonsElementRef) => ionButtonsElementRef.nativeElement)
-                    .forEach((ionButtonsElement) => {
-                    const style = getComputedStyle(ionButtonsElement);
-                    const margin = parseInt(style.marginLeft) + parseInt(style.marginRight);
-                    if (ionButtonsElement.getAttribute('slot') === 'start') {
-                        startButtonsWidth += ionButtonsElement.offsetWidth + margin;
-                    }
-                    else {
-                        endButtonsWidth += ionButtonsElement.offsetWidth + margin;
-                    }
-                });
-                const actionButtonsMaxWidth = Math.max(startButtonsWidth, endButtonsWidth);
-                this.renderer.setStyle(toolbar, '--action-buttons-width', `${actionButtonsMaxWidth}px`, RendererStyleFlags2.DashCase);
-            });
-        });
-    }
-    initializeContent() {
-        this.customContent.forEach((content) => {
-            if (content.isFixed) {
-                this.fixedContentTemplate = content.template;
-            }
-            else {
-                this.customContentTemplate = content.template;
-            }
-        });
-    }
-    initializeStickyContent() {
-        this.stickyContentTemplate = this.stickyContentRef;
-    }
-    createStickyContentIntersectionObserver() {
-        const options = {
-            root: this.ionContentElement.nativeElement,
-            threshold: 1,
-        };
-        const callback = (entries) => {
-            if (this.isStickyContentPinned !== !entries[0].isIntersecting) {
-                this.isStickyContentPinned = !this.isStickyContentPinned;
-                this.changeDetectorRef.detectChanges();
-            }
-        };
-        return new IntersectionObserver(callback, options);
-    }
-    getPathname(url) {
-        return url.split('?')[0];
-    }
-    _onKeyboardWillShow(info) {
-        if (info && info.keyboardHeight) {
-            this.ionContentElement.nativeElement.style.setProperty('--keyboard-offset', `${info.keyboardHeight}px`);
-        }
-    }
-    _onKeyboardWillHide() {
-        this.ionContentElement.nativeElement.style.setProperty('--keyboard-offset', '0px');
-    }
-    _onSelectedTabClick() {
-        if (this.content) {
-            this.content.scrollToTop(KirbyAnimation.Duration.LONG);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i0.Renderer2 }, { token: i2.Router }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i1.ModalNavigationService }, { token: i3.ResizeObserverService }, { token: i4.TabsComponent, optional: true, skipSelf: true }, { token: PAGE_BACK_BUTTON_OVERRIDE, optional: true }, { token: i5.IonRouterOutlet, optional: true }, { token: i5.NavController, optional: true }, { token: i6.IonicElementPartHelper }, { token: i3.TranslationService }, { token: i7.Title }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: PageComponent, isStandalone: true, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", hasInteractiveTitle: "hasInteractiveTitle", maxWidth: "maxWidth", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh", backButtonClick: "backButtonClick", toolbarTitleClick: "toolbarTitleClick" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, providers: [IonicElementPartHelper], queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "stickyContentRef", first: true, predicate: PageStickyContentDirective, descendants: true, read: TemplateRef }, { propertyName: "header", first: true, predicate: HeaderComponent, descendants: true }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "backButton", first: true, predicate: IonBackButton, descendants: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "stickyContentContainer", first: true, predicate: ["stickyContentContainer"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "ionToolbarButtonsElement", predicate: IonButtons, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ion-header role=\"presentation\">\n  <ion-toolbar\n    [class.content-scrolled]=\"isContentScrolled\"\n    [class.content-pinned]=\"isStickyContentPinned\"\n  >\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n        [attr.aria-label]=\"translations.get('back')\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n      <div class=\"toolbar-title\">\n        @if (!titleActionIconTemplate && !hasInteractiveTitle) {\n          <h1 class=\"kirby-text-normal-bold\">\n            <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n          </h1>\n        }\n        @if (!!titleActionIconTemplate || hasInteractiveTitle) {\n          <span\n            [class.clickable]=\"hasInteractiveTitle\"\n            [class.has-icon]=\"!!titleActionIconTemplate\"\n            (click)=\"onTitleClick($event)\"\n          >\n            <h1 class=\"kirby-text-normal-bold\">\n              <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n            </h1>\n            <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n          </span>\n        }\n      </div>\n    </ion-title>\n    @if (!!headerActionsTemplate) {\n      <ion-buttons class=\"hide\" slot=\"primary\" [class.fade-in]=\"toolbarActionsVisible\">\n        <ng-container\n          *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n        ></ng-container>\n      </ion-buttons>\n    }\n    @if (!!stickyActionsTemplate) {\n      <ion-buttons class=\"legacy-actions\" slot=\"primary\">\n        <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n      </ion-buttons>\n    }\n    @if (!!fixedActionsTemplate) {\n      <ion-buttons class=\"legacy-actions\" slot=\"secondary\">\n        <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n      </ion-buttons>\n    }\n  </ion-toolbar>\n</ion-header>\n\n<ion-content\n  scrollEvents=\"true\"\n  forceOverscroll=\"false\"\n  [class]=\"getMaxWidthClasses()\"\n  [class.has-header]=\"hasHeader\"\n>\n  @if (refresh.observers.length > 0) {\n    <ion-refresher (ionRefresh)=\"delegateRefreshEvent($event)\" slot=\"fixed\">\n      <kirby-spinner></kirby-spinner>\n    </ion-refresher>\n  }\n\n  <!-- Page header -->\n  @if (hasPageTitle && !hasHeader) {\n    <div class=\"page-header-container\">\n      <div\n        class=\"page-header\"\n        [ngClass]=\"{\n          'text-center': titleAlignment === 'center',\n          'text-right': titleAlignment === 'right',\n        }\"\n      >\n        <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n          ></ng-container>\n        </div>\n        @if (hasPageSubtitle) {\n          <div class=\"page-subtitle\">\n            <ng-container\n              *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n            ></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Header -->\n  @if (hasHeader) {\n    <div class=\"page-header-container\">\n      <ng-content select=\"kirby-header\"></ng-content>\n    </div>\n  }\n\n  <!--  Sticky content -->\n  @if (stickyContentTemplate) {\n    <div\n      #stickyContentContainer\n      class=\"sticky-content-container\"\n      [class.content-pinned]=\"isStickyContentPinned\"\n    >\n      <div>\n        <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  @if (fixedContentTemplate) {\n    <div slot=\"fixed\" class=\"fixed-content\">\n      <div class=\"content-inner\">\n        <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header,ion-toolbar{box-sizing:border-box;--background: var(--kirby-background-color)}ion-title h1{font-size:min(clamp(14px,1.125rem,35px),21.6px)}ion-toolbar{--border-width: 0 !important;--padding-start: 16px;--padding-end: 16px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black);--min-height: 56px}@media(min-width:768px){ion-toolbar{--padding-start: 24px;--padding-end: 24px;--min-height: 72px}}ion-toolbar:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px}ion-toolbar:before,ion-toolbar::part(background){transition:background-color 50ms linear}ion-toolbar.content-scrolled{--background: rgb(243.294, 243.294, 243.294)}ion-toolbar.content-scrolled:before,ion-toolbar.content-scrolled::part(background){transition-duration:.2s}ion-toolbar.content-scrolled:not(.content-pinned):before{background-color:var(--kirby-medium)}ion-toolbar.content-pinned:before{transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:8px}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:8px}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:clamp(13px,1rem,32px);font-weight:400;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>span{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:56px;scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}@media(hover:hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;opacity:1}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button:focus-visible::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 792px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: 12px;--padding-start: var( --page-content-padding-start, calc(16px + var(--ion-safe-area-left)) );--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}@media(min-width:768px){ion-content{--padding-start: var(--page-content-padding-start, 48px);--padding-end: var(--page-content-padding-end, 48px)}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: 1092px}ion-content.max-width-xl{--page-content-max-width: 1392px}ion-content.max-width-full{--page-content-max-width: 100%}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:40px;transform:translateZ(0);will-change:transform}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:-13px;left:0;right:0;padding-top:1px;margin-block-end:24px;z-index:10}.sticky-content-container div{max-width:var(--page-content-max-width, 792px);margin:0 auto}.sticky-content-container:before,.sticky-content-container:after{content:\"\";position:absolute;left:calc(-1 * var(--padding-start));right:calc(-1 * var(--padding-end));bottom:0}.sticky-content-container:before{top:0;background-color:var(--background)}.sticky-content-container:after{height:1px}.sticky-content-container.content-pinned:before{background-color:#f3f3f3}.sticky-content-container.content-pinned:after{background-color:var(--kirby-medium)}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonBackButton, selector: "ion-back-button" }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: SpinnerComponent, selector: "kirby-spinner" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "directive", type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], imports: [
-                        IonHeader,
-                        IonToolbar,
-                        IonButtons,
-                        IonBackButton,
-                        IonTitle,
-                        NgTemplateOutlet,
-                        IonContent,
-                        IonRefresher,
-                        SpinnerComponent,
-                        NgClass,
-                        IonFooter,
-                        FitHeadingDirective,
-                    ], template: "<ion-header role=\"presentation\">\n  <ion-toolbar\n    [class.content-scrolled]=\"isContentScrolled\"\n    [class.content-pinned]=\"isStickyContentPinned\"\n  >\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n        [attr.aria-label]=\"translations.get('back')\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n      <div class=\"toolbar-title\">\n        @if (!titleActionIconTemplate && !hasInteractiveTitle) {\n          <h1 class=\"kirby-text-normal-bold\">\n            <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n          </h1>\n        }\n        @if (!!titleActionIconTemplate || hasInteractiveTitle) {\n          <span\n            [class.clickable]=\"hasInteractiveTitle\"\n            [class.has-icon]=\"!!titleActionIconTemplate\"\n            (click)=\"onTitleClick($event)\"\n          >\n            <h1 class=\"kirby-text-normal-bold\">\n              <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n            </h1>\n            <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n          </span>\n        }\n      </div>\n    </ion-title>\n    @if (!!headerActionsTemplate) {\n      <ion-buttons class=\"hide\" slot=\"primary\" [class.fade-in]=\"toolbarActionsVisible\">\n        <ng-container\n          *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n        ></ng-container>\n      </ion-buttons>\n    }\n    @if (!!stickyActionsTemplate) {\n      <ion-buttons class=\"legacy-actions\" slot=\"primary\">\n        <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n      </ion-buttons>\n    }\n    @if (!!fixedActionsTemplate) {\n      <ion-buttons class=\"legacy-actions\" slot=\"secondary\">\n        <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n      </ion-buttons>\n    }\n  </ion-toolbar>\n</ion-header>\n\n<ion-content\n  scrollEvents=\"true\"\n  forceOverscroll=\"false\"\n  [class]=\"getMaxWidthClasses()\"\n  [class.has-header]=\"hasHeader\"\n>\n  @if (refresh.observers.length > 0) {\n    <ion-refresher (ionRefresh)=\"delegateRefreshEvent($event)\" slot=\"fixed\">\n      <kirby-spinner></kirby-spinner>\n    </ion-refresher>\n  }\n\n  <!-- Page header -->\n  @if (hasPageTitle && !hasHeader) {\n    <div class=\"page-header-container\">\n      <div\n        class=\"page-header\"\n        [ngClass]=\"{\n          'text-center': titleAlignment === 'center',\n          'text-right': titleAlignment === 'right',\n        }\"\n      >\n        <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n          ></ng-container>\n        </div>\n        @if (hasPageSubtitle) {\n          <div class=\"page-subtitle\">\n            <ng-container\n              *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n            ></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Header -->\n  @if (hasHeader) {\n    <div class=\"page-header-container\">\n      <ng-content select=\"kirby-header\"></ng-content>\n    </div>\n  }\n\n  <!--  Sticky content -->\n  @if (stickyContentTemplate) {\n    <div\n      #stickyContentContainer\n      class=\"sticky-content-container\"\n      [class.content-pinned]=\"isStickyContentPinned\"\n    >\n      <div>\n        <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  @if (fixedContentTemplate) {\n    <div slot=\"fixed\" class=\"fixed-content\">\n      <div class=\"content-inner\">\n        <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header,ion-toolbar{box-sizing:border-box;--background: var(--kirby-background-color)}ion-title h1{font-size:min(clamp(14px,1.125rem,35px),21.6px)}ion-toolbar{--border-width: 0 !important;--padding-start: 16px;--padding-end: 16px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black);--min-height: 56px}@media(min-width:768px){ion-toolbar{--padding-start: 24px;--padding-end: 24px;--min-height: 72px}}ion-toolbar:before{content:\"\";position:absolute;left:0;right:0;bottom:0;height:1px}ion-toolbar:before,ion-toolbar::part(background){transition:background-color 50ms linear}ion-toolbar.content-scrolled{--background: rgb(243.294, 243.294, 243.294)}ion-toolbar.content-scrolled:before,ion-toolbar.content-scrolled::part(background){transition-duration:.2s}ion-toolbar.content-scrolled:not(.content-pinned):before{background-color:var(--kirby-medium)}ion-toolbar.content-pinned:before{transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:8px}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:8px}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:clamp(13px,1rem,32px);font-weight:400;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>span{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:56px;scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}@media(hover:hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;opacity:1}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button:focus-visible::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 792px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: 12px;--padding-start: var( --page-content-padding-start, calc(16px + var(--ion-safe-area-left)) );--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}@media(min-width:768px){ion-content{--padding-start: var(--page-content-padding-start, 48px);--padding-end: var(--page-content-padding-end, 48px)}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: 1092px}ion-content.max-width-xl{--page-content-max-width: 1392px}ion-content.max-width-full{--page-content-max-width: 100%}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:40px;transform:translateZ(0);will-change:transform}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:-13px;left:0;right:0;padding-top:1px;margin-block-end:24px;z-index:10}.sticky-content-container div{max-width:var(--page-content-max-width, 792px);margin:0 auto}.sticky-content-container:before,.sticky-content-container:after{content:\"\";position:absolute;left:calc(-1 * var(--padding-start));right:calc(-1 * var(--padding-end));bottom:0}.sticky-content-container:before{top:0;background-color:var(--background)}.sticky-content-container:after{height:1px}.sticky-content-container.content-pinned:before{background-color:#f3f3f3}.sticky-content-container.content-pinned:after{background-color:var(--kirby-medium)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i0.Renderer2 }, { type: i2.Router }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i1.ModalNavigationService }, { type: i3.ResizeObserverService }, { type: i4.TabsComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [PAGE_BACK_BUTTON_OVERRIDE]
-                }] }, { type: i5.IonRouterOutlet, decorators: [{
-                    type: Optional
-                }] }, { type: i5.NavController, decorators: [{
-                    type: Optional
-                }] }, { type: i6.IonicElementPartHelper }, { type: i3.TranslationService }, { type: i7.Title }], propDecorators: { title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], toolbarTitle: [{
-                type: Input
-            }], titleAlignment: [{
-                type: Input
-            }], defaultBackHref: [{
-                type: Input
-            }], hideBackButton: [{
-                type: Input
-            }], titleMaxLines: [{
-                type: Input
-            }], hasInteractiveTitle: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], tabBarBottomHidden: [{
-                type: Input
-            }], enter: [{
-                type: Output
-            }], leave: [{
-                type: Output
-            }], refresh: [{
-                type: Output
-            }], backButtonClick: [{
-                type: Output
-            }], toolbarTitleClick: [{
-                type: Output
-            }], content: [{
-                type: ViewChild,
-                args: [IonContent, { static: true }]
-            }], ionContentElement: [{
-                type: ViewChild,
-                args: [IonContent, { static: true, read: ElementRef }]
-            }], ionHeaderElement: [{
-                type: ViewChild,
-                args: [IonHeader, { static: true, read: ElementRef }]
-            }], ionFooterElement: [{
-                type: ViewChild,
-                args: [IonFooter, { static: true, read: ElementRef }]
-            }], ionToolbarElement: [{
-                type: ViewChild,
-                args: [IonToolbar, { static: true, read: ElementRef }]
-            }], ionToolbarButtonsElement: [{
-                type: ViewChildren,
-                args: [IonButtons, { read: ElementRef }]
-            }], backButton: [{
-                type: ViewChild,
-                args: [IonBackButton, { static: false }]
-            }], pageTitle: [{
-                type: ViewChild,
-                args: ['pageTitle', { static: false, read: ElementRef }]
-            }], stickyContentContainer: [{
-                type: ViewChild,
-                args: ['stickyContentContainer', { static: false, read: ElementRef }]
-            }], simpleTitleTemplate: [{
-                type: ViewChild,
-                args: ['simpleTitleTemplate', { static: true, read: TemplateRef }]
-            }], simpleToolbarTitleTemplate: [{
-                type: ViewChild,
-                args: ['simpleToolbarTitleTemplate', { static: true, read: TemplateRef }]
-            }], customToolbarTitleTemplate: [{
-                type: ContentChild,
-                args: [PageToolbarTitleDirective, { static: false, read: TemplateRef }]
-            }], customTitleTemplate: [{
-                type: ContentChild,
-                args: [PageTitleDirective, { static: false, read: TemplateRef }]
-            }], customSubtitleTemplate: [{
-                type: ContentChild,
-                args: [PageSubtitleDirective, { static: false, read: TemplateRef }]
-            }], customActions: [{
-                type: ContentChildren,
-                args: [PageActionsDirective]
-            }], customContent: [{
-                type: ContentChildren,
-                args: [PageContentDirective]
-            }], stickyContentRef: [{
-                type: ContentChild,
-                args: [PageStickyContentDirective, { static: false, read: TemplateRef }]
-            }], header: [{
-                type: ContentChild,
-                args: [HeaderComponent]
-            }], _onKeyboardWillShow: [{
-                type: HostListener,
-                args: ['window:keyboardWillShow', ['$event']]
-            }], _onKeyboardWillHide: [{
-                type: HostListener,
-                args: ['window:keyboardWillHide']
-            }], _onSelectedTabClick: [{
-                type: HostListener,
-                args: [`window:${selectedTabClickEvent}`]
-            }] } });
-
-class PageFooterComponent {
-    constructor(pageComponent, hostElement, renderer) {
-        this.pageComponent = pageComponent;
-        this.hostElement = hostElement;
-        this.renderer = renderer;
-        this.hasPadding = true;
-        if (!pageComponent) {
-            throw new Error('Page footer must reside inside of a Kirby page');
-        }
-    }
-    close() {
-        this.pageComponent.tabBarBottomHidden = false;
-        this.renderer.removeChild(this.hostElement.nativeElement.parentElement, this.hostElement.nativeElement, true);
-    }
-    ngOnDestroy() {
-        this.pageComponent.tabBarBottomHidden = false;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageFooterComponent, deps: [{ token: PageComponent, optional: true, skipSelf: true }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: PageFooterComponent, isStandalone: true, selector: "kirby-page-footer", inputs: { hasPadding: "hasPadding" }, ngImport: i0, template: "<div class=\"wrapper\" [class.padding]=\"hasPadding\">\n  <ng-content></ng-content>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block;background-color:var(--kirby-white);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:8px 16px;padding-bottom:calc(8px + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-page-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\" [class.padding]=\"hasPadding\">\n  <ng-content></ng-content>\n</div>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{display:block;background-color:var(--kirby-white);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, 792px);margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:8px 16px;padding-bottom:calc(8px + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"] }]
-        }], ctorParameters: () => [{ type: PageComponent, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hasPadding: [{
-                type: Input
-            }] } });
-
-class PageModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: PageModule, imports: [CommonModule,
-            FitHeadingDirective,
-            SpinnerModule,
-            HeaderModule,
-            IonHeader,
-            IonToolbar,
-            IonButtons,
-            IonBackButton,
-            IonContent,
-            IonTitle,
-            IonRefresher,
-            IonFooter,
-            PageComponent,
-            PageActionsComponent,
-            PageActionsDirective,
-            PageContentComponent,
-            PageFooterComponent,
-            PageContentDirective,
-            PageProgressComponent,
-            PageTitleComponent,
-            PageTitleDirective,
-            PageSubtitleDirective,
-            PageToolbarTitleDirective,
-            PageStickyContentDirective], exports: [PageComponent,
-            PageActionsComponent,
-            PageActionsDirective,
-            PageContentComponent,
-            PageFooterComponent,
-            PageContentDirective,
-            PageProgressComponent,
-            PageTitleComponent,
-            PageTitleDirective,
-            PageSubtitleDirective,
-            PageToolbarTitleDirective,
-            FitHeadingDirective,
-            PageStickyContentDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageModule, imports: [CommonModule,
-            SpinnerModule,
-            HeaderModule,
-            IonHeader,
-            IonToolbar,
-            IonButtons,
-            IonBackButton,
-            IonContent,
-            IonTitle,
-            IonRefresher,
-            IonFooter,
-            PageComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: PageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FitHeadingDirective,
-                        SpinnerModule,
-                        HeaderModule,
-                        IonHeader,
-                        IonToolbar,
-                        IonButtons,
-                        IonBackButton,
-                        IonContent,
-                        IonTitle,
-                        IonRefresher,
-                        IonFooter,
-                        PageComponent,
-                        PageActionsComponent,
-                        PageActionsDirective,
-                        PageContentComponent,
-                        PageFooterComponent,
-                        PageContentDirective,
-                        PageProgressComponent,
-                        PageTitleComponent,
-                        PageTitleDirective,
-                        PageSubtitleDirective,
-                        PageToolbarTitleDirective,
-                        PageStickyContentDirective,
-                    ],
-                    exports: [
-                        PageComponent,
-                        PageActionsComponent,
-                        PageActionsDirective,
-                        PageContentComponent,
-                        PageFooterComponent,
-                        PageContentDirective,
-                        PageProgressComponent,
-                        PageTitleComponent,
-                        PageTitleDirective,
-                        PageSubtitleDirective,
-                        PageToolbarTitleDirective,
-                        FitHeadingDirective,
-                        PageStickyContentDirective,
-                    ],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `,
+			changeDetection: ChangeDetectionStrategy.Eager,
+			styles: [":host{display:inline-flex;column-gap:8px}\n"]
+		}]
+	}]
+});
+var PageComponent = class PageComponent {
+	set maxWidth(width) {
+		this._maxWidth = width;
+	}
+	get maxWidth() {
+		return this._maxWidth;
+	}
+	get tabBarBottomHidden() {
+		return this._tabBarBottomHidden;
+	}
+	set tabBarBottomHidden(value) {
+		if (this.tabsComponent) setTimeout(() => {
+			this.tabsComponent.tabBarBottomHidden = value;
+			this.changeDetectorRef.markForCheck();
+		});
+		this._tabBarBottomHidden = value;
+	}
+	constructor(elementRef, injector, renderer, router, changeDetectorRef, zone, modalNavigationService, resizeObserverService, tabsComponent, backButtonOverride, routerOutlet, navCtrl, ionicElementPartHelper, translations, htmlDocTitle) {
+		this.elementRef = elementRef;
+		this.injector = injector;
+		this.renderer = renderer;
+		this.router = router;
+		this.changeDetectorRef = changeDetectorRef;
+		this.zone = zone;
+		this.modalNavigationService = modalNavigationService;
+		this.resizeObserverService = resizeObserverService;
+		this.tabsComponent = tabsComponent;
+		this.backButtonOverride = backButtonOverride;
+		this.routerOutlet = routerOutlet;
+		this.navCtrl = navCtrl;
+		this.ionicElementPartHelper = ionicElementPartHelper;
+		this.translations = translations;
+		this.htmlDocTitle = htmlDocTitle;
+		this.titleAlignment = "left";
+		this._maxWidth = "default";
+		this.enter = new EventEmitter();
+		this.leave = new EventEmitter();
+		this.refresh = new EventEmitter();
+		this.backButtonClick = new EventEmitter();
+		this.toolbarTitleClick = new EventEmitter();
+		this.isStickyContentPinned = false;
+		this.isObservingTitle = false;
+		this.isObservingActions = false;
+		this.isDocTitleSet = false;
+		this.observedToolbarButtons = /* @__PURE__ */ new Set();
+		this.ngOnDestroy$ = new Subject();
+		this.navigationStart$ = this.router.events.pipe(filter((event) => event instanceof NavigationStart), takeUntil(this.ngOnDestroy$));
+		this.navigationEnd$ = this.router.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntil(this.ngOnDestroy$));
+	}
+	whenContentReady() {
+		if (!this.contentReadyPromise) this.contentReadyPromise = new Promise((resolve) => {
+			this.resizeObserverService.observe(this.ionContentElement, (entry) => {
+				if (entry.contentRect.height > 0) {
+					this.resizeObserverService.unobserve(this.ionContentElement);
+					resolve();
+				}
+			});
+		});
+		return this.contentReadyPromise;
+	}
+	ngOnInit() {
+		this.removeWrapper();
+		this.ionicElementPartHelper.setPart("background", this.ionToolbarElement, ".toolbar-background");
+		const actionGroupConfig = {
+			isCondensed: true,
+			maxVisibleActions: 1
+		};
+		this.toolbarActionGroupInjector = Injector.create({
+			providers: [{
+				provide: ACTIONGROUP_CONFIG,
+				useValue: actionGroupConfig
+			}],
+			parent: this.injector
+		});
+	}
+	ngOnChanges(changes) {
+		if (changes.titleMaxLines) this.fitHeadingConfig = { maxLines: changes.titleMaxLines.currentValue };
+		if (changes.subtitle && !changes.subtitle.isFirstChange) {
+			this.subtitle = changes.title.currentValue;
+			this.hasPageSubtitle = this.subtitle !== void 0;
+		}
+		if (changes.title || changes.toolbarTitle) this.setHTMLDocumentTitle(this.title || this.toolbarTitle);
+	}
+	ngAfterViewInit() {
+		this.zone.runOutsideAngular(() => {
+			this.contentScrolled$ = fromEvent(this.ionContentElement.nativeElement, "ionScroll").pipe(debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.ngOnDestroy$));
+			this.contentScrolled$.subscribe((scrollInfo) => {
+				if (scrollInfo.scrollTop > contentScrolledOffsetInPixels !== this.isContentScrolled) {
+					this.isContentScrolled = !this.isContentScrolled;
+					this.changeDetectorRef.detectChanges();
+				}
+			});
+		});
+		this.url = this.router.url;
+		this.onEnter();
+		this.navigationStart$.subscribe((event) => {
+			if (this.getPathname(event.url) !== this.getPathname(this.url) && !this.modalNavigationService.isModalRoute(this.url) && !this.modalNavigationService.isModalRoute(event.url)) this.onLeave();
+		});
+		this.navigationEnd$.subscribe((event) => {
+			if (this.getPathname(event.urlAfterRedirects) === this.getPathname(this.url)) this.onEnter();
+		});
+		this.interceptBackButtonClicksSetup();
+		this.initializeStickyIntersectionObserver();
+		this.subscribeToToolbarButtonsChanges();
+	}
+	ngAfterContentChecked() {
+		this.initializeHeader();
+		this.initializeTitle();
+		this.initializeActions();
+		this.initializeContent();
+		this.initializeStickyContent();
+		this.changeDetectorRef.detectChanges();
+	}
+	ngOnDestroy() {
+		this.ngOnDestroy$.next();
+		this.ngOnDestroy$.complete();
+		this.titleIntersectionObserver?.disconnect();
+		this.stickyActionsIntersectionObserver?.disconnect();
+		this.stickyContentIntersectionObserver?.disconnect();
+		this.unobserveTitleMutation?.();
+		this.unobserveToolbarButtons();
+	}
+	delegateRefreshEvent(event) {
+		this.refresh.emit({ complete: event.target.complete.bind(event.target) });
+	}
+	getMaxWidthClasses() {
+		if (!this.maxWidth) return "";
+		if (this.maxWidth === "default") return "";
+		return `max-width-${this.maxWidth}`;
+	}
+	onTitleClick(event) {
+		if (this.toolbarTitleClick.observed) this.toolbarTitleClick.emit(event);
+		else this.header?.titleClick.emit(event);
+	}
+	removeWrapper() {
+		const parent = this.elementRef.nativeElement.parentNode;
+		this.renderer.removeChild(parent, this.elementRef.nativeElement);
+		this.renderer.appendChild(parent, this.ionHeaderElement.nativeElement);
+		this.renderer.appendChild(parent, this.ionContentElement.nativeElement);
+		this.renderer.appendChild(parent, this.ionFooterElement.nativeElement);
+	}
+	onEnter() {
+		if (this.isActive) return;
+		this.isActive = true;
+		this.enter.emit();
+		this.patchIonLastFocused();
+		this.observeTitle();
+		this.observeActions();
+		this.setHTMLDocumentTitle(this.header?.title || this.title || this.toolbarTitle);
+		this.observeTitleDOMChanges();
+	}
+	onLeave() {
+		if (!this.isActive) return;
+		this.isActive = false;
+		this.leave.emit();
+		this.unobserveTitle();
+		this.unobserveActions();
+		this.unobserveTitleMutation?.();
+		if (this.tabBarBottomHidden && this.tabsComponent) this.tabsComponent.tabBarBottomHidden = false;
+	}
+	interceptBackButtonClicksSetup() {
+		if (this.backButtonOverride) this.backButton.onClick = (event) => {
+			event.preventDefault();
+			this.backButtonOverride.navigateBack(this.routerOutlet, this.navCtrl, this.defaultBackHref);
+		};
+		if (this.backButtonClick.observers.length === 0) this.backButtonClick.pipe(takeUntil(this.ngOnDestroy$)).subscribe(this.backButton.onClick.bind(this.backButton));
+		this.backButton.onClick = (event) => {
+			this.backButtonClick.emit(event);
+		};
+	}
+	patchIonLastFocused() {
+		const ionLastFocus = this.ionContentElement.nativeElement.querySelector("[ion-last-focus=\"true\"]");
+		setTimeout(() => {
+			if (ionLastFocus?.getAttribute("tabindex") !== "-1") return;
+			this.renderer.removeAttribute(ionLastFocus, "tabindex");
+		});
+	}
+	initializeStickyIntersectionObserver() {
+		if (this.stickyContentTemplate) {
+			if (!this.stickyContentIntersectionObserver) this.stickyContentIntersectionObserver = this.createStickyContentIntersectionObserver();
+			setTimeout(() => {
+				this.stickyContentIntersectionObserver.observe(this.stickyContentContainer.nativeElement);
+			});
+		}
+	}
+	initializeHeader() {
+		if (this.hasHeader === void 0 && !!this.header) {
+			this.hasHeader = true;
+			this.titleActionIconTemplate = this.header.titleActionIconTemplate;
+			if (this.header.titleClick.observed && this.hasInteractiveTitle === void 0) this.hasInteractiveTitle = true;
+			this.setHTMLDocumentTitle(this.header.title);
+			this.header.title$.pipe(takeUntil(this.ngOnDestroy$)).subscribe(() => {
+				this.setHTMLDocumentTitle(this.header.title);
+			});
+		}
+	}
+	initializeTitle() {
+		if (this.hasHeader && this.isObservingTitle && !this.header?.titleElement) this.isObservingTitle = false;
+		if (this.hasPageTitle) {
+			if (!this.isObservingTitle && !!this.header?.titleElement) this.observeTitle();
+			return;
+		}
+		this.hasPageTitle = this.title !== void 0 || !!this.customTitleTemplate || !!this.header?.title;
+		this.toolbarTitleVisible = !this.hasPageTitle;
+		this.hasPageSubtitle = this.subtitle !== void 0 || !!this.customSubtitleTemplate;
+		if (this.header?.title && !this.toolbarTitle) {
+			this.toolbarTitle = this.header.title;
+			this.header.title$.pipe(takeUntil(this.ngOnDestroy$)).subscribe((title) => {
+				this.toolbarTitle = title;
+			});
+		}
+		this.observeTitle();
+		const defaultTitleTemplate = this.customTitleTemplate || this.simpleTitleTemplate;
+		this.toolbarTitleTemplate = this.customToolbarTitleTemplate ? this.customToolbarTitleTemplate : typeof this.toolbarTitle === "string" ? this.simpleToolbarTitleTemplate : defaultTitleTemplate;
+		if (this.toolbarTitleClick.observed && this.hasInteractiveTitle === void 0) this.hasInteractiveTitle = true;
+	}
+	observeTitle() {
+		if (!this.hasPageTitle) return;
+		if (this.isObservingTitle) return;
+		this.isObservingTitle = true;
+		if (!this.titleIntersectionObserver) this.titleIntersectionObserver = new IntersectionObserver((entries) => {
+			const lastEntry = entries[entries.length - 1];
+			if (lastEntry) {
+				const showToolbarTitle = !lastEntry.isIntersecting;
+				if (showToolbarTitle !== this.toolbarTitleVisible) {
+					this.toolbarTitleVisible = showToolbarTitle;
+					this.changeDetectorRef.detectChanges();
+				}
+			}
+		}, { root: this.ionContentElement.nativeElement });
+		this.zone.runOutsideAngular(() => {
+			this.whenContentReady().then(() => {
+				const titleElementRef = this.pageTitle || this.header?.titleElement;
+				if (titleElementRef?.nativeElement) this.titleIntersectionObserver.observe(titleElementRef.nativeElement);
+			});
+		});
+	}
+	unobserveTitle() {
+		const titleElementRef = this.pageTitle || this.header?.titleElement;
+		if (titleElementRef) this.titleIntersectionObserver?.unobserve(titleElementRef.nativeElement);
+		this.isObservingTitle = false;
+	}
+	observeTitleDOMChanges() {
+		if (!getGlobalConfig()?.setHtmlDocTitle) return;
+		if (this.isDocTitleSet) return;
+		const titleArea = this.ionHeaderElement.nativeElement.querySelector("ion-toolbar ion-title .toolbar-title");
+		this.setHTMLDocumentTitle(titleArea.textContent);
+		this.unobserveTitleMutation = observeContent(titleArea, () => {
+			this.setHTMLDocumentTitle(titleArea.textContent);
+		});
+	}
+	setHTMLDocumentTitle(title) {
+		if (!getGlobalConfig()?.setHtmlDocTitle || !title || title.trim() === "") return;
+		this.htmlDocTitle.setTitle(title);
+		this.isDocTitleSet = true;
+	}
+	initializeActions() {
+		if (this.headerActionsTemplate === void 0 && !!this.header) this.headerActionsTemplate = this.header.actionsTemplate;
+		if (this.hasHeader && this.isObservingActions && !this.header?.actionsElement) this.isObservingActions = false;
+		this.observeActions();
+		this.customActions.forEach((pageAction) => {
+			if (pageAction.isFixed) this.fixedActionsTemplate = pageAction.template;
+			else if (pageAction.isSticky) this.stickyActionsTemplate = pageAction.template;
+			else this.pageActionsTemplate = pageAction.template;
+		});
+	}
+	observeActions() {
+		if (!this.header?.actionsElement) return;
+		if (this.isObservingActions) return;
+		this.isObservingActions = true;
+		if (!this.stickyActionsIntersectionObserver) this.stickyActionsIntersectionObserver = new IntersectionObserver((entries) => {
+			const lastEntry = entries[entries.length - 1];
+			if (lastEntry) {
+				const showToolbarActions = !lastEntry.isIntersecting;
+				if (showToolbarActions !== this.toolbarActionsVisible) {
+					this.toolbarActionsVisible = showToolbarActions;
+					this.changeDetectorRef.detectChanges();
+				}
+			}
+		}, { root: this.ionContentElement.nativeElement });
+		this.zone.runOutsideAngular(() => {
+			this.whenContentReady().then(() => {
+				if (this.header?.actionsElement?.nativeElement) this.stickyActionsIntersectionObserver.observe(this.header.actionsElement.nativeElement);
+			});
+		});
+	}
+	unobserveActions() {
+		if (this.header?.actionsElement) this.stickyActionsIntersectionObserver?.unobserve(this.header.actionsElement.nativeElement);
+		this.isObservingActions = false;
+	}
+	setActionButtonsWidth() {
+		if (!this.ionToolbarButtonsElement) return;
+		customElements.whenDefined(this.ionToolbarElement.nativeElement.localName).then(() => {
+			componentOnReady(this.ionToolbarElement.nativeElement, (toolbar) => {
+				let startButtonsWidth = 0;
+				let endButtonsWidth = 0;
+				this.ionToolbarButtonsElement.map((ionButtonsElementRef) => ionButtonsElementRef.nativeElement).forEach((ionButtonsElement) => {
+					const style = getComputedStyle(ionButtonsElement);
+					const margin = parseInt(style.marginLeft) + parseInt(style.marginRight);
+					if (ionButtonsElement.getAttribute("slot") === "start") startButtonsWidth += ionButtonsElement.offsetWidth + margin;
+					else endButtonsWidth += ionButtonsElement.offsetWidth + margin;
+				});
+				const actionButtonsMaxWidth = Math.max(startButtonsWidth, endButtonsWidth);
+				this.renderer.setStyle(toolbar, "--action-buttons-width", `${actionButtonsMaxWidth}px`, RendererStyleFlags2.DashCase);
+			});
+		});
+	}
+	observeToolbarButtons() {
+		this.unobserveToolbarButtons();
+		this.ionToolbarButtonsElement.forEach(({ nativeElement: ionButtonsElement }) => {
+			this.observedToolbarButtons.add(ionButtonsElement);
+			this.resizeObserverService.observe(ionButtonsElement, () => this.setActionButtonsWidth());
+		});
+	}
+	subscribeToToolbarButtonsChanges() {
+		this.ionToolbarButtonsElement.changes.pipe(startWith(this.ionToolbarButtonsElement), takeUntil(this.ngOnDestroy$)).subscribe(() => {
+			this.observeToolbarButtons();
+			this.setActionButtonsWidth();
+		});
+	}
+	unobserveToolbarButtons() {
+		this.observedToolbarButtons.forEach((ionButtonsElement) => this.resizeObserverService.unobserve(ionButtonsElement));
+		this.observedToolbarButtons.clear();
+	}
+	initializeContent() {
+		this.customContent.forEach((content) => {
+			if (content.isFixed) this.fixedContentTemplate = content.template;
+			else this.customContentTemplate = content.template;
+		});
+	}
+	initializeStickyContent() {
+		this.stickyContentTemplate = this.stickyContentRef;
+	}
+	createStickyContentIntersectionObserver() {
+		const options = {
+			root: this.ionContentElement.nativeElement,
+			threshold: 1
+		};
+		const callback = (entries) => {
+			if (this.isStickyContentPinned !== !entries[0].isIntersecting) {
+				this.isStickyContentPinned = !this.isStickyContentPinned;
+				this.changeDetectorRef.detectChanges();
+			}
+		};
+		return new IntersectionObserver(callback, options);
+	}
+	getPathname(url) {
+		return url.split("?")[0];
+	}
+	_onKeyboardWillShow(info) {
+		if (info && info.keyboardHeight) this.ionContentElement.nativeElement.style.setProperty("--keyboard-offset", `${info.keyboardHeight}px`);
+	}
+	_onKeyboardWillHide() {
+		this.ionContentElement.nativeElement.style.setProperty("--keyboard-offset", "0px");
+	}
+	_onSelectedTabClick() {
+		if (this.content) this.content.scrollToTop(KirbyAnimation.Duration.LONG);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageComponent,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: i0.Injector },
+				{ token: i0.Renderer2 },
+				{ token: i2.Router },
+				{ token: i0.ChangeDetectorRef },
+				{ token: i0.NgZone },
+				{ token: i1.ModalNavigationService },
+				{ token: i3.ResizeObserverService },
+				{
+					token: i4.TabsComponent,
+					optional: true,
+					skipSelf: true
+				},
+				{
+					token: PAGE_BACK_BUTTON_OVERRIDE,
+					optional: true
+				},
+				{
+					token: i5.IonRouterOutlet,
+					optional: true
+				},
+				{
+					token: i5.NavController,
+					optional: true
+				},
+				{ token: i6.IonicElementPartHelper },
+				{ token: i3.TranslationService },
+				{ token: i7.Title }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: PageComponent,
+			isStandalone: true,
+			selector: "kirby-page",
+			inputs: {
+				title: "title",
+				subtitle: "subtitle",
+				toolbarTitle: "toolbarTitle",
+				titleAlignment: "titleAlignment",
+				defaultBackHref: "defaultBackHref",
+				hideBackButton: "hideBackButton",
+				titleMaxLines: "titleMaxLines",
+				hasInteractiveTitle: "hasInteractiveTitle",
+				maxWidth: "maxWidth",
+				tabBarBottomHidden: "tabBarBottomHidden"
+			},
+			outputs: {
+				enter: "enter",
+				leave: "leave",
+				refresh: "refresh",
+				backButtonClick: "backButtonClick",
+				toolbarTitleClick: "toolbarTitleClick"
+			},
+			host: { listeners: {
+				"window:keyboardWillShow": "_onKeyboardWillShow($event)",
+				"window:keyboardWillHide": "_onKeyboardWillHide()",
+				"window:kirbySelectedTabClick": "_onSelectedTabClick()"
+			} },
+			providers: [IonicElementPartHelper],
+			queries: [
+				{
+					propertyName: "customToolbarTitleTemplate",
+					first: true,
+					predicate: PageToolbarTitleDirective,
+					descendants: true,
+					read: TemplateRef
+				},
+				{
+					propertyName: "customTitleTemplate",
+					first: true,
+					predicate: PageTitleDirective,
+					descendants: true,
+					read: TemplateRef
+				},
+				{
+					propertyName: "customSubtitleTemplate",
+					first: true,
+					predicate: PageSubtitleDirective,
+					descendants: true,
+					read: TemplateRef
+				},
+				{
+					propertyName: "stickyContentRef",
+					first: true,
+					predicate: PageStickyContentDirective,
+					descendants: true,
+					read: TemplateRef
+				},
+				{
+					propertyName: "header",
+					first: true,
+					predicate: HeaderComponent,
+					descendants: true
+				},
+				{
+					propertyName: "customActions",
+					predicate: PageActionsDirective
+				},
+				{
+					propertyName: "customContent",
+					predicate: PageContentDirective
+				}
+			],
+			viewQueries: [
+				{
+					propertyName: "content",
+					first: true,
+					predicate: IonContent,
+					descendants: true,
+					static: true
+				},
+				{
+					propertyName: "ionContentElement",
+					first: true,
+					predicate: IonContent,
+					descendants: true,
+					read: ElementRef,
+					static: true
+				},
+				{
+					propertyName: "ionHeaderElement",
+					first: true,
+					predicate: IonHeader,
+					descendants: true,
+					read: ElementRef,
+					static: true
+				},
+				{
+					propertyName: "ionFooterElement",
+					first: true,
+					predicate: IonFooter,
+					descendants: true,
+					read: ElementRef,
+					static: true
+				},
+				{
+					propertyName: "ionToolbarElement",
+					first: true,
+					predicate: IonToolbar,
+					descendants: true,
+					read: ElementRef,
+					static: true
+				},
+				{
+					propertyName: "backButton",
+					first: true,
+					predicate: IonBackButton,
+					descendants: true
+				},
+				{
+					propertyName: "pageTitle",
+					first: true,
+					predicate: ["pageTitle"],
+					descendants: true,
+					read: ElementRef
+				},
+				{
+					propertyName: "stickyContentContainer",
+					first: true,
+					predicate: ["stickyContentContainer"],
+					descendants: true,
+					read: ElementRef
+				},
+				{
+					propertyName: "simpleTitleTemplate",
+					first: true,
+					predicate: ["simpleTitleTemplate"],
+					descendants: true,
+					read: TemplateRef,
+					static: true
+				},
+				{
+					propertyName: "simpleToolbarTitleTemplate",
+					first: true,
+					predicate: ["simpleToolbarTitleTemplate"],
+					descendants: true,
+					read: TemplateRef,
+					static: true
+				},
+				{
+					propertyName: "ionToolbarButtonsElement",
+					predicate: IonButtons,
+					descendants: true,
+					read: ElementRef
+				}
+			],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<ion-header role=\"presentation\">\n  <ion-toolbar\n    [class.content-scrolled]=\"isContentScrolled\"\n    [class.content-pinned]=\"isStickyContentPinned\"\n  >\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n        [attr.aria-label]=\"translations.get('back')\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n      <div class=\"toolbar-title\">\n        @if (!titleActionIconTemplate && !hasInteractiveTitle) {\n          <h1 class=\"kirby-text-normal-bold\">\n            <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n          </h1>\n        }\n        @if (!!titleActionIconTemplate || hasInteractiveTitle) {\n          <span\n            [class.clickable]=\"hasInteractiveTitle\"\n            [class.has-icon]=\"!!titleActionIconTemplate\"\n            (click)=\"onTitleClick($event)\"\n          >\n            <h1 class=\"kirby-text-normal-bold\">\n              <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n            </h1>\n            <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n          </span>\n        }\n      </div>\n    </ion-title>\n    @if (!!headerActionsTemplate) {\n      <ion-buttons class=\"hide\" slot=\"primary\" [class.fade-in]=\"toolbarActionsVisible\">\n        <ng-container\n          *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n        ></ng-container>\n      </ion-buttons>\n    }\n    @if (!!stickyActionsTemplate) {\n      <ion-buttons class=\"legacy-actions\" slot=\"primary\">\n        <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n      </ion-buttons>\n    }\n    @if (!!fixedActionsTemplate) {\n      <ion-buttons class=\"legacy-actions\" slot=\"secondary\">\n        <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n      </ion-buttons>\n    }\n  </ion-toolbar>\n</ion-header>\n\n<ion-content\n  scrollEvents=\"true\"\n  forceOverscroll=\"false\"\n  [class]=\"getMaxWidthClasses()\"\n  [class.has-header]=\"hasHeader\"\n>\n  @if (refresh.observers.length > 0) {\n    <ion-refresher (ionRefresh)=\"delegateRefreshEvent($event)\" slot=\"fixed\">\n      <kirby-spinner></kirby-spinner>\n    </ion-refresher>\n  }\n\n  <!-- Page header -->\n  @if (hasPageTitle && !hasHeader) {\n    <div class=\"page-header-container\">\n      <div\n        class=\"page-header\"\n        [ngClass]=\"{\n          'text-center': titleAlignment === 'center',\n          'text-right': titleAlignment === 'right',\n        }\"\n      >\n        <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n          ></ng-container>\n        </div>\n        @if (hasPageSubtitle) {\n          <div class=\"page-subtitle\">\n            <ng-container\n              *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n            ></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Header -->\n  @if (hasHeader) {\n    <div class=\"page-header-container\">\n      <ng-content select=\"kirby-header\"></ng-content>\n    </div>\n  }\n\n  <!--  Sticky content -->\n  @if (stickyContentTemplate) {\n    <div\n      #stickyContentContainer\n      class=\"sticky-content-container\"\n      [class.content-pinned]=\"isStickyContentPinned\"\n    >\n      <div>\n        <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  @if (fixedContentTemplate) {\n    <div slot=\"fixed\" class=\"fixed-content\">\n      <div class=\"content-inner\">\n        <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header,ion-toolbar{box-sizing:border-box;--background: var(--kirby-color-fill-base)}ion-title h1{font-size:min(var(--kirby-font-size-m),21.6px)}ion-toolbar{--border-width: 0 0 var(--kirby-stroke-xs) !important;--border-color: transparent;--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-color-content-base);--min-height: var(--kirby-spacing-xxxl)}@media(min-width:768px){ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--min-height: var(--kirby-spacing-xxxxxl)}}ion-toolbar::part(background){transition:border-color 50ms linear}ion-toolbar.content-scrolled:not(.content-pinned){--border-color: var(--kirby-color-border-base-silent)}ion-toolbar.content-scrolled:not(.content-pinned)::part(background){transition-duration:var(--kirby-transition-duration-quick)}ion-toolbar.content-pinned::part(background){transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-normal);padding-inline:calc(var(--action-buttons-width, var(--kirby-spacing-xl)var(--kirby-spacing-xxs)) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>h1{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:var(--kirby-spacing-xxxl);scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:var(--kirby-transition-easing-enter-exit);transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-back-button{--color: var(--kirby-color-content-raised);--color-hover: var(--kirby-color-content-raised-hover);--color-focused: var(--kirby-color-content-raised-hover);--background: var(--kirby-color-fill-raised);--background-hover: var(--kirby-color-fill-raised-hover);--background-hover-opacity: 1;--background-focused: var(--kirby-color-fill-raised-hover);--background-focused-opacity: 1;--icon-font-size: 24px;height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);opacity:1}ion-back-button:active,ion-back-button.ion-activated{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--background-hover: var(--kirby-color-fill-raised-active);--color-hover: var(--kirby-color-content-raised-active);--background-focused: var(--kirby-color-fill-raised-active);--color-focused: var(--kirby-color-content-raised-active)}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border:var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);border-radius:var(--kirby-border-radius-pill);overflow:hidden}@media(hover:hover){ion-back-button:hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}ion-back-button:active::part(native),ion-back-button.ion-activated::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}ion-back-button:focus-visible::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}.page-header-container{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.page-header{margin-left:var(--kirby-spacing-s);margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-page-title-margin-bottom, var(--kirby-spacing-xl))}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:var(--kirby-spacing-xxs)}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: var(--kirby-spacing-xs);--padding-start: var( --page-content-padding-start, calc(var(--kirby-spacing-s) + var(--ion-safe-area-left)) );--padding-end: var(--page-content-padding-end, var(--kirby-spacing-s));--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}@media(min-width:768px){ion-content{--padding-start: var(--page-content-padding-start, var(--kirby-spacing-xxl));--padding-end: var(--page-content-padding-end, var(--kirby-spacing-xxl))}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: var(--kirby-page-content-max-width-lg)}ion-content.max-width-xl{--page-content-max-width: var(--kirby-page-content-max-width-xl)}ion-content.max-width-full{--page-content-max-width: var(--kirby-page-content-max-width-full)}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-spacing-xl);transform:translateZ(0);will-change:transform}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:calc(-1 * var(--kirby-spacing-xs) - 1px);left:0;right:0;padding-top:1px;margin-block-end:var(--kirby-spacing-m);z-index:var(--kirby-z-index-sticky-content)}.sticky-content-container div{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.sticky-content-container:before{content:\"\";position:absolute;inset:0 calc(-1 * var(--padding-end)) 0 calc(-1 * var(--padding-start));background-color:var(--background);border-bottom:var(--kirby-stroke-xs) solid transparent;box-sizing:border-box}.sticky-content-container.content-pinned:before{border-bottom-color:var(--kirby-color-border-base-silent)}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: IonHeader,
+					selector: "ion-header",
+					inputs: [
+						"collapse",
+						"mode",
+						"translucent"
+					]
+				},
+				{
+					kind: "component",
+					type: IonToolbar,
+					selector: "ion-toolbar",
+					inputs: ["color", "mode"]
+				},
+				{
+					kind: "component",
+					type: IonButtons,
+					selector: "ion-buttons",
+					inputs: ["collapse"]
+				},
+				{
+					kind: "component",
+					type: IonBackButton,
+					selector: "ion-back-button"
+				},
+				{
+					kind: "component",
+					type: IonTitle,
+					selector: "ion-title",
+					inputs: ["color", "size"]
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: IonContent,
+					selector: "ion-content",
+					inputs: [
+						"color",
+						"fixedSlotPlacement",
+						"forceOverscroll",
+						"fullscreen",
+						"scrollEvents",
+						"scrollX",
+						"scrollY"
+					],
+					outputs: [
+						"ionScrollStart",
+						"ionScroll",
+						"ionScrollEnd"
+					]
+				},
+				{
+					kind: "component",
+					type: IonRefresher,
+					selector: "ion-refresher",
+					inputs: [
+						"closeDuration",
+						"disabled",
+						"mode",
+						"pullFactor",
+						"pullMax",
+						"pullMin",
+						"snapbackDuration"
+					],
+					outputs: [
+						"ionRefresh",
+						"ionPull",
+						"ionStart",
+						"ionPullStart",
+						"ionPullEnd"
+					]
+				},
+				{
+					kind: "component",
+					type: SpinnerComponent,
+					selector: "kirby-spinner"
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "component",
+					type: IonFooter,
+					selector: "ion-footer",
+					inputs: [
+						"collapse",
+						"mode",
+						"translucent"
+					]
+				},
+				{
+					kind: "directive",
+					type: FitHeadingDirective,
+					selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]",
+					inputs: ["kirbyFitHeading"]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-page",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [IonicElementPartHelper],
+			imports: [
+				IonHeader,
+				IonToolbar,
+				IonButtons,
+				IonBackButton,
+				IonTitle,
+				NgTemplateOutlet,
+				IonContent,
+				IonRefresher,
+				SpinnerComponent,
+				NgClass,
+				IonFooter,
+				FitHeadingDirective
+			],
+			template: "<ion-header role=\"presentation\">\n  <ion-toolbar\n    [class.content-scrolled]=\"isContentScrolled\"\n    [class.content-pinned]=\"isStickyContentPinned\"\n  >\n    <ion-buttons slot=\"start\">\n      <ion-back-button\n        text=\"\"\n        [defaultHref]=\"defaultBackHref\"\n        icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n        [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n        [attr.aria-label]=\"translations.get('back')\"\n      ></ion-back-button>\n    </ion-buttons>\n    <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n      <div class=\"toolbar-title\">\n        @if (!titleActionIconTemplate && !hasInteractiveTitle) {\n          <h1 class=\"kirby-text-normal-bold\">\n            <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n          </h1>\n        }\n        @if (!!titleActionIconTemplate || hasInteractiveTitle) {\n          <span\n            [class.clickable]=\"hasInteractiveTitle\"\n            [class.has-icon]=\"!!titleActionIconTemplate\"\n            (click)=\"onTitleClick($event)\"\n          >\n            <h1 class=\"kirby-text-normal-bold\">\n              <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n            </h1>\n            <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n          </span>\n        }\n      </div>\n    </ion-title>\n    @if (!!headerActionsTemplate) {\n      <ion-buttons class=\"hide\" slot=\"primary\" [class.fade-in]=\"toolbarActionsVisible\">\n        <ng-container\n          *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n        ></ng-container>\n      </ion-buttons>\n    }\n    @if (!!stickyActionsTemplate) {\n      <ion-buttons class=\"legacy-actions\" slot=\"primary\">\n        <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n      </ion-buttons>\n    }\n    @if (!!fixedActionsTemplate) {\n      <ion-buttons class=\"legacy-actions\" slot=\"secondary\">\n        <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n      </ion-buttons>\n    }\n  </ion-toolbar>\n</ion-header>\n\n<ion-content\n  scrollEvents=\"true\"\n  forceOverscroll=\"false\"\n  [class]=\"getMaxWidthClasses()\"\n  [class.has-header]=\"hasHeader\"\n>\n  @if (refresh.observers.length > 0) {\n    <ion-refresher (ionRefresh)=\"delegateRefreshEvent($event)\" slot=\"fixed\">\n      <kirby-spinner></kirby-spinner>\n    </ion-refresher>\n  }\n\n  <!-- Page header -->\n  @if (hasPageTitle && !hasHeader) {\n    <div class=\"page-header-container\">\n      <div\n        class=\"page-header\"\n        [ngClass]=\"{\n          'text-center': titleAlignment === 'center',\n          'text-right': titleAlignment === 'right',\n        }\"\n      >\n        <div #pageTitle class=\"page-title\" [class.has-actions]=\"!!pageActionsTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n          ></ng-container>\n          <ng-container\n            *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n          ></ng-container>\n        </div>\n        @if (hasPageSubtitle) {\n          <div class=\"page-subtitle\">\n            <ng-container\n              *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n            ></ng-container>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Header -->\n  @if (hasHeader) {\n    <div class=\"page-header-container\">\n      <ng-content select=\"kirby-header\"></ng-content>\n    </div>\n  }\n\n  <!--  Sticky content -->\n  @if (stickyContentTemplate) {\n    <div\n      #stickyContentContainer\n      class=\"sticky-content-container\"\n      [class.content-pinned]=\"isStickyContentPinned\"\n    >\n      <div>\n        <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  @if (fixedContentTemplate) {\n    <div slot=\"fixed\" class=\"fixed-content\">\n      <div class=\"content-inner\">\n        <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n      </div>\n    </div>\n  }\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <span [kirbyFitHeading]=\"fitHeadingConfig\" class=\"kirby-text-xlarge\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </span>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header,ion-toolbar{box-sizing:border-box;--background: var(--kirby-color-fill-base)}ion-title h1{font-size:min(var(--kirby-font-size-m),21.6px)}ion-toolbar{--border-width: 0 0 var(--kirby-stroke-xs) !important;--border-color: transparent;--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-color-content-base);--min-height: var(--kirby-spacing-xxxl)}@media(min-width:768px){ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--min-height: var(--kirby-spacing-xxxxxl)}}ion-toolbar::part(background){transition:border-color 50ms linear}ion-toolbar.content-scrolled:not(.content-pinned){--border-color: var(--kirby-color-border-base-silent)}ion-toolbar.content-scrolled:not(.content-pinned)::part(background){transition-duration:var(--kirby-transition-duration-quick)}ion-toolbar.content-pinned::part(background){transition:none}ion-toolbar ion-buttons[slot=start]{margin-right:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=primary],ion-toolbar ion-buttons[slot=secondary]{margin-left:var(--kirby-spacing-xxs)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title{box-sizing:border-box;font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-normal);padding-inline:calc(var(--action-buttons-width, var(--kirby-spacing-xl)var(--kirby-spacing-xxs)) + var(--padding-start))}ion-toolbar ion-title h1{margin-bottom:0}ion-toolbar ion-title.slide-and-fade-in .toolbar-title{scale:1;transform:translateY(0)}ion-toolbar ion-title .toolbar-title,ion-toolbar ion-title .toolbar-title>span.has-icon>h1{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title{display:flex;align-items:center;justify-content:center;min-height:var(--kirby-spacing-xxxl);scale:0;transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:var(--kirby-transition-easing-enter-exit);transform:translateY(10px)}ion-toolbar ion-title .toolbar-title span.clickable{cursor:pointer}ion-toolbar ion-title .toolbar-title span.has-icon{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;max-width:100%}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-back-button{--color: var(--kirby-color-content-raised);--color-hover: var(--kirby-color-content-raised-hover);--color-focused: var(--kirby-color-content-raised-hover);--background: var(--kirby-color-fill-raised);--background-hover: var(--kirby-color-fill-raised-hover);--background-hover-opacity: 1;--background-focused: var(--kirby-color-fill-raised-hover);--background-focused-opacity: 1;--icon-font-size: 24px;height:var(--kirby-spacing-xl);width:var(--kirby-spacing-xl);opacity:1}ion-back-button:active,ion-back-button.ion-activated{--background: var(--kirby-color-fill-raised-active);--color: var(--kirby-color-content-raised-active);--background-hover: var(--kirby-color-fill-raised-active);--color-hover: var(--kirby-color-content-raised-active);--background-focused: var(--kirby-color-fill-raised-active);--color-focused: var(--kirby-color-content-raised-active)}ion-back-button::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border:var(--kirby-stroke-xs) solid var(--kirby-color-border-raised-quiet);border-radius:var(--kirby-border-radius-pill);overflow:hidden}@media(hover:hover){ion-back-button:hover::part(native){border-color:var(--kirby-color-border-raised-quiet-hover)}}ion-back-button:active::part(native),ion-back-button.ion-activated::part(native){border-color:var(--kirby-color-border-raised-quiet-active)}ion-back-button:focus-visible::part(native){transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}.page-header-container{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.page-header{margin-left:var(--kirby-spacing-s);margin-top:var(--kirby-spacing-xxs);margin-bottom:var(--kirby-page-title-margin-bottom, var(--kirby-spacing-xl))}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:var(--kirby-spacing-xxs)}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-top: var(--kirby-spacing-xs);--padding-start: var( --page-content-padding-start, calc(var(--kirby-spacing-s) + var(--ion-safe-area-left)) );--padding-end: var(--page-content-padding-end, var(--kirby-spacing-s));--background: var(--kirby-color-fill-base);--color: var(--kirby-color-content-base)}@media(min-width:768px){ion-content{--padding-start: var(--page-content-padding-start, var(--kirby-spacing-xxl));--padding-end: var(--page-content-padding-end, var(--kirby-spacing-xxl))}}ion-content.has-header{--padding-top: 0}ion-content.max-width-lg{--page-content-max-width: var(--kirby-page-content-max-width-lg)}ion-content.max-width-xl{--page-content-max-width: var(--kirby-page-content-max-width-xl)}ion-content.max-width-full{--page-content-max-width: var(--kirby-page-content-max-width-full)}ion-content::part(scroll){scrollbar-gutter:stable}ion-content .content-inner{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-spacing-xl);transform:translateZ(0);will-change:transform}ion-content .fixed-content{width:100%;position:absolute;bottom:0;transform:initial}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:calc(-1 * var(--kirby-spacing-xs) - 1px);left:0;right:0;padding-top:1px;margin-block-end:var(--kirby-spacing-m);z-index:var(--kirby-z-index-sticky-content)}.sticky-content-container div{max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto}.sticky-content-container:before{content:\"\";position:absolute;inset:0 calc(-1 * var(--padding-end)) 0 calc(-1 * var(--padding-start));background-color:var(--background);border-bottom:var(--kirby-stroke-xs) solid transparent;box-sizing:border-box}.sticky-content-container.content-pinned:before{border-bottom-color:var(--kirby-color-border-base-silent)}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i0.Injector },
+		{ type: i0.Renderer2 },
+		{ type: i2.Router },
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.NgZone },
+		{ type: i1.ModalNavigationService },
+		{ type: i3.ResizeObserverService },
+		{
+			type: i4.TabsComponent,
+			decorators: [{ type: Optional }, { type: SkipSelf }]
+		},
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: [PAGE_BACK_BUTTON_OVERRIDE]
+			}]
+		},
+		{
+			type: i5.IonRouterOutlet,
+			decorators: [{ type: Optional }]
+		},
+		{
+			type: i5.NavController,
+			decorators: [{ type: Optional }]
+		},
+		{ type: i6.IonicElementPartHelper },
+		{ type: i3.TranslationService },
+		{ type: i7.Title }
+	],
+	propDecorators: {
+		title: [{ type: Input }],
+		subtitle: [{ type: Input }],
+		toolbarTitle: [{ type: Input }],
+		titleAlignment: [{ type: Input }],
+		defaultBackHref: [{ type: Input }],
+		hideBackButton: [{ type: Input }],
+		titleMaxLines: [{ type: Input }],
+		hasInteractiveTitle: [{ type: Input }],
+		maxWidth: [{ type: Input }],
+		tabBarBottomHidden: [{ type: Input }],
+		enter: [{ type: Output }],
+		leave: [{ type: Output }],
+		refresh: [{ type: Output }],
+		backButtonClick: [{ type: Output }],
+		toolbarTitleClick: [{ type: Output }],
+		content: [{
+			type: ViewChild,
+			args: [IonContent, { static: true }]
+		}],
+		ionContentElement: [{
+			type: ViewChild,
+			args: [IonContent, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionHeaderElement: [{
+			type: ViewChild,
+			args: [IonHeader, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionFooterElement: [{
+			type: ViewChild,
+			args: [IonFooter, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionToolbarElement: [{
+			type: ViewChild,
+			args: [IonToolbar, {
+				static: true,
+				read: ElementRef
+			}]
+		}],
+		ionToolbarButtonsElement: [{
+			type: ViewChildren,
+			args: [IonButtons, { read: ElementRef }]
+		}],
+		backButton: [{
+			type: ViewChild,
+			args: [IonBackButton, { static: false }]
+		}],
+		pageTitle: [{
+			type: ViewChild,
+			args: ["pageTitle", {
+				static: false,
+				read: ElementRef
+			}]
+		}],
+		stickyContentContainer: [{
+			type: ViewChild,
+			args: ["stickyContentContainer", {
+				static: false,
+				read: ElementRef
+			}]
+		}],
+		simpleTitleTemplate: [{
+			type: ViewChild,
+			args: ["simpleTitleTemplate", {
+				static: true,
+				read: TemplateRef
+			}]
+		}],
+		simpleToolbarTitleTemplate: [{
+			type: ViewChild,
+			args: ["simpleToolbarTitleTemplate", {
+				static: true,
+				read: TemplateRef
+			}]
+		}],
+		customToolbarTitleTemplate: [{
+			type: ContentChild,
+			args: [PageToolbarTitleDirective, {
+				static: false,
+				read: TemplateRef
+			}]
+		}],
+		customTitleTemplate: [{
+			type: ContentChild,
+			args: [PageTitleDirective, {
+				static: false,
+				read: TemplateRef
+			}]
+		}],
+		customSubtitleTemplate: [{
+			type: ContentChild,
+			args: [PageSubtitleDirective, {
+				static: false,
+				read: TemplateRef
+			}]
+		}],
+		customActions: [{
+			type: ContentChildren,
+			args: [PageActionsDirective]
+		}],
+		customContent: [{
+			type: ContentChildren,
+			args: [PageContentDirective]
+		}],
+		stickyContentRef: [{
+			type: ContentChild,
+			args: [PageStickyContentDirective, {
+				static: false,
+				read: TemplateRef
+			}]
+		}],
+		header: [{
+			type: ContentChild,
+			args: [HeaderComponent]
+		}],
+		_onKeyboardWillShow: [{
+			type: HostListener,
+			args: ["window:keyboardWillShow", ["$event"]]
+		}],
+		_onKeyboardWillHide: [{
+			type: HostListener,
+			args: ["window:keyboardWillHide"]
+		}],
+		_onSelectedTabClick: [{
+			type: HostListener,
+			args: [`window:${selectedTabClickEvent}`]
+		}]
+	}
+});
+var PageFooterComponent = class PageFooterComponent {
+	constructor(pageComponent, hostElement, renderer) {
+		this.pageComponent = pageComponent;
+		this.hostElement = hostElement;
+		this.renderer = renderer;
+		this.hasPadding = true;
+		if (!pageComponent) throw new Error("Page footer must reside inside of a Kirby page");
+	}
+	close() {
+		this.pageComponent.tabBarBottomHidden = false;
+		this.renderer.removeChild(this.hostElement.nativeElement.parentElement, this.hostElement.nativeElement, true);
+	}
+	ngOnDestroy() {
+		this.pageComponent.tabBarBottomHidden = false;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageFooterComponent,
+			deps: [
+				{
+					token: PageComponent,
+					optional: true,
+					skipSelf: true
+				},
+				{ token: i0.ElementRef },
+				{ token: i0.Renderer2 }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: PageFooterComponent,
+			isStandalone: true,
+			selector: "kirby-page-footer",
+			inputs: { hasPadding: "hasPadding" },
+			host: { classAttribute: "kirby-surface-raised" },
+			ngImport: i0,
+			template: "<div class=\"wrapper\" [class.padding]=\"hasPadding\">\n  <ng-content></ng-content>\n</div>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{display:block;background-color:var(--kirby-color-fill-base);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:var(--kirby-spacing-xxs) var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xxs) + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageFooterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-page-footer",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "kirby-surface-raised" },
+			template: "<div class=\"wrapper\" [class.padding]=\"hasPadding\">\n  <ng-content></ng-content>\n</div>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{display:block;background-color:var(--kirby-color-fill-base);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}:host .wrapper{position:relative;max-width:var(--page-content-max-width, var(--kirby-page-content-max-width-default));margin:0 auto;padding-bottom:var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom))}:host .wrapper.padding{padding:var(--kirby-spacing-xxs) var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xxs) + var(--kirby-page-footer-safe-area-bottom, var(--kirby-safe-area-bottom)))}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{
+			type: PageComponent,
+			decorators: [{ type: Optional }, { type: SkipSelf }]
+		},
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 }
+	],
+	propDecorators: { hasPadding: [{ type: Input }] }
+});
+var PageModule = class PageModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageModule,
+			imports: [
+				CommonModule,
+				FitHeadingDirective,
+				SpinnerModule,
+				HeaderModule,
+				IonHeader,
+				IonToolbar,
+				IonButtons,
+				IonBackButton,
+				IonContent,
+				IonTitle,
+				IonRefresher,
+				IonFooter,
+				PageComponent,
+				PageActionsComponent,
+				PageActionsDirective,
+				PageContentComponent,
+				PageFooterComponent,
+				PageContentDirective,
+				PageProgressComponent,
+				PageTitleComponent,
+				PageTitleDirective,
+				PageSubtitleDirective,
+				PageToolbarTitleDirective,
+				PageStickyContentDirective
+			],
+			exports: [
+				PageComponent,
+				PageActionsComponent,
+				PageActionsDirective,
+				PageContentComponent,
+				PageFooterComponent,
+				PageContentDirective,
+				PageProgressComponent,
+				PageTitleComponent,
+				PageTitleDirective,
+				PageSubtitleDirective,
+				PageToolbarTitleDirective,
+				FitHeadingDirective,
+				PageStickyContentDirective
+			]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: PageModule,
+			imports: [
+				CommonModule,
+				SpinnerModule,
+				HeaderModule,
+				IonHeader,
+				IonToolbar,
+				IonButtons,
+				IonBackButton,
+				IonContent,
+				IonTitle,
+				IonRefresher,
+				IonFooter,
+				PageComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: PageModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				FitHeadingDirective,
+				SpinnerModule,
+				HeaderModule,
+				IonHeader,
+				IonToolbar,
+				IonButtons,
+				IonBackButton,
+				IonContent,
+				IonTitle,
+				IonRefresher,
+				IonFooter,
+				PageComponent,
+				PageActionsComponent,
+				PageActionsDirective,
+				PageContentComponent,
+				PageFooterComponent,
+				PageContentDirective,
+				PageProgressComponent,
+				PageTitleComponent,
+				PageTitleDirective,
+				PageSubtitleDirective,
+				PageToolbarTitleDirective,
+				PageStickyContentDirective
+			],
+			exports: [
+				PageComponent,
+				PageActionsComponent,
+				PageActionsDirective,
+				PageContentComponent,
+				PageFooterComponent,
+				PageContentDirective,
+				PageProgressComponent,
+				PageTitleComponent,
+				PageTitleDirective,
+				PageSubtitleDirective,
+				PageToolbarTitleDirective,
+				FitHeadingDirective,
+				PageStickyContentDirective
+			]
+		}]
+	}]
+});
 export { PAGE_BACK_BUTTON_OVERRIDE, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageStickyContentDirective, PageSubtitleDirective, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective };
-//# sourceMappingURL=kirbydesign-designsystem-page.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-page.mjs.map