@kirbydesign/designsystem 11.11.0-dev-1d9b4cd → 11.11.1

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

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, Input, ChangeDetectionStrategy, Component } from '@angular/core';
 import { SpinnerComponent } from '@kirbydesign/designsystem/spinner';
-import * as i1 from '@ionic/angular';
+import * as i1 from '@ionic/angular/standalone';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -56,11 +56,11 @@ class LoadingOverlayComponent {
         this.hideContent = false;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LoadingOverlayComponent, isStandalone: true, selector: "kirby-loading-overlay", inputs: { isLoading: "isLoading", showBackdrop: "showBackdrop", hideContent: "hideContent" }, ngImport: i0, template: "<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", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;min-height:var(--kirby-spacing-l)}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper.loading{overflow:hidden}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:var(--kirby-z-index-loading-overlay);display:flex;background:transparent;justify-content:center;place-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper.hide-content{background-color:#f6f6f6}.overlay-wrapper .spinner-wrapper .spinner{width:var(--kirby-spacing-l);height:var(--kirby-spacing-l)}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "kirby-spinner" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LoadingOverlayComponent, isStandalone: true, selector: "kirby-loading-overlay", inputs: { isLoading: "isLoading", showBackdrop: "showBackdrop", hideContent: "hideContent" }, ngImport: i0, template: "<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", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;min-height:32px}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper.loading{overflow:hidden}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:1001;display:flex;background:transparent;justify-content:center;place-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper.hide-content{background-color:#f6f6f6}.overlay-wrapper .spinner-wrapper .spinner{width:32px;height:32px}\n"], dependencies: [{ kind: "component", type: SpinnerComponent, selector: "kirby-spinner" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
             type: Component,
-            args: [{ imports: [SpinnerComponent, CommonModule], selector: 'kirby-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;min-height:var(--kirby-spacing-l)}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper.loading{overflow:hidden}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:var(--kirby-z-index-loading-overlay);display:flex;background:transparent;justify-content:center;place-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper.hide-content{background-color:#f6f6f6}.overlay-wrapper .spinner-wrapper .spinner{width:var(--kirby-spacing-l);height:var(--kirby-spacing-l)}\n"] }]
+            args: [{ imports: [SpinnerComponent, CommonModule], selector: 'kirby-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<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", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;min-height:32px}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper.loading{overflow:hidden}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:1001;display:flex;background:transparent;justify-content:center;place-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper.hide-content{background-color:#f6f6f6}.overlay-wrapper .spinner-wrapper .spinner{width:32px;height:32px}\n"] }]
         }], propDecorators: { isLoading: [{
                 type: Input
             }], showBackdrop: [{

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\" [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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"}

package/fesm2022/kirbydesign-designsystem-menu.mjs

@@ -247,11 +247,11 @@ class MenuComponent {
         this.disposeIonScrollListener?.();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.TranslationService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MenuComponent, isStandalone: true, selector: "kirby-menu", inputs: { isDisabled: "isDisabled", buttonSize: "buttonSize", placement: "placement", attentionLevel: "attentionLevel", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop", shift: "shift", minWidth: "minWidth" }, host: { listeners: { "keydown": "_onKeydown($event)", "click": "_onClick()" } }, queries: [{ propertyName: "userProvidedButton", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }, { propertyName: "kirbyItems", predicate: ItemComponent, read: ElementRef }, { propertyName: "kirbyItemComponents", predicate: ItemComponent }], viewQueries: [{ propertyName: "buttonContainerElement", first: true, predicate: ["buttonContainer"], descendants: true, read: ElementRef }, { propertyName: "defaultButtonElement", first: true, predicate: ["defaultButton"], descendants: true, read: ElementRef }, { propertyName: "floatingMenu", first: true, predicate: FloatingDirective, descendants: true }], ngImport: i0, template: "<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:var(--kirby-elevation-4);min-width:240px;max-width:460px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: FloatingDirective, selector: "[kirbyFloating]", inputs: ["reference", "placement", "strategy", "triggers", "DOMPortalOutlet", "portalOutletConfig", "isDisabled", "offset", "shift", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop"], outputs: ["displayChanged"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: MenuComponent, isStandalone: true, selector: "kirby-menu", inputs: { isDisabled: "isDisabled", buttonSize: "buttonSize", placement: "placement", attentionLevel: "attentionLevel", triggers: "triggers", DOMPortalOutlet: "DOMPortalOutlet", portalOutletConfig: "portalOutletConfig", autoPlacement: "autoPlacement", closeOnSelect: "closeOnSelect", closeOnEscapeKey: "closeOnEscapeKey", closeOnBackdrop: "closeOnBackdrop", shift: "shift", minWidth: "minWidth" }, host: { listeners: { "keydown": "_onKeydown($event)", "click": "_onClick()" } }, queries: [{ propertyName: "userProvidedButton", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef }, { propertyName: "kirbyItems", predicate: ItemComponent, read: ElementRef }, { propertyName: "kirbyItemComponents", predicate: ItemComponent }], viewQueries: [{ propertyName: "buttonContainerElement", first: true, predicate: ["buttonContainer"], descendants: true, read: ElementRef }, { propertyName: "defaultButtonElement", first: true, predicate: ["defaultButton"], descendants: true, read: ElementRef }, { propertyName: "floatingMenu", first: true, predicate: FloatingDirective, descendants: true }], ngImport: i0, template: "<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;min-width:240px;max-width:460px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: FloatingDirective, selector: "[kirbyFloating]", inputs: ["reference", "placement", "strategy", "triggers", "DOMPortalOutlet", "portalOutletConfig", "isDisabled", "offset", "shift", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop"], outputs: ["displayChanged"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-menu', imports: [ButtonComponent, FloatingDirective, CardComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:var(--kirby-elevation-4);min-width:240px;max-width:460px}\n"] }]
+            args: [{ selector: 'kirby-menu', imports: [ButtonComponent, FloatingDirective, CardComponent, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{position:relative}.button-container{display:inline-block}kirby-card{max-height:352px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;min-width:240px;max-width:460px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.TranslationService }, { type: i0.DestroyRef }], propDecorators: { isDisabled: [{
                 type: Input
             }], buttonSize: [{

package/fesm2022/kirbydesign-designsystem-menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-menu.mjs","sources":["../../menu/src/menu.component.ts","../../menu/src/menu.component.html","../../menu/src/kirbydesign-designsystem-menu.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  DestroyRef,\n  ElementRef,\n  HostListener,\n  Input,\n  NgZone,\n  OnDestroy,\n  QueryList,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { Placement } from '@floating-ui/dom';\n\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { AttentionLevel, ButtonComponent, ButtonSize } from '@kirbydesign/designsystem/button';\nimport {\n  FloatingDirective,\n  FloatingOffset,\n  PortalOutletConfig,\n  TriggerEvent,\n} from '@kirbydesign/designsystem/shared/floating';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\nimport { StringSearchHelper, UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { forwardAttributes, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { componentOnReady } from '@ionic/core';\nimport { startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'kirby-menu',\n  imports: [ButtonComponent, FloatingDirective, CardComponent, IconComponent],\n  templateUrl: './menu.component.html',\n  styleUrls: ['./menu.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuComponent implements AfterViewInit, AfterContentInit, OnDestroy {\n  readonly menuId: string = UniqueIdGenerator.scopedTo('kirby-menu').next();\n  triggerButtonId: string = UniqueIdGenerator.scopedTo('kirby-menu-trigger-button').next();\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private elementRef: ElementRef<HTMLElement>,\n    private zone: NgZone,\n    private renderer: Renderer2,\n    public translations: TranslationService,\n    private destroyRef: DestroyRef\n  ) {}\n\n  @Input() public isDisabled: boolean = false;\n\n  @Input() public buttonSize: ButtonSize = ButtonSize.MD;\n\n  @Input() public placement: Placement = 'bottom-start';\n\n  @Input() public attentionLevel: AttentionLevel = '3';\n\n  @Input() public triggers: Array<TriggerEvent> = ['click'];\n\n  @Input() public DOMPortalOutlet: HTMLElement = this.elementRef.nativeElement.ownerDocument.body;\n\n  @Input() public portalOutletConfig: PortalOutletConfig | undefined;\n\n  @Input() public autoPlacement: boolean = false;\n\n  @Input() public closeOnSelect: boolean = true;\n\n  @Input() public closeOnEscapeKey: boolean = true;\n\n  @Input() public closeOnBackdrop: boolean = true;\n\n  @Input() public shift: boolean = true;\n\n  /**\n   * The minimum width of the menu. If not set, the default width is 240px\n   */\n  @Input() public minWidth: number;\n\n  @ViewChild('buttonContainer', { read: ElementRef })\n  public buttonContainerElement: ElementRef<HTMLElement> | undefined;\n\n  @ViewChild('defaultButton', { read: ElementRef })\n  public defaultButtonElement: ElementRef<HTMLButtonElement> | undefined;\n\n  @ContentChild(ButtonComponent, { read: ElementRef }) public userProvidedButton:\n    | ElementRef<HTMLButtonElement>\n    | undefined;\n\n  @ViewChild(FloatingDirective)\n  private floatingMenu: FloatingDirective;\n\n  @ContentChildren(ItemComponent, { read: ElementRef }) public kirbyItems: QueryList<\n    ElementRef<HTMLElement>\n  >;\n\n  @ContentChildren(ItemComponent) public kirbyItemComponents: QueryList<ItemComponent>;\n\n  public floatingMenuIsShown: boolean = false;\n  public FloatingOffset: typeof FloatingOffset = FloatingOffset;\n  private disposeIonScrollListener: EventListenerDisposeFn;\n  private focusedIndex = -1;\n\n  @HostListener('keydown', ['$event'])\n  _onKeydown(event: KeyboardEvent) {\n    if (this.kirbyItems.length === 0) {\n      console.warn('[Kirby] No items found within menu');\n      return;\n    }\n    if (this.floatingMenuIsShown) {\n      this.handleKeyDownForOpenedMenu(event);\n    } else {\n      this.handleKeyDownForClosedMenu(event);\n    }\n  }\n\n  @HostListener('click')\n  _onClick() {\n    if (!this.floatingMenuIsShown) return;\n    this.focusedIndex = 0;\n    this.focusItem();\n  }\n\n  private preventDefaultAndStopImmediatePropagation(event: KeyboardEvent) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n  }\n\n  private getFirstInteractiveElement(el: HTMLIonItemElement) {\n    return el.querySelector<HTMLIonToggleElement | HTMLIonRadioElement | HTMLIonCheckboxElement>(\n      'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled])'\n    );\n  }\n\n  private handleKeyDownForClosedMenu(event: KeyboardEvent) {\n    const key = event.key;\n    switch (key) {\n      case ' ':\n      case 'Enter':\n      case 'ArrowDown':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        this.focusedIndex = 0;\n        this.floatingMenu.show();\n        this.focusItem();\n        break;\n      case 'ArrowUp':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        this.focusedIndex = this.kirbyItems.length - 1;\n        this.floatingMenu.show();\n        this.focusItem();\n        break;\n    }\n  }\n\n  private handleKeyDownForOpenedMenu(event: KeyboardEvent) {\n    const key = event.key;\n\n    switch (key) {\n      case 'ArrowDown':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.focusedIndex === this.kirbyItems.length - 1) {\n          this.focusedIndex = 0;\n        } else {\n          this.focusedIndex++;\n        }\n        this.focusItem();\n        break;\n      case 'ArrowUp':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.focusedIndex === 0) {\n          this.focusedIndex = this.kirbyItems.length - 1;\n        } else {\n          this.focusedIndex--;\n        }\n        this.focusItem();\n        break;\n      case 'Home': {\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.focusedIndex > 0) {\n          this.focusedIndex = 0;\n          this.focusItem();\n        }\n        break;\n      }\n      case 'End': {\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.focusedIndex < this.kirbyItems.length - 1) {\n          this.focusedIndex = this.kirbyItems.length - 1;\n          this.focusItem();\n        }\n        break;\n      }\n      case 'Escape':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.closeOnEscapeKey) {\n          this.floatingMenu.hide();\n        }\n        break;\n      case 'Tab':\n        this.floatingMenu.hide();\n        break;\n      default: {\n        if (StringSearchHelper.isPrintableCharacter(key)) {\n          this.preventDefaultAndStopImmediatePropagation(event);\n          const foundItemIndex = this.getIndexOfItemByFirstCharacter(key);\n          if (foundItemIndex > -1) {\n            this.focusedIndex = foundItemIndex;\n            this.focusItem();\n          }\n        }\n      }\n    }\n  }\n\n  private getIndexOfItemByFirstCharacter(char: string) {\n    return StringSearchHelper.getIndexByFirstMatchingStartString(\n      char,\n      this.kirbyItems.map((item) => item.nativeElement.innerText),\n      this.focusedIndex + 1\n    );\n  }\n\n  focusItem() {\n    const itemToBeFocused = this.kirbyItems.get(this.focusedIndex);\n    const ionItem = itemToBeFocused.nativeElement.querySelector('ion-item');\n\n    // Look for interactive element within ion-item like toggle or checkbox and set focus if found\n    const firstInteractiveElementWithinItem = this.getFirstInteractiveElement(ionItem);\n    if (firstInteractiveElementWithinItem) {\n      firstInteractiveElementWithinItem.focus();\n    } else {\n      this.focusSelectableItem(ionItem);\n    }\n  }\n\n  private focusSelectableItem(ionItem: HTMLIonItemElement) {\n    const nativeButton: HTMLButtonElement =\n      ionItem.shadowRoot.querySelector('button:not([disabled])');\n    nativeButton?.focus();\n  }\n\n  getTriggerButton(): HTMLButtonElement {\n    return (this.userProvidedButton ?? this.defaultButtonElement).nativeElement;\n  }\n\n  public ngAfterViewInit(): void {\n    this.cdr.detectChanges(); // Sets the updated reference for kirby-floating\n\n    this.zone.runOutsideAngular(() => {\n      /*\n       * Listen for ionScroll outside of Angular's change detection to\n       * avoid a change detection cycle for every scroll-event fired\n       */\n      this.disposeIonScrollListener = this.renderer.listen(document, 'ionScroll', () => {\n        this.floatingMenu.hide();\n      });\n    });\n    this.forwardAriaLabelToTriggerButton();\n  }\n\n  ngAfterContentInit(): void {\n    this.setUserProvidedButtonAriaAttributes();\n    this.kirbyItemComponents.changes\n      .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.setRoleAttributeForAllItems();\n        this.ensureSelectableItems();\n      });\n  }\n\n  private forwardAriaLabelToTriggerButton() {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.getTriggerButton()\n    );\n  }\n\n  ensureSelectableItems() {\n    this.kirbyItemComponents.forEach((itemComponent) => {\n      if (itemComponent.selectable === undefined) {\n        itemComponent.selectable = true;\n      }\n    });\n  }\n\n  private setRoleAttributeForAllItems() {\n    this.kirbyItems.forEach((item) => {\n      this.setRoleOnNativeControl(item.nativeElement);\n    });\n  }\n\n  private async setRoleOnNativeControl(item: HTMLElement) {\n    const ionItem = item.querySelector<HTMLIonItemElement>('ion-item');\n    if (!ionItem) return;\n\n    await new Promise<void>((resolve) => componentOnReady(ionItem, resolve));\n\n    const checkableInput = ionItem\n      .querySelector('ion-toggle, ion-checkbox')\n      ?.shadowRoot?.querySelector('input');\n    const button = ionItem.shadowRoot?.querySelector('button');\n    const nativeControl = checkableInput ?? button;\n\n    if (!nativeControl) return;\n    this.renderer.setAttribute(\n      nativeControl,\n      'role',\n      checkableInput ? 'menuitemcheckbox' : 'menuitem'\n    );\n  }\n\n  menuVisibilityChanged(menuIsShown: boolean) {\n    this.floatingMenuIsShown = menuIsShown;\n    this.renderer.setAttribute(this.getTriggerButton(), 'aria-expanded', menuIsShown.toString());\n    if (!menuIsShown) {\n      this.focusedIndex = -1;\n      this.getTriggerButton().focus();\n    }\n  }\n\n  private setUserProvidedButtonAriaAttributes() {\n    if (!this.userProvidedButton) return;\n\n    const button = this.userProvidedButton.nativeElement;\n    if (button.id) {\n      this.triggerButtonId = button.id;\n    } else {\n      this.renderer.setAttribute(button, 'id', this.triggerButtonId);\n    }\n    if (!button.getAttribute('aria-controls')) {\n      this.renderer.setAttribute(button, 'aria-controls', this.menuId);\n    }\n    if (!button.getAttribute('aria-haspopup')) {\n      this.renderer.setAttribute(button, 'aria-haspopup', 'true');\n    }\n    if (!button.getAttribute('aria-label')) {\n      this.renderer.setAttribute(button, 'aria-label', this.translations.get('more'));\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.disposeIonScrollListener?.();\n  }\n}\n","<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-menu.mjs","sources":["../../menu/src/menu.component.ts","../../menu/src/menu.component.html","../../menu/src/kirbydesign-designsystem-menu.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  ContentChildren,\n  DestroyRef,\n  ElementRef,\n  HostListener,\n  Input,\n  NgZone,\n  OnDestroy,\n  QueryList,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { Placement } from '@floating-ui/dom';\n\nimport { ItemComponent } from '@kirbydesign/designsystem/item';\nimport { CardComponent } from '@kirbydesign/designsystem/card';\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\nimport { AttentionLevel, ButtonComponent, ButtonSize } from '@kirbydesign/designsystem/button';\nimport {\n  FloatingDirective,\n  FloatingOffset,\n  PortalOutletConfig,\n  TriggerEvent,\n} from '@kirbydesign/designsystem/shared/floating';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\nimport { StringSearchHelper, UniqueIdGenerator } from '@kirbydesign/designsystem/helpers';\nimport { forwardAttributes, TranslationService } from '@kirbydesign/designsystem/shared';\nimport { componentOnReady } from '@ionic/core';\nimport { startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'kirby-menu',\n  imports: [ButtonComponent, FloatingDirective, CardComponent, IconComponent],\n  templateUrl: './menu.component.html',\n  styleUrls: ['./menu.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuComponent implements AfterViewInit, AfterContentInit, OnDestroy {\n  readonly menuId: string = UniqueIdGenerator.scopedTo('kirby-menu').next();\n  triggerButtonId: string = UniqueIdGenerator.scopedTo('kirby-menu-trigger-button').next();\n  private _attributesToForward = ['aria-label', 'aria-labelledby'];\n\n  constructor(\n    private cdr: ChangeDetectorRef,\n    private elementRef: ElementRef<HTMLElement>,\n    private zone: NgZone,\n    private renderer: Renderer2,\n    public translations: TranslationService,\n    private destroyRef: DestroyRef\n  ) {}\n\n  @Input() public isDisabled: boolean = false;\n\n  @Input() public buttonSize: ButtonSize = ButtonSize.MD;\n\n  @Input() public placement: Placement = 'bottom-start';\n\n  @Input() public attentionLevel: AttentionLevel = '3';\n\n  @Input() public triggers: Array<TriggerEvent> = ['click'];\n\n  @Input() public DOMPortalOutlet: HTMLElement = this.elementRef.nativeElement.ownerDocument.body;\n\n  @Input() public portalOutletConfig: PortalOutletConfig | undefined;\n\n  @Input() public autoPlacement: boolean = false;\n\n  @Input() public closeOnSelect: boolean = true;\n\n  @Input() public closeOnEscapeKey: boolean = true;\n\n  @Input() public closeOnBackdrop: boolean = true;\n\n  @Input() public shift: boolean = true;\n\n  /**\n   * The minimum width of the menu. If not set, the default width is 240px\n   */\n  @Input() public minWidth: number;\n\n  @ViewChild('buttonContainer', { read: ElementRef })\n  public buttonContainerElement: ElementRef<HTMLElement> | undefined;\n\n  @ViewChild('defaultButton', { read: ElementRef })\n  public defaultButtonElement: ElementRef<HTMLButtonElement> | undefined;\n\n  @ContentChild(ButtonComponent, { read: ElementRef }) public userProvidedButton:\n    | ElementRef<HTMLButtonElement>\n    | undefined;\n\n  @ViewChild(FloatingDirective)\n  private floatingMenu: FloatingDirective;\n\n  @ContentChildren(ItemComponent, { read: ElementRef }) public kirbyItems: QueryList<\n    ElementRef<HTMLElement>\n  >;\n\n  @ContentChildren(ItemComponent) public kirbyItemComponents: QueryList<ItemComponent>;\n\n  public floatingMenuIsShown: boolean = false;\n  public FloatingOffset: typeof FloatingOffset = FloatingOffset;\n  private disposeIonScrollListener: EventListenerDisposeFn;\n  private focusedIndex = -1;\n\n  @HostListener('keydown', ['$event'])\n  _onKeydown(event: KeyboardEvent) {\n    if (this.kirbyItems.length === 0) {\n      console.warn('[Kirby] No items found within menu');\n      return;\n    }\n    if (this.floatingMenuIsShown) {\n      this.handleKeyDownForOpenedMenu(event);\n    } else {\n      this.handleKeyDownForClosedMenu(event);\n    }\n  }\n\n  @HostListener('click')\n  _onClick() {\n    if (!this.floatingMenuIsShown) return;\n    this.focusedIndex = 0;\n    this.focusItem();\n  }\n\n  private preventDefaultAndStopImmediatePropagation(event: KeyboardEvent) {\n    event.stopImmediatePropagation();\n    event.preventDefault();\n  }\n\n  private getFirstInteractiveElement(el: HTMLIonItemElement) {\n    return el.querySelector<HTMLIonToggleElement | HTMLIonRadioElement | HTMLIonCheckboxElement>(\n      'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled])'\n    );\n  }\n\n  private handleKeyDownForClosedMenu(event: KeyboardEvent) {\n    const key = event.key;\n    switch (key) {\n      case ' ':\n      case 'Enter':\n      case 'ArrowDown':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        this.focusedIndex = 0;\n        this.floatingMenu.show();\n        this.focusItem();\n        break;\n      case 'ArrowUp':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        this.focusedIndex = this.kirbyItems.length - 1;\n        this.floatingMenu.show();\n        this.focusItem();\n        break;\n    }\n  }\n\n  private handleKeyDownForOpenedMenu(event: KeyboardEvent) {\n    const key = event.key;\n\n    switch (key) {\n      case 'ArrowDown':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.focusedIndex === this.kirbyItems.length - 1) {\n          this.focusedIndex = 0;\n        } else {\n          this.focusedIndex++;\n        }\n        this.focusItem();\n        break;\n      case 'ArrowUp':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.focusedIndex === 0) {\n          this.focusedIndex = this.kirbyItems.length - 1;\n        } else {\n          this.focusedIndex--;\n        }\n        this.focusItem();\n        break;\n      case 'Home': {\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.focusedIndex > 0) {\n          this.focusedIndex = 0;\n          this.focusItem();\n        }\n        break;\n      }\n      case 'End': {\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.focusedIndex < this.kirbyItems.length - 1) {\n          this.focusedIndex = this.kirbyItems.length - 1;\n          this.focusItem();\n        }\n        break;\n      }\n      case 'Escape':\n        this.preventDefaultAndStopImmediatePropagation(event);\n        if (this.closeOnEscapeKey) {\n          this.floatingMenu.hide();\n        }\n        break;\n      case 'Tab':\n        this.floatingMenu.hide();\n        break;\n      default: {\n        if (StringSearchHelper.isPrintableCharacter(key)) {\n          this.preventDefaultAndStopImmediatePropagation(event);\n          const foundItemIndex = this.getIndexOfItemByFirstCharacter(key);\n          if (foundItemIndex > -1) {\n            this.focusedIndex = foundItemIndex;\n            this.focusItem();\n          }\n        }\n      }\n    }\n  }\n\n  private getIndexOfItemByFirstCharacter(char: string) {\n    return StringSearchHelper.getIndexByFirstMatchingStartString(\n      char,\n      this.kirbyItems.map((item) => item.nativeElement.innerText),\n      this.focusedIndex + 1\n    );\n  }\n\n  focusItem() {\n    const itemToBeFocused = this.kirbyItems.get(this.focusedIndex);\n    const ionItem = itemToBeFocused.nativeElement.querySelector('ion-item');\n\n    // Look for interactive element within ion-item like toggle or checkbox and set focus if found\n    const firstInteractiveElementWithinItem = this.getFirstInteractiveElement(ionItem);\n    if (firstInteractiveElementWithinItem) {\n      firstInteractiveElementWithinItem.focus();\n    } else {\n      this.focusSelectableItem(ionItem);\n    }\n  }\n\n  private focusSelectableItem(ionItem: HTMLIonItemElement) {\n    const nativeButton: HTMLButtonElement =\n      ionItem.shadowRoot.querySelector('button:not([disabled])');\n    nativeButton?.focus();\n  }\n\n  getTriggerButton(): HTMLButtonElement {\n    return (this.userProvidedButton ?? this.defaultButtonElement).nativeElement;\n  }\n\n  public ngAfterViewInit(): void {\n    this.cdr.detectChanges(); // Sets the updated reference for kirby-floating\n\n    this.zone.runOutsideAngular(() => {\n      /*\n       * Listen for ionScroll outside of Angular's change detection to\n       * avoid a change detection cycle for every scroll-event fired\n       */\n      this.disposeIonScrollListener = this.renderer.listen(document, 'ionScroll', () => {\n        this.floatingMenu.hide();\n      });\n    });\n    this.forwardAriaLabelToTriggerButton();\n  }\n\n  ngAfterContentInit(): void {\n    this.setUserProvidedButtonAriaAttributes();\n    this.kirbyItemComponents.changes\n      .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))\n      .subscribe(() => {\n        this.setRoleAttributeForAllItems();\n        this.ensureSelectableItems();\n      });\n  }\n\n  private forwardAriaLabelToTriggerButton() {\n    forwardAttributes(\n      this.elementRef.nativeElement,\n      this._attributesToForward,\n      this.renderer,\n      this.getTriggerButton()\n    );\n  }\n\n  ensureSelectableItems() {\n    this.kirbyItemComponents.forEach((itemComponent) => {\n      if (itemComponent.selectable === undefined) {\n        itemComponent.selectable = true;\n      }\n    });\n  }\n\n  private setRoleAttributeForAllItems() {\n    this.kirbyItems.forEach((item) => {\n      this.setRoleOnNativeControl(item.nativeElement);\n    });\n  }\n\n  private async setRoleOnNativeControl(item: HTMLElement) {\n    const ionItem = item.querySelector<HTMLIonItemElement>('ion-item');\n    if (!ionItem) return;\n\n    await new Promise<void>((resolve) => componentOnReady(ionItem, resolve));\n\n    const checkableInput = ionItem\n      .querySelector('ion-toggle, ion-checkbox')\n      ?.shadowRoot?.querySelector('input');\n    const button = ionItem.shadowRoot?.querySelector('button');\n    const nativeControl = checkableInput ?? button;\n\n    if (!nativeControl) return;\n    this.renderer.setAttribute(\n      nativeControl,\n      'role',\n      checkableInput ? 'menuitemcheckbox' : 'menuitem'\n    );\n  }\n\n  menuVisibilityChanged(menuIsShown: boolean) {\n    this.floatingMenuIsShown = menuIsShown;\n    this.renderer.setAttribute(this.getTriggerButton(), 'aria-expanded', menuIsShown.toString());\n    if (!menuIsShown) {\n      this.focusedIndex = -1;\n      this.getTriggerButton().focus();\n    }\n  }\n\n  private setUserProvidedButtonAriaAttributes() {\n    if (!this.userProvidedButton) return;\n\n    const button = this.userProvidedButton.nativeElement;\n    if (button.id) {\n      this.triggerButtonId = button.id;\n    } else {\n      this.renderer.setAttribute(button, 'id', this.triggerButtonId);\n    }\n    if (!button.getAttribute('aria-controls')) {\n      this.renderer.setAttribute(button, 'aria-controls', this.menuId);\n    }\n    if (!button.getAttribute('aria-haspopup')) {\n      this.renderer.setAttribute(button, 'aria-haspopup', 'true');\n    }\n    if (!button.getAttribute('aria-label')) {\n      this.renderer.setAttribute(button, 'aria-label', this.translations.get('more'));\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.disposeIonScrollListener?.();\n  }\n}\n","<div class=\"button-container\" #buttonContainer>\n  <ng-content select=\"button[kirby-button]\"></ng-content>\n  @if (!userProvidedButton) {\n    <button\n      #defaultButton\n      [id]=\"triggerButtonId\"\n      kirby-button\n      [size]=\"buttonSize\"\n      [disabled]=\"isDisabled\"\n      type=\"button\"\n      [attentionLevel]=\"attentionLevel\"\n      aria-haspopup=\"true\"\n      [attr.aria-controls]=\"menuId\"\n      aria-expanded=\"false\"\n      [attr.aria-label]=\"translations.get('more')\"\n    >\n      <kirby-icon [name]=\"'more'\"></kirby-icon>\n    </button>\n  }\n</div>\n<kirby-card\n  [id]=\"menuId\"\n  kirbyFloating\n  [strategy]=\"'fixed'\"\n  [reference]=\"buttonContainerElement\"\n  [isDisabled]=\"isDisabled\"\n  [triggers]=\"triggers\"\n  [placement]=\"placement\"\n  [DOMPortalOutlet]=\"DOMPortalOutlet\"\n  [portalOutletConfig]=\"portalOutletConfig\"\n  [closeOnBackdrop]=\"closeOnBackdrop\"\n  [closeOnEscapeKey]=\"closeOnEscapeKey\"\n  [closeOnSelect]=\"closeOnSelect\"\n  [autoPlacement]=\"autoPlacement\"\n  [shift]=\"shift\"\n  [style.minWidth]=\"minWidth ? minWidth + 'px' : null\"\n  class=\"menu-popover\"\n  (keydown)=\"_onKeydown($event)\"\n  (displayChanged)=\"menuVisibilityChanged($event)\"\n  role=\"menu\"\n  [attr.aria-labelledby]=\"triggerButtonId\"\n>\n  <ng-content select=\"kirby-item\"></ng-content>\n</kirby-card>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"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:24px 16px 16px}@media(max-width:320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px;flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - 4px);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:24px 16px 16px}@media(max-width:320px){article{padding:8px}}.buttongroup{display:flex;justify-content:center;column-gap:8px;flex-wrap:wrap}.buttongroup button{flex:0 1 calc(50% - 4px);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: 8px;--padding-end: 8px;--padding-bottom: 7px;--padding-top: 8px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));border-bottom:1px solid transparent;transition:border-color .2s linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: 16px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-medium)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-medium)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media(min-width:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:clamp(13px,1rem,32px);font-weight:700;outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}@media(min-width:768px){ion-content{--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: 32px;--padding-start: 8px;--padding-end: 8px;border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: 16px;--padding-end: 16px}}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "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: 8px;--padding-end: 8px;--padding-bottom: 7px;--padding-top: 8px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));border-bottom:1px solid transparent;transition:border-color .2s linear}@media(min-width:768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-header ion-toolbar button{color:var(--color)}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px;--kirby-modal-safe-area-bottom: var(--ion-safe-area-bottom)}@media(max-width:767px){:host.drawer ion-header ion-toolbar{--padding-top: 16px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}}@media(min-width:768px){ion-header ion-toolbar{border-bottom-color:var(--kirby-medium)}}ion-header.content-scrolled ion-toolbar{border-bottom-color:var(--kirby-medium)}:host-context(ion-modal.no-header-area-border) ion-header ion-toolbar{border-bottom-color:transparent}@media(max-width:767px){:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal.kirby-drawer.interact-with-background){padding-top:0;position:relative;contain:inherit;min-height:min(var(--min-height),var(--vh100) - var(--kirby-modal-padding-top, 0px))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content{contain:content;max-height:calc(var(--vh100) - var(--kirby-modal-padding-top, 0px) - var(--header-height) - var(--footer-height))}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal.kirby-drawer.interact-with-background).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}:host-context(ion-modal.kirby-drawer.interact-with-background) ion-header ion-toolbar{border-bottom-color:transparent}:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:var(--kirby-safe-area-top, 0)}@media(min-width:768px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 23px;--padding-top: 24px;padding-inline:0}}ion-title{box-sizing:border-box;padding-inline:calc(48px + var(--padding-start)) calc(48px + var(--padding-end));font-size:clamp(13px,1rem,32px);font-weight:700;outline:none}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: calc(var(--kirby-spacing-m) + var(--kirby-modal-safe-area-bottom));--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column;height:calc(var(--height) - var(--header-height) - var(--footer-height));max-height:calc(var(--max-height) - var(--header-height) - var(--footer-height))}ion-content ::ng-deep>*{box-sizing:border-box;display:block}:host(:has(kirby-modal-footer)) ion-content{--padding-bottom: var(--kirby-spacing-m)}@media(min-width:768px){ion-content{--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-top: 0px;--padding-bottom: 32px;--padding-start: 8px;--padding-end: 8px;border:none}@media(min-width:768px){:host(.collapsible-title) ion-content ion-toolbar:first-of-type{--padding-start: 16px;--padding-end: 16px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1$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']
@@ -872,11 +872,11 @@ class ModalCompactWrapperComponent {
         this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalCompactWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1.WindowRef }, { token: CanDismissHelper }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ModalCompactWrapperComponent, isStandalone: true, selector: "kirby-modal-compact-wrapper", inputs: { config: "config", content: "content" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()" }, properties: { "class.ion-page": "false" } }, providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], ngImport: i0, template: "<!-- Outlet for ModalController -->\n<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [":host{display:block;padding:var(--kirby-spacing-m) var(--kirby-spacing-s)}\n"], dependencies: [{ 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"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.18", type: ModalCompactWrapperComponent, isStandalone: true, selector: "kirby-modal-compact-wrapper", inputs: { config: "config", content: "content" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()" }, properties: { "class.ion-page": "false" } }, providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], ngImport: i0, template: "<!-- Outlet for ModalController -->\n<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;padding:24px 16px}\n"], dependencies: [{ 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ModalCompactWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-modal-compact-wrapper', providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], imports: [CommonModule], host: { '[class.ion-page]': 'false' }, template: "<!-- Outlet for ModalController -->\n<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [":host{display:block;padding:var(--kirby-spacing-m) var(--kirby-spacing-s)}\n"] }]
+            args: [{ selector: 'kirby-modal-compact-wrapper', providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], imports: [CommonModule], host: { '[class.ion-page]': 'false' }, template: "<!-- Outlet for ModalController -->\n<ng-container\n  *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n\n<!-- Outlet for projected content -->\n<ng-container *ngTemplateOutlet=\"content\"></ng-container>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;padding:24px 16px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ElementRef }, { type: i1.WindowRef }, { type: CanDismissHelper }, { type: i0.Renderer2 }], propDecorators: { config: [{
                 type: Input
             }], content: [{
@@ -1539,11 +1539,11 @@ class ActionSheetComponent {
         this.cancel.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ActionSheetComponent, isStandalone: true, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, template: "<kirby-card>\n  @if (header) {\n    <kirby-card-header\n      [title]=\"header\"\n      [isTitleBold]=\"true\"\n      [subtitle]=\"subheader\"\n    ></kirby-card-header>\n  }\n  @for (item of items; track item.id) {\n    <button\n      kirby-button\n      expand=\"block\"\n      size=\"lg\"\n      [noDecoration]=\"true\"\n      (click)=\"onItemSelect(item)\"\n    >\n      {{ item.text }}\n    </button>\n  }\n</kirby-card>\n@if (!hideCancel) {\n  <button kirby-button class=\"cancel-btn\" size=\"lg\" attentionLevel=\"3\" (click)=\"onCancel()\">\n    {{ cancelButtonText }}\n  </button>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-internal-margin-horizontal-default: var(--kirby-spacing-l)}@media(max-width:320px){:host{--kirby-internal-margin-horizontal-default: var(--kirby-spacing-s)}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total));padding-bottom:var(--kirby-safe-area-bottom, 0)}:host button[kirby-button].no-decoration:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:var(--kirby-elevation-8)}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-8),var(--kirby-focus-ring-md-inset)}.cancel-btn{font-weight:var(--kirby-font-weight-bold);margin-top:var(--kirby-spacing-s);margin-bottom:var(--kirby-spacing-m);pointer-events:auto}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged", "hasPadding"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ActionSheetComponent, isStandalone: true, selector: "kirby-action-sheet", inputs: { cancelButtonText: "cancelButtonText", hideCancel: "hideCancel", disabled: "disabled", header: "header", subheader: "subheader", items: "items" }, outputs: { cancel: "cancel", itemSelect: "itemSelect" }, ngImport: i0, template: "<kirby-card>\n  @if (header) {\n    <kirby-card-header\n      [title]=\"header\"\n      [isTitleBold]=\"true\"\n      [subtitle]=\"subheader\"\n    ></kirby-card-header>\n  }\n  @for (item of items; track item.id) {\n    <button\n      kirby-button\n      expand=\"block\"\n      size=\"lg\"\n      [noDecoration]=\"true\"\n      (click)=\"onItemSelect(item)\"\n    >\n      {{ item.text }}\n    </button>\n  }\n</kirby-card>\n@if (!hideCancel) {\n  <button kirby-button class=\"cancel-btn\" size=\"lg\" attentionLevel=\"3\" (click)=\"onCancel()\">\n    {{ cancelButtonText }}\n  </button>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-internal-margin-horizontal-default: 32px}@media(max-width:320px){:host{--kirby-internal-margin-horizontal-default: 16px}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total));padding-bottom:var(--kirby-safe-area-bottom, 0)}:host button[kirby-button].no-decoration:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,var(--kirby-focus-ring-md-inset)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged", "hasPadding"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CardComponent, CardHeaderComponent, ButtonComponent], selector: 'kirby-action-sheet', template: "<kirby-card>\n  @if (header) {\n    <kirby-card-header\n      [title]=\"header\"\n      [isTitleBold]=\"true\"\n      [subtitle]=\"subheader\"\n    ></kirby-card-header>\n  }\n  @for (item of items; track item.id) {\n    <button\n      kirby-button\n      expand=\"block\"\n      size=\"lg\"\n      [noDecoration]=\"true\"\n      (click)=\"onItemSelect(item)\"\n    >\n      {{ item.text }}\n    </button>\n  }\n</kirby-card>\n@if (!hideCancel) {\n  <button kirby-button class=\"cancel-btn\" size=\"lg\" attentionLevel=\"3\" (click)=\"onCancel()\">\n    {{ cancelButtonText }}\n  </button>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-internal-margin-horizontal-default: var(--kirby-spacing-l)}@media(max-width:320px){:host{--kirby-internal-margin-horizontal-default: var(--kirby-spacing-s)}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total));padding-bottom:var(--kirby-safe-area-bottom, 0)}:host button[kirby-button].no-decoration:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:var(--kirby-elevation-8)}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-8),var(--kirby-focus-ring-md-inset)}.cancel-btn{font-weight:var(--kirby-font-weight-bold);margin-top:var(--kirby-spacing-s);margin-bottom:var(--kirby-spacing-m);pointer-events:auto}\n"] }]
+            args: [{ imports: [CardComponent, CardHeaderComponent, ButtonComponent], selector: 'kirby-action-sheet', template: "<kirby-card>\n  @if (header) {\n    <kirby-card-header\n      [title]=\"header\"\n      [isTitleBold]=\"true\"\n      [subtitle]=\"subheader\"\n    ></kirby-card-header>\n  }\n  @for (item of items; track item.id) {\n    <button\n      kirby-button\n      expand=\"block\"\n      size=\"lg\"\n      [noDecoration]=\"true\"\n      (click)=\"onItemSelect(item)\"\n    >\n      {{ item.text }}\n    </button>\n  }\n</kirby-card>\n@if (!hideCancel) {\n  <button kirby-button class=\"cancel-btn\" size=\"lg\" attentionLevel=\"3\" (click)=\"onCancel()\">\n    {{ cancelButtonText }}\n  </button>\n}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-internal-margin-horizontal-default: 32px}@media(max-width:320px){:host{--kirby-internal-margin-horizontal-default: 16px}}:host{--kirby-internal-margin-horizontal-total: calc( 2 * var(--kirby-action-sheet-margin-horizontal, var(--kirby-internal-margin-horizontal-default)) );display:flex;flex-direction:column;align-items:center;justify-content:flex-end;margin:0 auto;width:calc(100vw - var(--kirby-internal-margin-horizontal-total));max-width:calc(375px - var(--kirby-internal-margin-horizontal-total));padding-bottom:var(--kirby-safe-area-bottom, 0)}:host button[kirby-button].no-decoration:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-inset)}kirby-card{align-self:stretch;pointer-events:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}kirby-card button[kirby-button]{margin:0;border-radius:0}kirby-card button[kirby-button]:not(:focus){border-top:1px solid var(--kirby-background-color)}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,var(--kirby-focus-ring-md-inset)}.cancel-btn{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { cancelButtonText: [{
                 type: Input
             }], hideCancel: [{
@@ -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.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:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:16px;padding-bottom:calc(12px + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:24px}}: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 }); }
 }
 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.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:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;box-sizing:inherit;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:16px;padding-bottom:calc(12px + var(--kirby-modal-safe-area-bottom))}@media(min-width:768px){ion-footer{padding:24px}}: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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
                     type: Optional
                 }] }], propDecorators: { snapToKeyboard: [{