@kirbydesign/designsystem 9.7.1 → 9.7.2-sb

package/esm2022/modal/v2/modal/modal.component.mjs

@@ -45,10 +45,10 @@ export class ModalV2Component {
     scrollToBottom(scrollDuration) {
         this.ionContent.scrollToBottom(scrollDuration || 0);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalV2Component, selector: "kirby-modal-v2", inputs: { flavor: "flavor", open: "open", canDismiss: "canDismiss", title: "title", hasCollapsibleTitle: "hasCollapsibleTitle", scrollDisabled: "scrollDisabled", breakpoints: "breakpoints", initialBreakpoint: "initialBreakpoint", size: "size", height: "height" }, outputs: { willPresent: "willPresent", didPresent: "didPresent", didDismiss: "didDismiss", willDismiss: "willDismiss" }, viewQueries: [{ propertyName: "modal", first: true, predicate: IonModal, descendants: true }, { propertyName: "modalElement", first: true, predicate: IonModal, descendants: true, read: ElementRef, static: true }, { propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], ngImport: i0, template: "<ion-modal\n  class=\"kirby-modal-v2\"\n  [isOpen]=\"open\"\n  [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n  [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n  [handle]=\"false\"\n  [canDismiss]=\"canDismiss\"\n  [ngClass]=\"size\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    <ion-header class=\"modal-header\">\n      <ion-toolbar>\n        <ng-content select=\"[header-start]\"></ng-content>\n        <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n          <ng-container\n            *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n          ></ng-container>\n        </ion-buttons>\n        <ion-title>{{ title }}</ion-title>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n          <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n        </ion-buttons>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n          <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n      <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n        <ion-toolbar>\n          <span class=\"kirby-text-large\">{{ title }}</span>\n        </ion-toolbar>\n      </ion-header>\n      <ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n    </ion-content>\n    <ng-content select=\"[footer]\"></ng-content>\n  </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonModal, selector: "ion-modal" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ModalV2Component, selector: "kirby-modal-v2", inputs: { flavor: "flavor", open: "open", canDismiss: "canDismiss", title: "title", hasCollapsibleTitle: "hasCollapsibleTitle", scrollDisabled: "scrollDisabled", breakpoints: "breakpoints", initialBreakpoint: "initialBreakpoint", size: "size", height: "height" }, outputs: { willPresent: "willPresent", didPresent: "didPresent", didDismiss: "didDismiss", willDismiss: "willDismiss" }, viewQueries: [{ propertyName: "modal", first: true, predicate: IonModal, descendants: true }, { propertyName: "modalElement", first: true, predicate: IonModal, descendants: true, read: ElementRef, static: true }, { propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], ngImport: i0, template: "<ion-modal\n  class=\"kirby-modal-v2\"\n  [isOpen]=\"open\"\n  [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n  [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n  [handle]=\"false\"\n  [canDismiss]=\"canDismiss\"\n  [ngClass]=\"size\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    <ion-header class=\"modal-header\">\n      <ion-toolbar>\n        <ng-content select=\"[header-start]\"></ng-content>\n        <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n          <ng-container\n            *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n          ></ng-container>\n        </ion-buttons>\n        <ion-title>{{ title }}</ion-title>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n          <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n        </ion-buttons>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n          <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n      <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n        <ion-toolbar>\n          <span class=\"kirby-text-large\">{{ title }}</span>\n        </ion-toolbar>\n      </ion-header>\n      <ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n    </ion-content>\n    <ng-content select=\"[footer]\"></ng-content>\n  </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i4.IonModal, selector: "ion-modal" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2Component, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-modal-v2', template: "<ion-modal\n  class=\"kirby-modal-v2\"\n  [isOpen]=\"open\"\n  [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n  [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n  [handle]=\"false\"\n  [canDismiss]=\"canDismiss\"\n  [ngClass]=\"size\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    <ion-header class=\"modal-header\">\n      <ion-toolbar>\n        <ng-content select=\"[header-start]\"></ng-content>\n        <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n          <ng-container\n            *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n          ></ng-container>\n        </ion-buttons>\n        <ion-title>{{ title }}</ion-title>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n          <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n        </ion-buttons>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n          <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n      <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n        <ion-toolbar>\n          <span class=\"kirby-text-large\">{{ title }}</span>\n        </ion-toolbar>\n      </ion-header>\n      <ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n    </ion-content>\n    <ng-content select=\"[footer]\"></ng-content>\n  </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
         }], propDecorators: { modal: [{

package/esm2022/modal/v2/modal-routing/modal-routing.component.mjs

@@ -19,10 +19,10 @@ export class ModalV2RoutingComponent {
     ngOnDestroy() {
         this.modal.dismiss(null, 'cancel');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2RoutingComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalV2RoutingComponent, selector: "kirby-modal-v2-routing-wrapper", viewQueries: [{ propertyName: "modal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (willDismiss)=\"closeModal()\" class=\"kirby-modal-v2\">\n  <ng-template>\n    <div fxFlex class=\"outlet-container\">\n      <router-outlet></router-outlet>\n    </div>\n  </ng-template>\n</ion-modal>\n", styles: [".outlet-container{height:100%}\n"], dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2RoutingComponent, deps: [{ token: i1.Router }, { token: i1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ModalV2RoutingComponent, selector: "kirby-modal-v2-routing-wrapper", viewQueries: [{ propertyName: "modal", first: true, predicate: IonModal, descendants: true }], ngImport: i0, template: "<ion-modal [isOpen]=\"isOpen\" (willDismiss)=\"closeModal()\" class=\"kirby-modal-v2\">\n  <ng-template>\n    <div fxFlex class=\"outlet-container\">\n      <router-outlet></router-outlet>\n    </div>\n  </ng-template>\n</ion-modal>\n", styles: [".outlet-container{height:100%}\n"], dependencies: [{ kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2RoutingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2RoutingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-modal-v2-routing-wrapper', template: "<ion-modal [isOpen]=\"isOpen\" (willDismiss)=\"closeModal()\" class=\"kirby-modal-v2\">\n  <ng-template>\n    <div fxFlex class=\"outlet-container\">\n      <router-outlet></router-outlet>\n    </div>\n  </ng-template>\n</ion-modal>\n", styles: [".outlet-container{height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i1.Router }, { type: i1.ActivatedRoute }], propDecorators: { modal: [{

package/esm2022/modal/v2/services/modal.controller.mjs

@@ -42,10 +42,10 @@ export class ModalV2Controller {
     closeModal(data, role) {
         this.ionicModalController.dismiss(data, role);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2Controller, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2Controller }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2Controller, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2Controller }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2Controller, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2Controller, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29udHJvbGxlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL21vZGFsL3YyL3NyYy9zZXJ2aWNlcy9tb2RhbC5jb250cm9sbGVyLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQzVELE9BQU8sRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFjLFNBQVMsRUFBRSxJQUFJLEVBQUUsR0FBRyxFQUFFLE1BQU0sTUFBTSxDQUFDOzs7QUF5Qm5FLE1BQU0sT0FBTyxpQkFBaUI7SUFHNUIsWUFBb0Isb0JBQXFDO1FBQXJDLHlCQUFvQixHQUFwQixvQkFBb0IsQ0FBaUI7UUFGakQsbUJBQWMsR0FBRyxLQUFLLENBQUM7SUFFNkIsQ0FBQztJQUV0RCxTQUFTLENBQUMsTUFBcUI7UUFDcEMsSUFBSSxJQUFJLENBQUMsY0FBYztZQUFFLE9BQU87UUFFaEMsSUFBSSxnQkFBZ0IsR0FBYSxFQUFFLENBQUM7UUFDcEMsSUFBSSxNQUFNLENBQUMsUUFBUSxFQUFFO1lBQ25CLGdCQUFnQixHQUFHLEtBQUssQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUN6RjtRQUVELE1BQU0sTUFBTSxHQUFHLElBQUksQ0FDakIsSUFBSSxDQUFDLG9CQUFvQixDQUFDLE1BQU0sQ0FBQztZQUMvQixTQUFTLEVBQUUsTUFBTSxDQUFDLFNBQVM7WUFDM0IsY0FBYyxFQUFFLE1BQU0sQ0FBQyxjQUFjO1lBQ3JDLFVBQVUsRUFBRSxNQUFNLENBQUMsVUFBVTtZQUM3QixlQUFlLEVBQUUsTUFBTSxDQUFDLGVBQWU7WUFDdkMsWUFBWSxFQUFFLE1BQU0sQ0FBQyxZQUFZO1lBQ2pDLFdBQVcsRUFBRSxNQUFNLENBQUMsTUFBTSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsU0FBUztZQUN4RSxpQkFBaUIsRUFBRSxNQUFNLENBQUMsTUFBTSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxTQUFTO1lBQ3BGLE1BQU0sRUFBRSxLQUFLO1lBQ2IsUUFBUSxFQUFFLENBQUMsZ0JBQWdCLEVBQUUsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLEdBQUcsZ0JBQWdCLENBQUM7U0FDcEYsQ0FBQyxDQUNILENBQUM7UUFFRixJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQztRQUUzQixNQUFNLGNBQWMsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUNoQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTtZQUNaLElBQUksTUFBTSxDQUFDLE1BQU0sRUFBRTtnQkFDakIsS0FBSyxDQUFDLEtBQUssQ0FBQyxXQUFXLENBQUMsVUFBVSxFQUFFLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQzthQUNwRDtZQUNELE9BQU8sS0FBSyxDQUFDO1FBQ2YsQ0FBQyxDQUFDLEVBQ0YsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sRUFBRSxDQUFDLENBQUMsRUFDckMsU0FBUyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQyxLQUFLLENBQUMsYUFBYSxFQUFFLENBQUMsRUFDM0MsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUNSLENBQUM7UUFFRixJQUFJLENBQUMsY0FBYyxHQUFHLEtBQUssQ0FBQztRQUU1QixPQUFPO1lBQ0wsYUFBYSxFQUFFLGNBQWM7WUFDN0IsWUFBWSxFQUFFLGNBQWM7U0FDN0IsQ0FBQztJQUNKLENBQUM7SUFFTSxVQUFVLENBQUMsSUFBYyxFQUFFLElBQWE7UUFDN0MsSUFBSSxDQUFDLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDaEQsQ0FBQztrSUFuRFUsaUJBQWlCO3NJQUFqQixpQkFBaUI7OzRGQUFqQixpQkFBaUI7a0JBRDdCLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNb2RhbENvbnRyb2xsZXIgfSBmcm9tICdAaW9uaWMvYW5ndWxhci9zdGFuZGFsb25lJztcbmltcG9ydCB7IGZyb20sIG1hcCwgT2JzZXJ2YWJsZSwgc3dpdGNoTWFwLCB0YWtlLCB0YXAgfSBmcm9tICdyeGpzJztcbmltcG9ydCB0eXBlIHsgT3ZlcmxheUV2ZW50RGV0YWlsIH0gZnJvbSAnQGlvbmljL2NvcmUvY29tcG9uZW50cyc7XG5cbmV4cG9ydCB0eXBlIE1vZGFsRmxhdm9yID0gJ21vZGFsJyB8ICdkcmF3ZXInO1xudHlwZSBTaXplVGVtcCA9ICdtZCc7XG5cbmV4cG9ydCB0eXBlIE1vZGFsVjJDb25maWcgPSB7XG4gIGZsYXZvcj86IE1vZGFsRmxhdm9yO1xuICBjb21wb25lbnQ6IGFueTtcbiAgY29tcG9uZW50UHJvcHM/OiB7IFtrZXk6IHN0cmluZ106IGFueSB9O1xuICBjc3NDbGFzcz86IHN0cmluZyB8IHN0cmluZ1tdO1xuICBjYW5EaXNtaXNzPzogYm9vbGVhbiB8ICgoKSA9PiBQcm9taXNlPGJvb2xlYW4+KTtcbiAgYmFja2Ryb3BEaXNtaXNzPzogYm9vbGVhbjtcbiAgc2hvd0JhY2tkcm9wPzogYm9vbGVhbjtcbiAgYnJlYWtwb2ludHM/OiBudW1iZXJbXTtcbiAgaW5pdGlhbEJyZWFrcG9pbnQ/OiBudW1iZXI7XG4gIHNpemU/OiBTaXplVGVtcDtcbiAgaGVpZ2h0Pzogc3RyaW5nO1xufTtcblxudHlwZSBNb2RhbERpc21pc3NPYnNlcnZhYmxlcyA9IHtcbiAgb25XaWxsRGlzbWlzczogT2JzZXJ2YWJsZTxPdmVybGF5RXZlbnREZXRhaWw+O1xuICBvbkRpZERpc21pc3M6IE9ic2VydmFibGU8T3ZlcmxheUV2ZW50RGV0YWlsPjtcbn07XG5ASW5qZWN0YWJsZSgpXG5leHBvcnQgY2xhc3MgTW9kYWxWMkNvbnRyb2xsZXIge1xuICBwcml2YXRlIGlzTW9kYWxPcGVuaW5nID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBpb25pY01vZGFsQ29udHJvbGxlcjogTW9kYWxDb250cm9sbGVyKSB7fVxuXG4gIHB1YmxpYyBzaG93TW9kYWwoY29uZmlnOiBNb2RhbFYyQ29uZmlnKTogTW9kYWxEaXNtaXNzT2JzZXJ2YWJsZXMge1xuICAgIGlmICh0aGlzLmlzTW9kYWxPcGVuaW5nKSByZXR1cm47XG5cbiAgICBsZXQgY3VzdG9tQ3NzQ2xhc3Nlczogc3RyaW5nW10gPSBbXTtcbiAgICBpZiAoY29uZmlnLmNzc0NsYXNzKSB7XG4gICAgICBjdXN0b21Dc3NDbGFzc2VzID0gQXJyYXkuaXNBcnJheShjb25maWcuY3NzQ2xhc3MpID8gY29uZmlnLmNzc0NsYXNzIDogW2NvbmZpZy5jc3NDbGFzc107XG4gICAgfVxuXG4gICAgY29uc3QgbW9kYWwkID0gZnJvbShcbiAgICAgIHRoaXMuaW9uaWNNb2RhbENvbnRyb2xsZXIuY3JlYXRlKHtcbiAgICAgICAgY29tcG9uZW50OiBjb25maWcuY29tcG9uZW50LFxuICAgICAgICBjb21wb25lbnRQcm9wczogY29uZmlnLmNvbXBvbmVudFByb3BzLFxuICAgICAgICBjYW5EaXNtaXNzOiBjb25maWcuY2FuRGlzbWlzcyxcbiAgICAgICAgYmFja2Ryb3BEaXNtaXNzOiBjb25maWcuYmFja2Ryb3BEaXNtaXNzLFxuICAgICAgICBzaG93QmFja2Ryb3A6IGNvbmZpZy5zaG93QmFja2Ryb3AsXG4gICAgICAgIGJyZWFrcG9pbnRzOiBjb25maWcuZmxhdm9yID09PSAnZHJhd2VyJyA/IGNvbmZpZy5icmVha3BvaW50cyA6IHVuZGVmaW5lZCxcbiAgICAgICAgaW5pdGlhbEJyZWFrcG9pbnQ6IGNvbmZpZy5mbGF2b3IgPT09ICdkcmF3ZXInID8gY29uZmlnLmluaXRpYWxCcmVha3BvaW50IDogdW5kZWZpbmVkLFxuICAgICAgICBoYW5kbGU6IGZhbHNlLFxuICAgICAgICBjc3NDbGFzczogWydraXJieS1tb2RhbC12MicsIGNvbmZpZy5zaXplID8gY29uZmlnLnNpemUgOiAnbWQnLCAuLi5jdXN0b21Dc3NDbGFzc2VzXSxcbiAgICAgIH0pXG4gICAgKTtcblxuICAgIHRoaXMuaXNNb2RhbE9wZW5pbmcgPSB0cnVlO1xuXG4gICAgY29uc3Qgb25XaWxsRGlzbWlzcyQgPSBtb2RhbCQucGlwZShcbiAgICAgIG1hcCgobW9kYWwpID0+IHtcbiAgICAgICAgaWYgKGNvbmZpZy5oZWlnaHQpIHtcbiAgICAgICAgICBtb2RhbC5zdHlsZS5zZXRQcm9wZXJ0eSgnLS1oZWlnaHQnLCBjb25maWcuaGVpZ2h0KTtcbiAgICAgICAgfVxuICAgICAgICByZXR1cm4gbW9kYWw7XG4gICAgICB9KSxcbiAgICAgIHRhcCgobW9kYWwpID0+IGZyb20obW9kYWwucHJlc2VudCgpKSksXG4gICAgICBzd2l0Y2hNYXAoKG1vZGFsKSA9PiBtb2RhbC5vbldpbGxEaXNtaXNzKCkpLFxuICAgICAgdGFrZSgxKVxuICAgICk7XG5cbiAgICB0aGlzLmlzTW9kYWxPcGVuaW5nID0gZmFsc2U7XG5cbiAgICByZXR1cm4ge1xuICAgICAgb25XaWxsRGlzbWlzczogb25XaWxsRGlzbWlzcyQsXG4gICAgICBvbkRpZERpc21pc3M6IG9uV2lsbERpc21pc3MkLFxuICAgIH07XG4gIH1cblxuICBwdWJsaWMgY2xvc2VNb2RhbChkYXRhPzogdW5rbm93biwgcm9sZT86IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMuaW9uaWNNb2RhbENvbnRyb2xsZXIuZGlzbWlzcyhkYXRhLCByb2xlKTtcbiAgfVxufVxuIl19

package/esm2022/modal/v2/wrapper/wrapper.component.mjs

@@ -18,10 +18,10 @@ export class ModalV2WrapperComponent {
     close() {
         this.ionModalElement.dismiss();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2WrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ModalV2WrapperComponent, selector: "kirby-modal-v2-wrapper", inputs: { flavor: "flavor", title: "title", hasCollapsibleTitle: "hasCollapsibleTitle", scrollDisabled: "scrollDisabled" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ng-content select=\"[header-start]\"></ng-content>\n    <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n      <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n  <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\">{{ title }}</span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container>\n    <ng-content></ng-content>\n  </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{height:100%;display:flex;flex-direction:column;--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2WrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ModalV2WrapperComponent, selector: "kirby-modal-v2-wrapper", inputs: { flavor: "flavor", title: "title", hasCollapsibleTitle: "hasCollapsibleTitle", scrollDisabled: "scrollDisabled" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ng-content select=\"[header-start]\"></ng-content>\n    <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n      <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n  <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\">{{ title }}</span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container>\n    <ng-content></ng-content>\n  </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{height:100%;display:flex;flex-direction:column;--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: i4.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i4.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i4.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i4.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i4.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalV2WrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ModalV2WrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-modal-v2-wrapper', template: "<ion-header>\n  <ion-toolbar>\n    <ng-content select=\"[header-start]\"></ng-content>\n    <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n      <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n  <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\">{{ title }}</span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container>\n    <ng-content></ng-content>\n  </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{height:100%;display:flex;flex-direction:column;--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { flavor: [{

package/esm2022/page/page-footer/page-footer.component.mjs

@@ -19,10 +19,10 @@ export class PageFooterComponent {
     ngOnDestroy() {
         this.pageComponent.tabBarBottomHidden = false;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageFooterComponent, deps: [{ token: i1.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: "17.3.12", type: PageFooterComponent, 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: ["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-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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageFooterComponent, deps: [{ token: i1.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: "17.3.10", type: PageFooterComponent, 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: ["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-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: "17.3.12", ngImport: i0, type: PageFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", 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: ["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-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: i1.PageComponent, decorators: [{

package/esm2022/page/page.component.mjs

@@ -28,30 +28,30 @@ const PAGE_WIDTH_STANDARD_DEPRECATION_WARNING = 'Deprecation warning: The suppor
 const PAGE_WIDTH_OPTIMIZED_DEPRECATION_WARNING = 'Deprecation warning: The "optimized" maxWidth option is deprecated, please use "lg" instead. The support for "optimized" as a maxWidth option will be removed in Kirby version 10.';
 export const PAGE_BACK_BUTTON_OVERRIDE = new InjectionToken('page-back-button-override');
 export class PageTitleDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PageTitleDirective, selector: "[kirbyPageTitle]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: PageTitleDirective, selector: "[kirbyPageTitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyPageTitle]',
                 }]
         }] });
 export class PageSubtitleDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PageSubtitleDirective, selector: "[kirbyPageSubtitle]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: PageSubtitleDirective, selector: "[kirbyPageSubtitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageSubtitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageSubtitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyPageSubtitle]',
                 }]
         }] });
 export class PageToolbarTitleDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageToolbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PageToolbarTitleDirective, selector: "[kirbyPageToolbarTitle]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageToolbarTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: PageToolbarTitleDirective, selector: "[kirbyPageToolbarTitle]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageToolbarTitleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageToolbarTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyPageToolbarTitle]',
@@ -70,10 +70,10 @@ export class PageActionsDirective {
     get isFixed() {
         return this.config ? this.config.fixed : this.fixedDefault;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageActionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PageActionsDirective, selector: "[kirbyPageActions]", inputs: { config: ["kirbyPageActions", "config"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageActionsDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: PageActionsDirective, selector: "[kirbyPageActions]", inputs: { config: ["kirbyPageActions", "config"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyPageActions]',
@@ -89,10 +89,10 @@ export class PageContentDirective {
     get isFixed() {
         return this.config && this.config.fixed;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PageContentDirective, selector: "[kirbyPageContent]", inputs: { config: ["kirbyPageContent", "config"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageContentDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: PageContentDirective, selector: "[kirbyPageContent]", inputs: { config: ["kirbyPageContent", "config"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyPageContent]',
@@ -102,10 +102,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['kirbyPageContent']
             }] } });
 export class PageStickyContentDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageStickyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: PageStickyContentDirective, selector: "[kirbyPageStickyContent]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageStickyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: PageStickyContentDirective, selector: "[kirbyPageStickyContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageStickyContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageStickyContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyPageStickyContent]',
@@ -118,12 +118,12 @@ export class PageProgressComponent extends ModalElementComponent {
         // 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: "17.3.12", 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: "17.3.12", type: PageProgressComponent, selector: "kirby-page-progress", host: { properties: { "attr.slot": "this.slot" } }, usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", 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: "17.3.10", type: PageProgressComponent, selector: "kirby-page-progress", host: { properties: { "attr.slot": "this.slot" } }, usesInheritance: true, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true, styles: [":host{display:flex;margin-inline-end:4px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-page-progress', template: `
     <ng-content></ng-content>
@@ -138,12 +138,12 @@ export class PageTitleComponent extends ModalElementComponent {
     constructor(elementRef, modalElementsAdvertiser) {
         super(ModalElementType.TITLE, elementRef, modalElementsAdvertiser);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", type: PageTitleComponent, selector: "kirby-page-title", usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", 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: "17.3.10", type: PageTitleComponent, selector: "kirby-page-title", usesInheritance: true, ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kirby-page-title',
@@ -155,12 +155,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     type: Optional
                 }] }] });
 export class PageContentComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageContentComponent, selector: "kirby-page-content", ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: PageContentComponent, selector: "kirby-page-content", ngImport: i0, template: `
     <ng-content></ng-content>
   `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kirby-page-content',
@@ -170,12 +170,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 export class PageActionsComponent {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageActionsComponent, selector: "kirby-page-actions", ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: PageActionsComponent, 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: "17.3.12", ngImport: i0, type: PageActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-page-actions', template: `
     <ng-content select="button[kirby-button]"></ng-content>
@@ -627,12 +627,12 @@ export class PageComponent {
             this.content.scrollToTop(KirbyAnimation.Duration.LONG);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", 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 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageComponent, 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>\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      ></ion-back-button>\n    </ion-buttons>\n    <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n      <div class=\"toolbar-title\">\n        <ng-container *ngIf=\"!titleActionIconTemplate && !hasInteractiveTitle\">\n          <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n        </ng-container>\n        <span\n          *ngIf=\"!!titleActionIconTemplate || hasInteractiveTitle\"\n          [class.clickable]=\"hasInteractiveTitle\"\n          [class.has-icon]=\"!!titleActionIconTemplate\"\n          (click)=\"onTitleClick($event)\"\n        >\n          <span>\n            <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n          </span>\n          <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n        </span>\n      </div>\n    </ion-title>\n    <ion-buttons\n      *ngIf=\"!!headerActionsTemplate\"\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarActionsVisible\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n      ></ng-container>\n    </ion-buttons>\n    <ion-buttons *ngIf=\"!!stickyActionsTemplate\" class=\"legacy-actions\" slot=\"primary\">\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons *ngIf=\"!!fixedActionsTemplate\" class=\"legacy-actions\" slot=\"secondary\">\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\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  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <!-- Page header -->\n  <div class=\"page-header-container\" *ngIf=\"hasPageTitle && !hasHeader\">\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      <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n        <ng-container\n          *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"page-header-container\" *ngIf=\"hasHeader\">\n    <ng-content select=\"kirby-header\"></ng-content>\n  </div>\n\n  <!--  Sticky content -->\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}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{visibility:hidden;opacity:0;transform:translateY(10px);transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title.slide-and-fade-in{visibility:visible;opacity: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{font-weight:700}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-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;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::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}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, 16px);--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-optimized,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}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: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }, { kind: "component", type: i8.SpinnerComponent, selector: "kirby-spinner" }, { kind: "component", type: i5.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i5.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i5.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i5.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i5.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i5.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i5.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i5.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", 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 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: PageComponent, 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>\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      ></ion-back-button>\n    </ion-buttons>\n    <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n      <div class=\"toolbar-title\">\n        <ng-container *ngIf=\"!titleActionIconTemplate && !hasInteractiveTitle\">\n          <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n        </ng-container>\n        <span\n          *ngIf=\"!!titleActionIconTemplate || hasInteractiveTitle\"\n          [class.clickable]=\"hasInteractiveTitle\"\n          [class.has-icon]=\"!!titleActionIconTemplate\"\n          (click)=\"onTitleClick($event)\"\n        >\n          <span>\n            <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n          </span>\n          <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n        </span>\n      </div>\n    </ion-title>\n    <ion-buttons\n      *ngIf=\"!!headerActionsTemplate\"\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarActionsVisible\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n      ></ng-container>\n    </ion-buttons>\n    <ion-buttons *ngIf=\"!!stickyActionsTemplate\" class=\"legacy-actions\" slot=\"primary\">\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons *ngIf=\"!!fixedActionsTemplate\" class=\"legacy-actions\" slot=\"secondary\">\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\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  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <!-- Page header -->\n  <div class=\"page-header-container\" *ngIf=\"hasPageTitle && !hasHeader\">\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      <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n        <ng-container\n          *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"page-header-container\" *ngIf=\"hasHeader\">\n    <ng-content select=\"kirby-header\"></ng-content>\n  </div>\n\n  <!--  Sticky content -->\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}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: #f3f3f3}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{visibility:hidden;opacity:0;transform:translateY(10px);transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title.slide-and-fade-in{visibility:visible;opacity: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{font-weight:700}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-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;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::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}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, 16px);--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-optimized,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}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: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }, { kind: "component", type: i8.SpinnerComponent, selector: "kirby-spinner" }, { kind: "component", type: i5.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i5.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i5.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i5.IonBackButton, selector: "ion-back-button" }, { kind: "component", type: i5.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i5.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i5.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i5.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], template: "<ion-header>\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      ></ion-back-button>\n    </ion-buttons>\n    <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n      <div class=\"toolbar-title\">\n        <ng-container *ngIf=\"!titleActionIconTemplate && !hasInteractiveTitle\">\n          <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n        </ng-container>\n        <span\n          *ngIf=\"!!titleActionIconTemplate || hasInteractiveTitle\"\n          [class.clickable]=\"hasInteractiveTitle\"\n          [class.has-icon]=\"!!titleActionIconTemplate\"\n          (click)=\"onTitleClick($event)\"\n        >\n          <span>\n            <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n          </span>\n          <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n        </span>\n      </div>\n    </ion-title>\n    <ion-buttons\n      *ngIf=\"!!headerActionsTemplate\"\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarActionsVisible\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n      ></ng-container>\n    </ion-buttons>\n    <ion-buttons *ngIf=\"!!stickyActionsTemplate\" class=\"legacy-actions\" slot=\"primary\">\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons *ngIf=\"!!fixedActionsTemplate\" class=\"legacy-actions\" slot=\"secondary\">\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\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  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <!-- Page header -->\n  <div class=\"page-header-container\" *ngIf=\"hasPageTitle && !hasHeader\">\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      <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n        <ng-container\n          *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"page-header-container\" *ngIf=\"hasHeader\">\n    <ng-content select=\"kirby-header\"></ng-content>\n  </div>\n\n  <!--  Sticky content -->\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}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{visibility:hidden;opacity:0;transform:translateY(10px);transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title.slide-and-fade-in{visibility:visible;opacity: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{font-weight:700}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-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;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::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}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, 16px);--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-optimized,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}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"] }]
+            args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, providers: [IonicElementPartHelper], template: "<ion-header>\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      ></ion-back-button>\n    </ion-buttons>\n    <ion-title [class.slide-and-fade-in]=\"toolbarTitleVisible\">\n      <div class=\"toolbar-title\">\n        <ng-container *ngIf=\"!titleActionIconTemplate && !hasInteractiveTitle\">\n          <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n        </ng-container>\n        <span\n          *ngIf=\"!!titleActionIconTemplate || hasInteractiveTitle\"\n          [class.clickable]=\"hasInteractiveTitle\"\n          [class.has-icon]=\"!!titleActionIconTemplate\"\n          (click)=\"onTitleClick($event)\"\n        >\n          <span>\n            <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n          </span>\n          <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n        </span>\n      </div>\n    </ion-title>\n    <ion-buttons\n      *ngIf=\"!!headerActionsTemplate\"\n      class=\"hide\"\n      slot=\"primary\"\n      [class.fade-in]=\"toolbarActionsVisible\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"headerActionsTemplate; injector: toolbarActionGroupInjector\"\n      ></ng-container>\n    </ion-buttons>\n    <ion-buttons *ngIf=\"!!stickyActionsTemplate\" class=\"legacy-actions\" slot=\"primary\">\n      <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n    </ion-buttons>\n    <ion-buttons *ngIf=\"!!fixedActionsTemplate\" class=\"legacy-actions\" slot=\"secondary\">\n      <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n    </ion-buttons>\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  <ion-refresher\n    *ngIf=\"refresh.observers.length > 0\"\n    (ionRefresh)=\"delegateRefreshEvent($event)\"\n    slot=\"fixed\"\n  >\n    <kirby-spinner></kirby-spinner>\n  </ion-refresher>\n\n  <!-- Page header -->\n  <div class=\"page-header-container\" *ngIf=\"hasPageTitle && !hasHeader\">\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      <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n        <ng-container\n          *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n        ></ng-container>\n      </div>\n    </div>\n  </div>\n\n  <!-- Header -->\n  <div class=\"page-header-container\" *ngIf=\"hasHeader\">\n    <ng-content select=\"kirby-header\"></ng-content>\n  </div>\n\n  <!--  Sticky content -->\n  <ng-container *ngIf=\"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  </ng-container>\n\n  <!-- Content -->\n  <div class=\"content-inner\">\n    <ng-container\n      *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n    ></ng-container>\n  </div>\n\n  <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n    <div class=\"content-inner\">\n      <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n    </div>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n  <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n    <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n  </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n  <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n  <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n  <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}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: #f3f3f3}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{visibility:hidden;opacity:0;transform:translateY(10px);transition-property:opacity,transform;transition-duration:.15s;transition-timing-function:ease;padding-inline:calc(var(--action-buttons-width, 48px) + var(--padding-start))}ion-toolbar ion-title.slide-and-fade-in{visibility:visible;opacity: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{font-weight:700}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-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--background: var(--kirby-white);--icon-font-size: 24px;height:40px;width:40px;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::part(icon){margin-inline:0}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}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, 16px);--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-optimized,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}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
                 }, {

package/esm2022/page/page.module.mjs

@@ -8,8 +8,8 @@ import { PageFooterComponent } from './page-footer/page-footer.component';
 import { PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageProgressComponent, PageStickyContentDirective, PageSubtitleDirective, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, } from './page.component';
 import * as i0 from "@angular/core";
 export class PageModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PageModule, declarations: [PageComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: PageModule, declarations: [PageComponent,
             PageActionsComponent,
             PageActionsDirective,
             PageContentComponent,
@@ -44,7 +44,7 @@ export class PageModule {
             PageToolbarTitleDirective,
             FitHeadingDirective,
             PageStickyContentDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageModule, imports: [CommonModule,
             SpinnerModule,
             HeaderModule,
             IonHeader,
@@ -56,7 +56,7 @@ export class PageModule {
             IonRefresher,
             IonFooter] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PageModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [

package/esm2022/popover/popover.component.mjs

@@ -133,12 +133,12 @@ export class PopoverComponent {
             this.renderer.setStyle(this.targetElement, 'pointer-events', 'none');
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PopoverComponent, isStandalone: true, selector: "kirby-popover", inputs: { popout: "popout", target: "target" }, outputs: { willHide: "willHide" }, host: { listeners: { "window:resize": "_onWindowResize()" } }, viewQueries: [{ propertyName: "wrapperElement", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: PopoverComponent, isStandalone: true, selector: "kirby-popover", inputs: { popout: "popout", target: "target" }, outputs: { willHide: "willHide" }, host: { listeners: { "window:resize": "_onWindowResize()" } }, viewQueries: [{ propertyName: "wrapperElement", first: true, predicate: ["wrapper"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: `
     <div #wrapper class="wrapper"><ng-content></ng-content></div>
   `, isInline: true, styles: [":host{display:none;position:fixed;inset:0;z-index:850}:host(.is-opening){display:block;visibility:hidden}:host(.is-open){display:block}.wrapper{position:fixed;margin-top:4px;margin-bottom:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PopoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-popover', template: `
     <div #wrapper class="wrapper"><ng-content></ng-content></div>

package/esm2022/progress-circle/progress-circle-ring.component.mjs

@@ -33,10 +33,10 @@ export class ProgressCircleRingComponent {
             return 0;
         return this.strokeWidth;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressCircleRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ProgressCircleRingComponent, isStandalone: true, selector: "kirby-progress-circle-ring", inputs: { radius: "radius", value: "value", themeColor: "themeColor", strokeWidth: "strokeWidth", upperBound: "upperBound" }, host: { properties: { "class.view-initialized": "this.viewInitialized", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n", styles: ["svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ProgressCircleRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: ProgressCircleRingComponent, isStandalone: true, selector: "kirby-progress-circle-ring", inputs: { radius: "radius", value: "value", themeColor: "themeColor", strokeWidth: "strokeWidth", upperBound: "upperBound" }, host: { properties: { "class.view-initialized": "this.viewInitialized", "style.width.px": "this._diameter", "style.height.px": "this._diameter" } }, ngImport: i0, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n", styles: ["svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressCircleRingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: ProgressCircleRingComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-progress-circle-ring', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg [attr.width]=\"_diameter\" [attr.height]=\"_diameter\">\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"circle\"\n    fill=\"transparent\"\n    [attr.stroke-width]=\"strokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n  />\n  <circle\n    shape-rendering=\"geometricPrecision\"\n    class=\"progress\"\n    fill=\"transparent\"\n    stroke-linecap=\"round\"\n    [attr.stroke-width]=\"_progressStrokeWidth\"\n    [attr.r]=\"_centerRadius\"\n    [attr.cx]=\"radius\"\n    [attr.cy]=\"radius\"\n    [attr.stroke-dasharray]=\"[_progress, _remainder]\"\n  />\n</svg>\n", styles: ["svg{rotate:-90deg}.circle{stroke:var(--kirby-semi-light)}:host.success{--kirby-progress-circle-stroke-color: var(--kirby-success)}:host.warning{--kirby-progress-circle-stroke-color: var(--kirby-warning)}:host.danger{--kirby-progress-circle-stroke-color: var(--kirby-danger)}:host.view-initialized .progress{transition-property:stroke-dasharray,stroke;transition-duration:1s;transition-timing-function:ease;transform-origin:50% 50%;stroke:var(--kirby-progress-circle-stroke-color, var(--kirby-success))}\n"] }]
         }], propDecorators: { radius: [{