@kirbydesign/designsystem 11.11.0-dev-1d9b4cd → 11.11.0-dev-9d936c8

package/fesm2022/kirbydesign-designsystem-loading-overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-loading-overlay.mjs","sources":["../../loading-overlay/src/loading-overlay.service.ts","../../loading-overlay/src/loading-overlay.component.ts","../../loading-overlay/src/loading-overlay.component.html","../../loading-overlay/src/kirbydesign-designsystem-loading-overlay.ts"],"sourcesContent":["import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';\nimport { LoadingController } from '@ionic/angular';\nimport { SpinnerComponent } from '@kirbydesign/designsystem/spinner';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class LoadingOverlayService {\n  private ionLoading: HTMLIonLoadingElement = null;\n\n  constructor(\n    private loadingController: LoadingController,\n    private componentFactoryResolver: ComponentFactoryResolver,\n    private injector: Injector\n  ) {}\n\n  public async showLoadingOverlay(\n    showBackdrop: boolean = true,\n    hideContent: boolean = false\n  ): Promise<void> {\n    if (!this.ionLoading) {\n      const cssClasses = ['kirby-loading-overlay'];\n\n      if (hideContent) {\n        cssClasses.push('kirby-loading-hide-content');\n      }\n\n      this.ionLoading = await this.loadingController.create({\n        cssClass: cssClasses,\n        duration: 0,\n        message: null,\n        showBackdrop: showBackdrop || hideContent,\n        spinner: null,\n      });\n\n      const loadingWrapper = this.ionLoading.querySelector('.loading-wrapper');\n      const kirbySpinner = document.createElement('kirby-spinner');\n      const factory = this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent);\n      factory.create(this.injector, [], kirbySpinner);\n      loadingWrapper.appendChild(kirbySpinner);\n\n      await this.ionLoading.present();\n    }\n  }\n\n  public async hideLoadingOverlay(): Promise<void> {\n    if (this.ionLoading) {\n      await this.ionLoading.dismiss();\n      this.ionLoading = null;\n    }\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { SpinnerComponent } from '@kirbydesign/designsystem/spinner';\n\n@Component({\n  imports: [SpinnerComponent, CommonModule],\n  selector: 'kirby-loading-overlay',\n  templateUrl: './loading-overlay.component.html',\n  styleUrls: ['./loading-overlay.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LoadingOverlayComponent {\n  @Input() public isLoading = true;\n  @Input() public showBackdrop = true;\n  @Input() public hideContent = false;\n}\n","<div class=\"overlay-wrapper\" [class.loading]=\"isLoading\">\n  @if (isLoading) {\n    <div\n      [ngClass]=\"{\n        backdrop: showBackdrop && !hideContent,\n        'hide-content': hideContent,\n      }\"\n      class=\"spinner-wrapper\"\n    >\n      <kirby-spinner class=\"spinner\"></kirby-spinner>\n    </div>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-loading-overlay.mjs","sources":["../../loading-overlay/src/loading-overlay.service.ts","../../loading-overlay/src/loading-overlay.component.ts","../../loading-overlay/src/loading-overlay.component.html","../../loading-overlay/src/kirbydesign-designsystem-loading-overlay.ts"],"sourcesContent":["import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';\nimport { LoadingController } from '@ionic/angular/standalone';\nimport { SpinnerComponent } from '@kirbydesign/designsystem/spinner';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class LoadingOverlayService {\n  private ionLoading: HTMLIonLoadingElement = null;\n\n  constructor(\n    private loadingController: LoadingController,\n    private componentFactoryResolver: ComponentFactoryResolver,\n    private injector: Injector\n  ) {}\n\n  public async showLoadingOverlay(\n    showBackdrop: boolean = true,\n    hideContent: boolean = false\n  ): Promise<void> {\n    if (!this.ionLoading) {\n      const cssClasses = ['kirby-loading-overlay'];\n\n      if (hideContent) {\n        cssClasses.push('kirby-loading-hide-content');\n      }\n\n      this.ionLoading = await this.loadingController.create({\n        cssClass: cssClasses,\n        duration: 0,\n        message: null,\n        showBackdrop: showBackdrop || hideContent,\n        spinner: null,\n      });\n\n      const loadingWrapper = this.ionLoading.querySelector('.loading-wrapper');\n      const kirbySpinner = document.createElement('kirby-spinner');\n      const factory = this.componentFactoryResolver.resolveComponentFactory(SpinnerComponent);\n      factory.create(this.injector, [], kirbySpinner);\n      loadingWrapper.appendChild(kirbySpinner);\n\n      await this.ionLoading.present();\n    }\n  }\n\n  public async hideLoadingOverlay(): Promise<void> {\n    if (this.ionLoading) {\n      await this.ionLoading.dismiss();\n      this.ionLoading = null;\n    }\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core';\nimport { SpinnerComponent } from '@kirbydesign/designsystem/spinner';\n\n@Component({\n  imports: [SpinnerComponent, CommonModule],\n  selector: 'kirby-loading-overlay',\n  templateUrl: './loading-overlay.component.html',\n  styleUrls: ['./loading-overlay.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LoadingOverlayComponent {\n  @Input() public isLoading = true;\n  @Input() public showBackdrop = true;\n  @Input() public hideContent = false;\n}\n","<div class=\"overlay-wrapper\">\n  @if (isLoading) {\n    <div\n      [ngClass]=\"{\n        backdrop: showBackdrop && !hideContent,\n        'hide-content': hideContent,\n      }\"\n      class=\"spinner-wrapper\"\n    >\n      <kirby-spinner class=\"spinner\"></kirby-spinner>\n    </div>\n  }\n  <div class=\"content-wrapper\">\n    <ng-content></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-modal.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { Optional, Component, InjectionToken, ElementRef, Input, ViewChild, ChangeDetectionStrategy, Injectable, Injector, RendererStyleFlags2, TemplateRef, HostListener, HostBinding, ViewChildren, ContentChild, EventEmitter, Output, Inject, inject } from '@angular/core';
 import * as i1$3 from '@angular/router';
 import { RouterModule, RouterOutlet, NavigationEnd, NavigationStart, ROUTES } from '@angular/router';
-import { of, isObservable, Subject, firstValueFrom, merge, fromEvent, defer, EMPTY } from 'rxjs';
+import { of, isObservable, Subject, firstValueFrom, merge, defer, EMPTY } from 'rxjs';
 import { debounceTime, first, takeUntil, map, filter, startWith, pairwise, skipUntil } from 'rxjs/operators';
 import * as i3 from '@kirbydesign/designsystem/helpers';
 import { getIonModalDialogAncestor, DesignTokenHelper, observeContent, KirbyAnimation } from '@kirbydesign/designsystem/helpers';
@@ -10,8 +10,8 @@ import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { IconComponent } from '@kirbydesign/designsystem/icon';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
-import * as i1$1 from '@ionic/angular';
-import { IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, createAnimation, ModalController as ModalController$1, IonModal, IonFooter } from '@ionic/angular';
+import * as i1$1 from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, createAnimation, ModalController as ModalController$1, IonModal, IonFooter } from '@ionic/angular/standalone';
 import * as i1$2 from '@kirbydesign/designsystem/shared';
 import { ThemeColorDirective, inheritAriaLabelText } from '@kirbydesign/designsystem/shared';
 import * as i1 from '@kirbydesign/designsystem/types';
@@ -170,11 +170,11 @@ class AlertComponent {
         ionModalElement?.dismiss(true);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AlertComponent, isStandalone: true, selector: "kirby-alert", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okBtn: "okBtn", okBtnIsDestructive: "okBtnIsDestructive", cancelBtn: "cancelBtn" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    @if (cancelBtn$ | async; as cancelBtn) {\n      <button kirby-button attentionLevel=\"3\" class=\"cancel-btn\" (click)=\"onCancel()\">\n        {{ cancelBtn }}\n      </button>\n    }\n    <button\n      kirby-button\n      [size]=\"(cancelBtn$ | async) ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn$ | async }}\n    </button>\n  </div>\n</article>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}article{overflow:hidden;padding:var(--kirby-spacing-s);padding-top:var(--kirby-spacing-m)}@media(max-width:320px){article{padding:var(--kirby-spacing-xxs)}}.buttongroup{display:flex;justify-content:center;column-gap:var(--kirby-spacing-xxs);flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - var(--kirby-spacing-xxs) / 2);margin-inline:0}.buttongroup button:not(:only-child){flex-grow:1;min-width:unset}\n"], dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "title", "subtitle"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AlertComponent, isStandalone: true, selector: "kirby-alert", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okBtn: "okBtn", okBtnIsDestructive: "okBtnIsDestructive", cancelBtn: "cancelBtn" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    @if (cancelBtn$ | async; as cancelBtn) {\n      <button kirby-button attentionLevel=\"3\" class=\"cancel-btn\" (click)=\"onCancel()\">\n        {{ cancelBtn }}\n      </button>\n    }\n    <button\n      kirby-button\n      [size]=\"(cancelBtn$ | async) ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn$ | async }}\n    </button>\n  </div>\n</article>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}article{overflow:hidden;padding:var(--kirby-spacing-s);padding-top:var(--kirby-spacing-m)}@media(max-width:320px){article{padding:var(--kirby-spacing-xxs)}}article{color:var(--kirby-color-content-base)}.buttongroup{display:flex;justify-content:center;column-gap:var(--kirby-spacing-xxs);flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - var(--kirby-spacing-xxs) / 2);margin-inline:0}.buttongroup button:not(:only-child){flex-grow:1;min-width:unset}\n"], dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "title", "subtitle"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],             kirby-card[themeColor],             kirby-icon[themeColor],             kirby-progress-circle-ring[themeColor],             kirby-modal-footer[themeColor],             kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { kind: "pipe", type: i6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ imports: [IconComponent, EmptyStateComponent, ButtonComponent, CommonModule, ThemeColorDirective], selector: 'kirby-alert', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    @if (cancelBtn$ | async; as cancelBtn) {\n      <button kirby-button attentionLevel=\"3\" class=\"cancel-btn\" (click)=\"onCancel()\">\n        {{ cancelBtn }}\n      </button>\n    }\n    <button\n      kirby-button\n      [size]=\"(cancelBtn$ | async) ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn$ | async }}\n    </button>\n  </div>\n</article>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}article{overflow:hidden;padding:var(--kirby-spacing-s);padding-top:var(--kirby-spacing-m)}@media(max-width:320px){article{padding:var(--kirby-spacing-xxs)}}.buttongroup{display:flex;justify-content:center;column-gap:var(--kirby-spacing-xxs);flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - var(--kirby-spacing-xxs) / 2);margin-inline:0}.buttongroup button:not(:only-child){flex-grow:1;min-width:unset}\n"] }]
+            args: [{ imports: [IconComponent, EmptyStateComponent, ButtonComponent, CommonModule, ThemeColorDirective], selector: 'kirby-alert', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n  <kirby-empty-state\n    [iconName]=\"iconName\"\n    [themeColor]=\"iconThemeColor\"\n    [title]=\"title$ | async\"\n    [subtitle]=\"message$ | async\"\n  ></kirby-empty-state>\n  <div class=\"buttongroup\">\n    @if (cancelBtn$ | async; as cancelBtn) {\n      <button kirby-button attentionLevel=\"3\" class=\"cancel-btn\" (click)=\"onCancel()\">\n        {{ cancelBtn }}\n      </button>\n    }\n    <button\n      kirby-button\n      [size]=\"(cancelBtn$ | async) ? null : 'lg'\"\n      attentionLevel=\"1\"\n      class=\"ok-btn\"\n      [class.destructive]=\"okBtnIsDestructive\"\n      (click)=\"onOk()\"\n    >\n      {{ okBtn$ | async }}\n    </button>\n  </div>\n</article>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}article{overflow:hidden;padding:var(--kirby-spacing-s);padding-top:var(--kirby-spacing-m)}@media(max-width:320px){article{padding:var(--kirby-spacing-xxs)}}article{color:var(--kirby-color-content-base)}.buttongroup{display:flex;justify-content:center;column-gap:var(--kirby-spacing-xxs);flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - var(--kirby-spacing-xxs) / 2);margin-inline:0}.buttongroup button:not(:only-child){flex-grow:1;min-width:unset}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.WindowRef }], propDecorators: { alertWrapper: [{
                 type: ViewChild,
                 args: ['alertWrapper', { static: true }]
@@ -507,7 +507,7 @@ class ModalWrapperComponent {
         // when ionScroll emits.
         this.zone.runOutsideAngular(() => {
             // Always subscribe as ionScroll only emits when scrollEventsEnabled is true
-            fromEvent(this.ionContentElement.nativeElement, 'ionScroll')
+            this.ionContent.ionScroll
                 .pipe(debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.destroy$))
                 .subscribe((scrollInfo) => {
                 const contentScrolledPastOffset = scrollInfo.scrollTop > contentScrolledOffsetInPixels;
@@ -729,7 +729,7 @@ class ModalWrapperComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ModalWrapperComponent, isStandalone: true, selector: "kirby-modal-wrapper", inputs: { scrollDisabled: "scrollDisabled", config: "config", content: "content" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()", "window:ionKeyboardDidShow": "_onKeyboardShow($event.detail.keyboardHeight)", "window:keyboardWillShow": "_onKeyboardShow($event.keyboardHeight)", "window:ionKeyboardDidHide": "_onKeyboardHide()", "window:keyboardWillHide": "_onKeyboardHide()", "window:resize": "_onWindowResize()" }, properties: { "class.collapsible-title": "this._hasCollapsibleTitle", "class.drawer": "this._isDrawer" } }, providers: [
             { provide: Modal, useExisting: ModalWrapperComponent },
             { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
-        ], queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "_contentTitleElement", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header\n  role=\"presentation\"\n  [class.content-scrolled]=\"isContentScrolled\"\n  (touchstart)=\"onHeaderTouchStart($event)\"\n>\n  <ion-toolbar>\n    <ion-title role=\"heading\" aria-level=\"2\" tabindex=\"-1\"></ion-title>\n    @if (config.flavor === 'drawer' && config.drawerSupplementaryAction) {\n      <ion-buttons slot=\"secondary\">\n        <button\n          kirby-button\n          attentionLevel=\"3\"\n          size=\"md\"\n          (click)=\"config.drawerSupplementaryAction.action($event)\"\n        >\n          <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n        </button>\n      </ion-buttons>\n    }\n    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\n        [attr.aria-label]=\"translations.get('close')\"\n        (click)=\"close()\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n  @if (_hasCollapsibleTitle) {\n    <ion-header collapse=\"condense\">\n      <ion-toolbar>\n        <span class=\"kirby-text-xlarge\" #contentTitle></span>\n      </ion-toolbar>\n    </ion-header>\n  }\n\n  <!-- Outlet for ModalController -->\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n\n  <!-- Outlet for projected content -->\n  <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n  <!-- Outlet for route-based modal -->\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);--padding-bottom: calc(var(--kirby-spacing-xxs) - 1px);--padding-top: var(--kirby-spacing-xxs);--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));border-bottom:1px solid transparent;transition:border-color var(--kirby-transition-duration-quick) linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - 1px);--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: var(--kirby-spacing-s)}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-medium)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-medium)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media(min-width:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - 1px);--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}@media(min-width:768px){ion-content{--padding-start: var(--kirby-spacing-xxl);--padding-end: var(--kirby-spacing-xxl)}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: var(--kirby-spacing-l);--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s)}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"], outputs: ["ionScrollStart", "ionScroll", "ionScrollEnd"] }] }); }
+        ], queries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "_contentTitleElement", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header\n  role=\"presentation\"\n  [class.content-scrolled]=\"isContentScrolled\"\n  (touchstart)=\"onHeaderTouchStart($event)\"\n>\n  <ion-toolbar>\n    <ion-title role=\"heading\" aria-level=\"2\" tabindex=\"-1\"></ion-title>\n    @if (config.flavor === 'drawer' && config.drawerSupplementaryAction) {\n      <ion-buttons slot=\"secondary\">\n        <button\n          kirby-button\n          attentionLevel=\"3\"\n          size=\"md\"\n          (click)=\"config.drawerSupplementaryAction.action($event)\"\n        >\n          <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n        </button>\n      </ion-buttons>\n    }\n    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\n        [attr.aria-label]=\"translations.get('close')\"\n        (click)=\"close()\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n  @if (_hasCollapsibleTitle) {\n    <ion-header collapse=\"condense\">\n      <ion-toolbar>\n        <span class=\"kirby-text-xlarge\" #contentTitle></span>\n      </ion-toolbar>\n    </ion-header>\n  }\n\n  <!-- Outlet for ModalController -->\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n\n  <!-- Outlet for projected content -->\n  <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n  <!-- Outlet for route-based modal -->\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);--padding-bottom: calc(var(--kirby-spacing-xxs) - 1px);--padding-top: var(--kirby-spacing-xxs);--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-color-content-base));border-bottom:1px solid transparent;transition:border-color var(--kirby-transition-duration-quick) linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - 1px);--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: var(--kirby-spacing-s)}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-color-border-base-silent)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-color-border-base-silent)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media(min-width:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - 1px);--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-color-content-base));--padding-top: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}@media(min-width:768px){ion-content{--padding-start: var(--kirby-spacing-xxl);--padding-end: var(--kirby-spacing-xxl)}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: var(--kirby-spacing-l);--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s)}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalWrapperComponent, decorators: [{
             type: Component,
@@ -746,7 +746,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImpo
                     ], selector: 'kirby-modal-wrapper', providers: [
                         { provide: Modal, useExisting: ModalWrapperComponent },
                         { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
-                    ], template: "<ion-header\n  role=\"presentation\"\n  [class.content-scrolled]=\"isContentScrolled\"\n  (touchstart)=\"onHeaderTouchStart($event)\"\n>\n  <ion-toolbar>\n    <ion-title role=\"heading\" aria-level=\"2\" tabindex=\"-1\"></ion-title>\n    @if (config.flavor === 'drawer' && config.drawerSupplementaryAction) {\n      <ion-buttons slot=\"secondary\">\n        <button\n          kirby-button\n          attentionLevel=\"3\"\n          size=\"md\"\n          (click)=\"config.drawerSupplementaryAction.action($event)\"\n        >\n          <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n        </button>\n      </ion-buttons>\n    }\n    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\n        [attr.aria-label]=\"translations.get('close')\"\n        (click)=\"close()\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n  @if (_hasCollapsibleTitle) {\n    <ion-header collapse=\"condense\">\n      <ion-toolbar>\n        <span class=\"kirby-text-xlarge\" #contentTitle></span>\n      </ion-toolbar>\n    </ion-header>\n  }\n\n  <!-- Outlet for ModalController -->\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n\n  <!-- Outlet for projected content -->\n  <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n  <!-- Outlet for route-based modal -->\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);--padding-bottom: calc(var(--kirby-spacing-xxs) - 1px);--padding-top: var(--kirby-spacing-xxs);--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));border-bottom:1px solid transparent;transition:border-color var(--kirby-transition-duration-quick) linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - 1px);--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: var(--kirby-spacing-s)}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-medium)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-medium)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media(min-width:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - 1px);--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}@media(min-width:768px){ion-content{--padding-start: var(--kirby-spacing-xxl);--padding-end: var(--kirby-spacing-xxl)}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: var(--kirby-spacing-l);--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s)}}\n"] }]
+                    ], template: "<ion-header\n  role=\"presentation\"\n  [class.content-scrolled]=\"isContentScrolled\"\n  (touchstart)=\"onHeaderTouchStart($event)\"\n>\n  <ion-toolbar>\n    <ion-title role=\"heading\" aria-level=\"2\" tabindex=\"-1\"></ion-title>\n    @if (config.flavor === 'drawer' && config.drawerSupplementaryAction) {\n      <ion-buttons slot=\"secondary\">\n        <button\n          kirby-button\n          attentionLevel=\"3\"\n          size=\"md\"\n          (click)=\"config.drawerSupplementaryAction.action($event)\"\n        >\n          <kirby-icon [name]=\"config.drawerSupplementaryAction.iconName\"></kirby-icon>\n        </button>\n      </ion-buttons>\n    }\n    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\n        [attr.aria-label]=\"translations.get('close')\"\n        (click)=\"close()\"\n      >\n        <kirby-icon name=\"close\"></kirby-icon>\n      </button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"scrollEventsEnabled\">\n  @if (_hasCollapsibleTitle) {\n    <ion-header collapse=\"condense\">\n      <ion-toolbar>\n        <span class=\"kirby-text-xlarge\" #contentTitle></span>\n      </ion-toolbar>\n    </ion-header>\n  }\n\n  <!-- Outlet for ModalController -->\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n\n  <!-- Outlet for projected content -->\n  <ng-container *ngTemplateOutlet=\"content; injector: modalWrapperInjector\"></ng-container>\n\n  <!-- Outlet for route-based modal -->\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);--padding-bottom: calc(var(--kirby-spacing-xxs) - 1px);--padding-top: var(--kirby-spacing-xxs);--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-color-content-base));border-bottom:1px solid transparent;transition:border-color var(--kirby-transition-duration-quick) linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - 1px);--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: var(--kirby-spacing-s)}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-color-border-base-silent)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-color-border-base-silent)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media(min-width:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-m);--padding-end: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) - 1px);--padding-top: var(--kirby-spacing-m);padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:var(--kirby-font-size-n);font-weight:var(--kirby-font-weight-bold);outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-color-content-base));--padding-top: var(--kirby-spacing-m);--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s);display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}@media(min-width:768px){ion-content{--padding-start: var(--kirby-spacing-xxl);--padding-end: var(--kirby-spacing-xxl)}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: var(--kirby-spacing-l);--padding-start: var(--kirby-spacing-xxs);--padding-end: var(--kirby-spacing-xxs);border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: var(--kirby-spacing-s);--padding-end: var(--kirby-spacing-s)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1$2.ResizeObserverService }, { type: i1.WindowRef }, { type: i3.PlatformService }, { type: CanDismissHelper }, { type: i0.EnvironmentInjector }, { type: i1$2.TranslationService }], propDecorators: { _hasCollapsibleTitle: [{
                 type: HostBinding,
                 args: ['class.collapsible-title']
@@ -1885,11 +1885,11 @@ class ModalFooterComponent extends ModalElementComponent {
         this.themeColor = 'white';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalFooterComponent, deps: [{ token: i0.ElementRef }, { token: ModalElementsAdvertiser, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ModalFooterComponent, isStandalone: true, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type", themeColor: "themeColor" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this._cssClass" } }, usesInheritance: true, ngImport: i0, template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:var(--kirby-elevation-8);box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xs) + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:var(--kirby-spacing-m)}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background-color:var(--kirby-background-color)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-safe-area-bottom)) * -1))}\n"], dependencies: [{ kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ModalFooterComponent, isStandalone: true, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type", themeColor: "themeColor" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this._cssClass" } }, usesInheritance: true, ngImport: i0, template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:var(--kirby-elevation-8);box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-color-fill-raised));color:var(--kirby-modal-footer-color, var(--kirby-color-content-raised));padding:var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xs) + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:var(--kirby-spacing-m)}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform var(--kirby-transition-soft-keyboard-leave)}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background-color:var(--kirby-background-color)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform var(--kirby-transition-soft-keyboard-enter);transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-safe-area-bottom)) * -1))}\n"], dependencies: [{ kind: "component", type: IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ imports: [IonFooter], selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:var(--kirby-elevation-8);box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xs) + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:var(--kirby-spacing-m)}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background-color:var(--kirby-background-color)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-safe-area-bottom)) * -1))}\n"] }]
+            args: [{ imports: [IonFooter], selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer role=\"presentation\">\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:var(--kirby-elevation-8);box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-color-fill-raised));color:var(--kirby-modal-footer-color, var(--kirby-color-content-raised));padding:var(--kirby-spacing-s);padding-bottom:calc(var(--kirby-spacing-xs) + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:var(--kirby-spacing-m)}}:host{box-sizing:border-box;display:block}:host(.snap-to-keyboard) ion-footer{transition:transform var(--kirby-transition-soft-keyboard-leave)}:host(.light) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background-color:var(--kirby-background-color)}:host(.inline) ion-footer{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--kirby-inputs-elevation: var(--kirby-elevation-2);background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform var(--kirby-transition-soft-keyboard-enter);transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-safe-area-bottom)) * -1))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
                     type: Optional
                 }] }], propDecorators: { snapToKeyboard: [{