npm - @kirbydesign/designsystem - Versions diffs - 9.0.0 → 9.1.0 - Mend

@kirbydesign/designsystem 9.0.0 → 9.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-menu.mjs","sources":["../../../../libs/designsystem/menu/src/menu.component.ts","../../../../libs/designsystem/menu/src/menu.component.html","../../../../libs/designsystem/menu/src/kirbydesign-designsystem-menu.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n Input,\n NgZone,\n OnDestroy,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { Placement } from '@floating-ui/dom';\n\nimport { ItemModule } from '@kirbydesign/designsystem/item';\nimport { CardModule } from '@kirbydesign/designsystem/card';\nimport { IconModule } 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';\n\n@Component({\n selector: 'kirby-menu',\n standalone: true,\n imports: [ButtonComponent, CommonModule, FloatingDirective, IconModule, CardModule, ItemModule],\n templateUrl: './menu.component.html',\n styleUrls: ['./menu.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuComponent implements AfterViewInit, OnDestroy {\n constructor(\n private cdf: ChangeDetectorRef,\n private elementRef: ElementRef<HTMLElement>,\n private zone: NgZone,\n private renderer: Renderer2\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<HTMLElement> \| undefined;\n\n @ContentChild(ButtonComponent, { read: ElementRef }) public userProvidedButton:\n \| ElementRef<HTMLElement>\n \| undefined;\n\n @ViewChild(FloatingDirective)\n private floatingDirective: FloatingDirective;\n\n public FloatingOffset: typeof FloatingOffset = FloatingOffset;\n\n private scrollListenerDisposeFn: EventListenerDisposeFn;\n\n public ngAfterViewInit(): void {\n this.cdf.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.scrollListenerDisposeFn = this.renderer.listen(document, 'ionScroll', () => {\n this.floatingDirective.hide();\n });\n });\n }\n\n ngOnDestroy(): void {\n this.scrollListenerDisposeFn?.();\n }\n}\n","<div class=\"button-container\" #buttonContainer>\n <ng-content select=\"button[kirby-button]\"></ng-content>\n <ng-container ngIf=\"!userProvidedButton\">\n <button\n kirby-button\n [size]=\"buttonSize\"\n [disabled]=\"isDisabled\"\n type=\"button\"\n [attentionLevel]=\"attentionLevel\"\n #defaultButton\n >\n <kirby-icon [name]=\"'more'\"></kirby-icon>\n </button>\n </ng-container>\n</div>\n<kirby-card\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 [ngStyle]=\"{\n minWidth: minWidth ? minWidth + 'px' : null\n }\"\n class=\"menu-popover\"\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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~~,+IAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,EAAE,QAAA,EAAA,2CAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,cAAA,EAAA,YAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,cAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,YAAY,EAAE,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,iBAAiB,uSAAE,UAAU,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,UAAU,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,oBAAA,EAAA,YAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,UAAU,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA;;2FAKnF,aAAa,EAAA,UAAA,EAAA,CAAA;kBARzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cACV,IAAI,EAAA,OAAA,EACP,CAAC,eAAe,EAAE,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAC,EAG9E,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,yiCAAA,EAAA,MAAA,EAAA,CAAA~~,+IAAA~~,CAAA,EAAA,CAAA;8KAU/B,UAAU,EAAA,CAAA;sBAAzB,KAAK;gBAEU,UAAU,EAAA,CAAA;sBAAzB,KAAK;gBAEU,SAAS,EAAA,CAAA;sBAAxB,KAAK;gBAEU,cAAc,EAAA,CAAA;sBAA7B,KAAK;gBAEU,QAAQ,EAAA,CAAA;sBAAvB,KAAK;gBAEU,eAAe,EAAA,CAAA;sBAA9B,KAAK;gBAEU,kBAAkB,EAAA,CAAA;sBAAjC,KAAK;gBAEU,aAAa,EAAA,CAAA;sBAA5B,KAAK;gBAEU,aAAa,EAAA,CAAA;sBAA5B,KAAK;gBAEU,gBAAgB,EAAA,CAAA;sBAA/B,KAAK;gBAEU,eAAe,EAAA,CAAA;sBAA9B,KAAK;gBAEU,KAAK,EAAA,CAAA;sBAApB,KAAK;gBAKU,QAAQ,EAAA,CAAA;sBAAvB,KAAK;gBAGC,sBAAsB,EAAA,CAAA;sBAD5B,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,iBAAiB,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAI3C,oBAAoB,EAAA,CAAA;sBAD1B,SAAS;AAAC,gBAAA,IAAA,EAAA,CAAA,eAAe,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAGY,kBAAkB,EAAA,CAAA;sBAA7E,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,eAAe,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAK3C,iBAAiB,EAAA,CAAA;sBADxB,SAAS;uBAAC,iBAAiB,CAAA;;;AEnF9B;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-menu.mjs","sources":["../../../../libs/designsystem/menu/src/menu.component.ts","../../../../libs/designsystem/menu/src/menu.component.html","../../../../libs/designsystem/menu/src/kirbydesign-designsystem-menu.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ContentChild,\n ElementRef,\n Input,\n NgZone,\n OnDestroy,\n Renderer2,\n ViewChild,\n} from '@angular/core';\nimport { Placement } from '@floating-ui/dom';\n\nimport { ItemModule } from '@kirbydesign/designsystem/item';\nimport { CardModule } from '@kirbydesign/designsystem/card';\nimport { IconModule } 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';\n\n@Component({\n selector: 'kirby-menu',\n standalone: true,\n imports: [ButtonComponent, CommonModule, FloatingDirective, IconModule, CardModule, ItemModule],\n templateUrl: './menu.component.html',\n styleUrls: ['./menu.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MenuComponent implements AfterViewInit, OnDestroy {\n constructor(\n private cdf: ChangeDetectorRef,\n private elementRef: ElementRef<HTMLElement>,\n private zone: NgZone,\n private renderer: Renderer2\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<HTMLElement> \| undefined;\n\n @ContentChild(ButtonComponent, { read: ElementRef }) public userProvidedButton:\n \| ElementRef<HTMLElement>\n \| undefined;\n\n @ViewChild(FloatingDirective)\n private floatingDirective: FloatingDirective;\n\n public FloatingOffset: typeof FloatingOffset = FloatingOffset;\n\n private scrollListenerDisposeFn: EventListenerDisposeFn;\n\n public ngAfterViewInit(): void {\n this.cdf.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.scrollListenerDisposeFn = this.renderer.listen(document, 'ionScroll', () => {\n this.floatingDirective.hide();\n });\n });\n }\n\n ngOnDestroy(): void {\n this.scrollListenerDisposeFn?.();\n }\n}\n","<div class=\"button-container\" #buttonContainer>\n <ng-content select=\"button[kirby-button]\"></ng-content>\n <ng-container ngIf=\"!userProvidedButton\">\n <button\n kirby-button\n [size]=\"buttonSize\"\n [disabled]=\"isDisabled\"\n type=\"button\"\n [attentionLevel]=\"attentionLevel\"\n #defaultButton\n >\n <kirby-icon [name]=\"'more'\"></kirby-icon>\n </button>\n </ng-container>\n</div>\n<kirby-card\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 [ngStyle]=\"{\n minWidth: minWidth ? minWidth + 'px' : null\n }\"\n class=\"menu-popover\"\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-v2.mjs CHANGED Viewed

@@ -129,11 +129,11 @@ class ModalV2FooterComponent {
         this.type = 'fixed';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ModalV2FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ModalV2FooterComponent, selector: "kirby-modal-v2-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, ngImport: i0, template: "<ion-footer>\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-prev]\"></ng-content>\n  </div>\n\n  <div class=\"default-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-next]\"></ng-content>\n  </div>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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-elevation: none;--kirby-divider-color: var(--kirby-background-color);display:grid;grid-template-rows:40px;grid-template-columns:40px 1fr 40px;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:24px;padding-bottom:calc(24px + var(--kirby-modal-footer-safe-area-bottom, 0px))}ion-footer .default-content{display:flex;align-items:center;justify-content:center}ion-footer .nav-button{display:flex;justify-content:center;align-items:center}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ModalV2FooterComponent, selector: "kirby-modal-v2-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, ngImport: i0, template: "<ion-footer>\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-prev]\"></ng-content>\n  </div>\n\n  <div class=\"default-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-next]\"></ng-content>\n  </div>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:grid;grid-template-rows:40px;grid-template-columns:40px 1fr 40px;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:24px;padding-bottom:calc(24px + var(--kirby-modal-footer-safe-area-bottom, 0px))}ion-footer .default-content{display:flex;align-items:center;justify-content:center}ion-footer .nav-button{display:flex;justify-content:center;align-items:center}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ModalV2FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-modal-v2-footer', template: "<ion-footer>\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-prev]\"></ng-content>\n  </div>\n\n  <div class=\"default-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-next]\"></ng-content>\n  </div>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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-elevation: none;--kirby-divider-color: var(--kirby-background-color);display:grid;grid-template-rows:40px;grid-template-columns:40px 1fr 40px;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:24px;padding-bottom:calc(24px + var(--kirby-modal-footer-safe-area-bottom, 0px))}ion-footer .default-content{display:flex;align-items:center;justify-content:center}ion-footer .nav-button{display:flex;justify-content:center;align-items:center}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
+            args: [{ selector: 'kirby-modal-v2-footer', template: "<ion-footer>\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-prev]\"></ng-content>\n  </div>\n\n  <div class=\"default-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-next]\"></ng-content>\n  </div>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:grid;grid-template-rows:40px;grid-template-columns:40px 1fr 40px;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:24px;padding-bottom:calc(24px + var(--kirby-modal-footer-safe-area-bottom, 0px))}ion-footer .default-content{display:flex;align-items:center;justify-content:center}ion-footer .nav-button{display:flex;justify-content:center;align-items:center}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
         }], propDecorators: { snapToKeyboard: [{
                 type: HostBinding,
                 args: ['class.snap-to-keyboard']

package/fesm2022/kirbydesign-designsystem-modal-v2.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-modal-v2.mjs","sources":["../../../../libs/designsystem/modal/v2/src/modal-routing/modal-routing.component.ts","../../../../libs/designsystem/modal/v2/src/modal-routing/modal-routing.component.html","../../../../libs/designsystem/modal/v2/src/modal/modal.component.ts","../../../../libs/designsystem/modal/v2/src/modal/modal.component.html","../../../../libs/designsystem/modal/v2/src/footer/footer.component.ts","../../../../libs/designsystem/modal/v2/src/footer/footer.component.html","../../../../libs/designsystem/modal/v2/src/wrapper/wrapper.component.ts","../../../../libs/designsystem/modal/v2/src/wrapper/wrapper.component.html","../../../../libs/designsystem/modal/v2/src/services/modal.controller.ts","../../../../libs/designsystem/modal/v2/src/kirby-modal.module.ts","../../../../libs/designsystem/modal/v2/src/kirbydesign-designsystem-modal-v2.ts"],"sourcesContent":["import { Component, OnDestroy, ViewChild } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { IonModal } from '@ionic/angular';\n\n@Component({\n selector: 'kirby-modal-v2-routing-wrapper',\n templateUrl: './modal-routing.component.html',\n styleUrls: ['./modal-routing.component.scss'],\n})\nexport class ModalV2RoutingComponent implements OnDestroy {\n constructor(private router: Router, private route: ActivatedRoute) {}\n\n @ViewChild(IonModal) modal: IonModal;\n\n isOpen = true;\n\n closeModal() {\n this.isOpen = false;\n this.router.navigate([{ outlets: { 'modal-v2': null } }], {\n relativeTo: this.route.parent,\n });\n }\n\n ngOnDestroy() {\n this.modal.dismiss(null, 'cancel');\n }\n}\n","<ion-modal [isOpen]=\"isOpen\" (willDismiss)=\"closeModal()\" class=\"kirby-modal-v2\">\n <ng-template>\n <div fxFlex class=\"outlet-container\">\n <router-outlet></router-outlet>\n </div>\n </ng-template>\n</ion-modal>\n","import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';\nimport { IonContent, IonModal } from '@ionic/angular';\nimport { OverlayEventDetail } from '@ionic/core/components';\nimport { KirbyAnimation } from '@kirbydesign/designsystem/helpers';\n\ntype Flavor = 'modal' \| 'drawer';\ntype Size = 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg';\ntype SizeTemp = 'md';\n\n@Component({\n selector: 'kirby-modal-v2',\n templateUrl: './modal.component.html',\n styleUrls: ['./modal.component.scss'],\n})\nexport class ModalV2Component {\n @ViewChild(IonModal) modal: IonModal;\n @ViewChild(IonModal, { static: true, read: ElementRef })\n modalElement: ElementRef<HTMLElement>;\n @ViewChild(IonContent) ionContent: IonContent;\n\n @Input() flavor: Flavor = 'modal';\n @Input() open = false;\n @Input() canDismiss: boolean \| (() => Promise<boolean>) = true;\n @Input() title = '';\n @Input() hasCollapsibleTitle = false;\n @Input() scrollDisabled = false;\n @Input() breakpoints: number[];\n @Input() initialBreakpoint;\n @Input() size: SizeTemp = 'md';\n @Input() set height(userDefinedHeight: string) {\n // If the user has defined a height, then we override the --height\n // specified by the 'size' classes in /core/src/scss/_global-styles.scss\n this.modalElement.nativeElement.style.setProperty('--height', userDefinedHeight);\n }\n\n @Output() willPresent = new EventEmitter<CustomEvent<OverlayEventDetail>>();\n @Output() didPresent = new EventEmitter<CustomEvent<OverlayEventDetail>>();\n @Output() didDismiss = new EventEmitter<CustomEvent<OverlayEventDetail>>();\n @Output() willDismiss = new EventEmitter<CustomEvent<OverlayEventDetail>>();\n\n _closeModal() {\n this.modal.dismiss(null, 'cancel');\n }\n\n _onWillPresent(event: CustomEvent<OverlayEventDetail>) {\n this.willPresent.emit(event);\n }\n\n _onDidPresent(event: CustomEvent<OverlayEventDetail>) {\n this.didPresent.emit(event);\n }\n\n _onWillDismiss(event: CustomEvent<OverlayEventDetail>) {\n this.willDismiss.emit(event);\n }\n\n _onDidDismiss(event: CustomEvent<OverlayEventDetail>) {\n this.didDismiss.emit(event);\n }\n\n public scrollToTop(scrollDuration?: KirbyAnimation.Duration) {\n this.ionContent.scrollToTop(scrollDuration \|\| 0);\n }\n\n public scrollToBottom(scrollDuration?: KirbyAnimation.Duration) {\n this.ionContent.scrollToBottom(scrollDuration \|\| 0);\n }\n}\n","<ion-modal\n class=\"kirby-modal-v2\"\n [isOpen]=\"open\"\n [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n [handle]=\"false\"\n [canDismiss]=\"canDismiss\"\n [ngClass]=\"size\"\n (willPresent)=\"_onWillPresent($event)\"\n (didPresent)=\"_onDidPresent($event)\"\n (willDismiss)=\"_onWillDismiss($event)\"\n (didDismiss)=\"_onDidDismiss($event)\"\n>\n <ng-template>\n <ion-header class=\"modal-header\">\n <ion-toolbar>\n <ng-content select=\"[header-start]\"></ng-content>\n <ion-buttons slot=\"start\" ngIf=\"flavor === 'drawer'\">\n <ng-container\n ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n ></ng-container>\n </ion-buttons>\n <ion-title>{{ title }}</ion-title>\n <ion-buttons slot=\"end\" ngIf=\"flavor === 'modal'\">\n <ng-container ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" ngIf=\"flavor === 'drawer'\">\n <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n <ion-header ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-large\">{{ title }}</span>\n </ion-toolbar>\n </ion-header>\n <ng-container>\n <ng-content></ng-content>\n </ng-container>\n </ion-content>\n <ng-content select=\"[footer]\"></ng-content>\n </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n","import { Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-modal-v2-footer',\n templateUrl: './footer.component.html',\n styleUrls: ['./footer.component.scss'],\n})\nexport class ModalV2FooterComponent {\n @HostBinding('class.snap-to-keyboard')\n @Input()\n snapToKeyboard = false;\n\n @HostBinding('class')\n @Input()\n type: 'inline' \| 'fixed' = 'fixed';\n}\n","<ion-footer>\n <div class=\"nav-button\">\n <ng-content select=\"[nav-prev]\"></ng-content>\n </div>\n\n <div class=\"default-content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"nav-button\">\n <ng-content select=\"[nav-next]\"></ng-content>\n </div>\n</ion-footer>\n","import { Component, ElementRef, Input, OnInit } from '@angular/core';\n\nexport type Flavor = 'modal' \| 'drawer';\n@Component({\n selector: 'kirby-modal-v2-wrapper',\n templateUrl: './wrapper.component.html',\n styleUrls: ['./wrapper.component.scss'],\n})\nexport class ModalV2WrapperComponent implements OnInit {\n constructor(private elementRef: ElementRef<HTMLElement>) {}\n\n private ionModalElement?: HTMLIonModalElement;\n\n @Input() flavor: Flavor = 'modal';\n @Input() title = '';\n @Input() hasCollapsibleTitle = true;\n @Input() scrollDisabled = false;\n\n ngOnInit() {\n this.ionModalElement = this.elementRef.nativeElement.closest('ion-modal');\n }\n\n close() {\n this.ionModalElement.dismiss();\n }\n}\n","<ion-header>\n <ion-toolbar>\n <ng-content select=\"[header-start]\"></ng-content>\n <ion-buttons slot=\"start\" ngIf=\"flavor === 'drawer'\">\n <ng-container ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-title>{{ title }}</ion-title>\n <ion-buttons slot=\"end\" ngIf=\"flavor === 'modal'\">\n <ng-container ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" ngIf=\"flavor === 'drawer'\">\n <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n <ion-header ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-large\">{{ title }}</span>\n </ion-toolbar>\n </ion-header>\n <ng-container>\n <ng-content></ng-content>\n </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n","import { Injectable } from '@angular/core';\nimport { ModalController } from '@ionic/angular';\nimport { from, map, Observable, switchMap, take, tap } from 'rxjs';\nimport { OverlayEventDetail } from '@ionic/core/components';\n\nexport type ModalFlavor = 'modal' \| 'drawer';\ntype Size = 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg';\ntype SizeTemp = 'md';\n\nexport type ModalV2Config = {\n flavor?: ModalFlavor;\n component: any;\n componentProps?: { [key: string]: any };\n cssClass?: string \| string[];\n canDismiss?: boolean \| (() => Promise<boolean>);\n backdropDismiss?: boolean;\n showBackdrop?: boolean;\n breakpoints?: number[];\n initialBreakpoint?: number;\n size?: SizeTemp;\n height?: string;\n};\n\ntype ModalDismissObservables = {\n onWillDismiss: Observable<OverlayEventDetail>;\n onDidDismiss: Observable<OverlayEventDetail>;\n};\n@Injectable()\nexport class ModalV2Controller {\n private isModalOpening = false;\n\n constructor(private ionicModalController: ModalController) {}\n\n public showModal(config: ModalV2Config): ModalDismissObservables {\n if (this.isModalOpening) return;\n\n let customCssClasses: string[] = [];\n if (config.cssClass) {\n customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];\n }\n\n const modal$ = from(\n this.ionicModalController.create({\n component: config.component,\n componentProps: config.componentProps,\n canDismiss: config.canDismiss,\n backdropDismiss: config.backdropDismiss,\n showBackdrop: config.showBackdrop,\n breakpoints: config.flavor === 'drawer' ? config.breakpoints : undefined,\n initialBreakpoint: config.flavor === 'drawer' ? config.initialBreakpoint : undefined,\n handle: false,\n cssClass: ['kirby-modal-v2', config.size ? config.size : 'md', ...customCssClasses],\n })\n );\n\n this.isModalOpening = true;\n\n const onWillDismiss$ = modal$.pipe(\n map((modal) => {\n if (config.height) {\n modal.style.setProperty('--height', config.height);\n }\n return modal;\n }),\n tap((modal) => from(modal.present())),\n switchMap((modal) => modal.onWillDismiss()),\n take(1)\n );\n\n this.isModalOpening = false;\n\n return {\n onWillDismiss: onWillDismiss$,\n onDidDismiss: onWillDismiss$,\n };\n }\n\n public closeModal(data?: unknown, role?: string): void {\n this.ionicModalController.dismiss(data, role);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { IonicModule } from '@ionic/angular';\nimport { CommonModule } from '@angular/common';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { RouterModule } from '@angular/router';\nimport { ModalV2Component } from './modal/modal.component';\nimport { ModalV2FooterComponent } from './footer/footer.component';\nimport { ModalV2WrapperComponent } from './wrapper/wrapper.component';\nimport { ModalV2Controller } from './services/modal.controller';\nimport { ModalV2RoutingComponent } from './modal-routing/modal-routing.component';\n\nconst COMPONENT_DECLARATIONS = [\n ModalV2Component,\n ModalV2FooterComponent,\n ModalV2WrapperComponent,\n ModalV2RoutingComponent,\n];\n@NgModule({\n declarations: COMPONENT_DECLARATIONS,\n imports: [CommonModule, IonicModule, IconModule, ButtonComponent, RouterModule],\n exports: COMPONENT_DECLARATIONS,\n providers: [ModalV2Controller],\n})\nexport class KirbyModalModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1"],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-modal-v2.mjs","sources":["../../../../libs/designsystem/modal/v2/src/modal-routing/modal-routing.component.ts","../../../../libs/designsystem/modal/v2/src/modal-routing/modal-routing.component.html","../../../../libs/designsystem/modal/v2/src/modal/modal.component.ts","../../../../libs/designsystem/modal/v2/src/modal/modal.component.html","../../../../libs/designsystem/modal/v2/src/footer/footer.component.ts","../../../../libs/designsystem/modal/v2/src/footer/footer.component.html","../../../../libs/designsystem/modal/v2/src/wrapper/wrapper.component.ts","../../../../libs/designsystem/modal/v2/src/wrapper/wrapper.component.html","../../../../libs/designsystem/modal/v2/src/services/modal.controller.ts","../../../../libs/designsystem/modal/v2/src/kirby-modal.module.ts","../../../../libs/designsystem/modal/v2/src/kirbydesign-designsystem-modal-v2.ts"],"sourcesContent":["import { Component, OnDestroy, ViewChild } from '@angular/core';\nimport { ActivatedRoute, Router } from '@angular/router';\nimport { IonModal } from '@ionic/angular';\n\n@Component({\n selector: 'kirby-modal-v2-routing-wrapper',\n templateUrl: './modal-routing.component.html',\n styleUrls: ['./modal-routing.component.scss'],\n})\nexport class ModalV2RoutingComponent implements OnDestroy {\n constructor(private router: Router, private route: ActivatedRoute) {}\n\n @ViewChild(IonModal) modal: IonModal;\n\n isOpen = true;\n\n closeModal() {\n this.isOpen = false;\n this.router.navigate([{ outlets: { 'modal-v2': null } }], {\n relativeTo: this.route.parent,\n });\n }\n\n ngOnDestroy() {\n this.modal.dismiss(null, 'cancel');\n }\n}\n","<ion-modal [isOpen]=\"isOpen\" (willDismiss)=\"closeModal()\" class=\"kirby-modal-v2\">\n <ng-template>\n <div fxFlex class=\"outlet-container\">\n <router-outlet></router-outlet>\n </div>\n </ng-template>\n</ion-modal>\n","import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';\nimport { IonContent, IonModal } from '@ionic/angular';\nimport { OverlayEventDetail } from '@ionic/core/components';\nimport { KirbyAnimation } from '@kirbydesign/designsystem/helpers';\n\ntype Flavor = 'modal' \| 'drawer';\ntype Size = 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg';\ntype SizeTemp = 'md';\n\n@Component({\n selector: 'kirby-modal-v2',\n templateUrl: './modal.component.html',\n styleUrls: ['./modal.component.scss'],\n})\nexport class ModalV2Component {\n @ViewChild(IonModal) modal: IonModal;\n @ViewChild(IonModal, { static: true, read: ElementRef })\n modalElement: ElementRef<HTMLElement>;\n @ViewChild(IonContent) ionContent: IonContent;\n\n @Input() flavor: Flavor = 'modal';\n @Input() open = false;\n @Input() canDismiss: boolean \| (() => Promise<boolean>) = true;\n @Input() title = '';\n @Input() hasCollapsibleTitle = false;\n @Input() scrollDisabled = false;\n @Input() breakpoints: number[];\n @Input() initialBreakpoint;\n @Input() size: SizeTemp = 'md';\n @Input() set height(userDefinedHeight: string) {\n // If the user has defined a height, then we override the --height\n // specified by the 'size' classes in /core/src/scss/_global-styles.scss\n this.modalElement.nativeElement.style.setProperty('--height', userDefinedHeight);\n }\n\n @Output() willPresent = new EventEmitter<CustomEvent<OverlayEventDetail>>();\n @Output() didPresent = new EventEmitter<CustomEvent<OverlayEventDetail>>();\n @Output() didDismiss = new EventEmitter<CustomEvent<OverlayEventDetail>>();\n @Output() willDismiss = new EventEmitter<CustomEvent<OverlayEventDetail>>();\n\n _closeModal() {\n this.modal.dismiss(null, 'cancel');\n }\n\n _onWillPresent(event: CustomEvent<OverlayEventDetail>) {\n this.willPresent.emit(event);\n }\n\n _onDidPresent(event: CustomEvent<OverlayEventDetail>) {\n this.didPresent.emit(event);\n }\n\n _onWillDismiss(event: CustomEvent<OverlayEventDetail>) {\n this.willDismiss.emit(event);\n }\n\n _onDidDismiss(event: CustomEvent<OverlayEventDetail>) {\n this.didDismiss.emit(event);\n }\n\n public scrollToTop(scrollDuration?: KirbyAnimation.Duration) {\n this.ionContent.scrollToTop(scrollDuration \|\| 0);\n }\n\n public scrollToBottom(scrollDuration?: KirbyAnimation.Duration) {\n this.ionContent.scrollToBottom(scrollDuration \|\| 0);\n }\n}\n","<ion-modal\n class=\"kirby-modal-v2\"\n [isOpen]=\"open\"\n [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n [handle]=\"false\"\n [canDismiss]=\"canDismiss\"\n [ngClass]=\"size\"\n (willPresent)=\"_onWillPresent($event)\"\n (didPresent)=\"_onDidPresent($event)\"\n (willDismiss)=\"_onWillDismiss($event)\"\n (didDismiss)=\"_onDidDismiss($event)\"\n>\n <ng-template>\n <ion-header class=\"modal-header\">\n <ion-toolbar>\n <ng-content select=\"[header-start]\"></ng-content>\n <ion-buttons slot=\"start\" ngIf=\"flavor === 'drawer'\">\n <ng-container\n ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n ></ng-container>\n </ion-buttons>\n <ion-title>{{ title }}</ion-title>\n <ion-buttons slot=\"end\" ngIf=\"flavor === 'modal'\">\n <ng-container ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" ngIf=\"flavor === 'drawer'\">\n <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n </ion-buttons>\n </ion-toolbar>\n </ion-header>\n\n <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n <ion-header ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-large\">{{ title }}</span>\n </ion-toolbar>\n </ion-header>\n <ng-container>\n <ng-content></ng-content>\n </ng-container>\n </ion-content>\n <ng-content select=\"[footer]\"></ng-content>\n </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n","import { Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-modal-v2-footer',\n templateUrl: './footer.component.html',\n styleUrls: ['./footer.component.scss'],\n})\nexport class ModalV2FooterComponent {\n @HostBinding('class.snap-to-keyboard')\n @Input()\n snapToKeyboard = false;\n\n @HostBinding('class')\n @Input()\n type: 'inline' \| 'fixed' = 'fixed';\n}\n","<ion-footer>\n <div class=\"nav-button\">\n <ng-content select=\"[nav-prev]\"></ng-content>\n </div>\n\n <div class=\"default-content\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"nav-button\">\n <ng-content select=\"[nav-next]\"></ng-content>\n </div>\n</ion-footer>\n","import { Component, ElementRef, Input, OnInit } from '@angular/core';\n\nexport type Flavor = 'modal' \| 'drawer';\n@Component({\n selector: 'kirby-modal-v2-wrapper',\n templateUrl: './wrapper.component.html',\n styleUrls: ['./wrapper.component.scss'],\n})\nexport class ModalV2WrapperComponent implements OnInit {\n constructor(private elementRef: ElementRef<HTMLElement>) {}\n\n private ionModalElement?: HTMLIonModalElement;\n\n @Input() flavor: Flavor = 'modal';\n @Input() title = '';\n @Input() hasCollapsibleTitle = true;\n @Input() scrollDisabled = false;\n\n ngOnInit() {\n this.ionModalElement = this.elementRef.nativeElement.closest('ion-modal');\n }\n\n close() {\n this.ionModalElement.dismiss();\n }\n}\n","<ion-header>\n <ion-toolbar>\n <ng-content select=\"[header-start]\"></ng-content>\n <ion-buttons slot=\"start\" ngIf=\"flavor === 'drawer'\">\n <ng-container ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-title>{{ title }}</ion-title>\n <ion-buttons slot=\"end\" ngIf=\"flavor === 'modal'\">\n <ng-container ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" ngIf=\"flavor === 'drawer'\">\n <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n <ion-header ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n <ion-toolbar>\n <span class=\"kirby-text-large\">{{ title }}</span>\n </ion-toolbar>\n </ion-header>\n <ng-container>\n <ng-content></ng-content>\n </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n","import { Injectable } from '@angular/core';\nimport { ModalController } from '@ionic/angular';\nimport { from, map, Observable, switchMap, take, tap } from 'rxjs';\nimport { OverlayEventDetail } from '@ionic/core/components';\n\nexport type ModalFlavor = 'modal' \| 'drawer';\ntype Size = 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg';\ntype SizeTemp = 'md';\n\nexport type ModalV2Config = {\n flavor?: ModalFlavor;\n component: any;\n componentProps?: { [key: string]: any };\n cssClass?: string \| string[];\n canDismiss?: boolean \| (() => Promise<boolean>);\n backdropDismiss?: boolean;\n showBackdrop?: boolean;\n breakpoints?: number[];\n initialBreakpoint?: number;\n size?: SizeTemp;\n height?: string;\n};\n\ntype ModalDismissObservables = {\n onWillDismiss: Observable<OverlayEventDetail>;\n onDidDismiss: Observable<OverlayEventDetail>;\n};\n@Injectable()\nexport class ModalV2Controller {\n private isModalOpening = false;\n\n constructor(private ionicModalController: ModalController) {}\n\n public showModal(config: ModalV2Config): ModalDismissObservables {\n if (this.isModalOpening) return;\n\n let customCssClasses: string[] = [];\n if (config.cssClass) {\n customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];\n }\n\n const modal$ = from(\n this.ionicModalController.create({\n component: config.component,\n componentProps: config.componentProps,\n canDismiss: config.canDismiss,\n backdropDismiss: config.backdropDismiss,\n showBackdrop: config.showBackdrop,\n breakpoints: config.flavor === 'drawer' ? config.breakpoints : undefined,\n initialBreakpoint: config.flavor === 'drawer' ? config.initialBreakpoint : undefined,\n handle: false,\n cssClass: ['kirby-modal-v2', config.size ? config.size : 'md', ...customCssClasses],\n })\n );\n\n this.isModalOpening = true;\n\n const onWillDismiss$ = modal$.pipe(\n map((modal) => {\n if (config.height) {\n modal.style.setProperty('--height', config.height);\n }\n return modal;\n }),\n tap((modal) => from(modal.present())),\n switchMap((modal) => modal.onWillDismiss()),\n take(1)\n );\n\n this.isModalOpening = false;\n\n return {\n onWillDismiss: onWillDismiss$,\n onDidDismiss: onWillDismiss$,\n };\n }\n\n public closeModal(data?: unknown, role?: string): void {\n this.ionicModalController.dismiss(data, role);\n }\n}\n","import { NgModule } from '@angular/core';\nimport { IonicModule } from '@ionic/angular';\nimport { CommonModule } from '@angular/common';\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { RouterModule } from '@angular/router';\nimport { ModalV2Component } from './modal/modal.component';\nimport { ModalV2FooterComponent } from './footer/footer.component';\nimport { ModalV2WrapperComponent } from './wrapper/wrapper.component';\nimport { ModalV2Controller } from './services/modal.controller';\nimport { ModalV2RoutingComponent } from './modal-routing/modal-routing.component';\n\nconst COMPONENT_DECLARATIONS = [\n ModalV2Component,\n ModalV2FooterComponent,\n ModalV2WrapperComponent,\n ModalV2RoutingComponent,\n];\n@NgModule({\n declarations: COMPONENT_DECLARATIONS,\n imports: [CommonModule, IonicModule, IconModule, ButtonComponent, RouterModule],\n exports: COMPONENT_DECLARATIONS,\n providers: [ModalV2Controller],\n})\nexport class KirbyModalModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":["i1"],"mappings":"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"}

package/fesm2022/kirbydesign-designsystem-modal.mjs CHANGED Viewed

@@ -286,11 +286,11 @@ class ActionSheetComponent {
         this.cancel.emit();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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  <kirby-card-header\n    *ngIf=\"header\"\n    [title]=\"header\"\n    [isTitleBold]=\"true\"\n    [subtitle]=\"subheader\"\n  ></kirby-card-header>\n  <button\n    kirby-button\n    expand=\"block\"\n    size=\"lg\"\n    [noDecoration]=\"true\"\n    (click)=\"onItemSelect(item)\"\n    *ngFor=\"let item of items\"\n  >\n    {{ item.text }}\n  </button>\n</kirby-card>\n<button\n  *ngIf=\"!hideCancel\"\n  kirby-button\n  class=\"cancel-btn\"\n  size=\"lg\"\n  attentionLevel=\"3\"\n  (click)=\"onCancel()\"\n>\n  {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--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))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}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{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat"] }, { kind: "component", type: i1$1.CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged", "hasPadding"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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  <kirby-card-header\n    *ngIf=\"header\"\n    [title]=\"header\"\n    [isTitleBold]=\"true\"\n    [subtitle]=\"subheader\"\n  ></kirby-card-header>\n  <button\n    kirby-button\n    expand=\"block\"\n    size=\"lg\"\n    [noDecoration]=\"true\"\n    (click)=\"onItemSelect(item)\"\n    *ngFor=\"let item of items\"\n  >\n    {{ item.text }}\n  </button>\n</kirby-card>\n<button\n  *ngIf=\"!hideCancel\"\n  kirby-button\n  class=\"cancel-btn\"\n  size=\"lg\"\n  attentionLevel=\"3\"\n  (click)=\"onCancel()\"\n>\n  {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--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))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}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{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$1.CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "flat"] }, { kind: "component", type: i1$1.CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged", "hasPadding"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CardModule, ButtonComponent, CommonModule], selector: 'kirby-action-sheet', template: "<kirby-card>\n  <kirby-card-header\n    *ngIf=\"header\"\n    [title]=\"header\"\n    [isTitleBold]=\"true\"\n    [subtitle]=\"subheader\"\n  ></kirby-card-header>\n  <button\n    kirby-button\n    expand=\"block\"\n    size=\"lg\"\n    [noDecoration]=\"true\"\n    (click)=\"onItemSelect(item)\"\n    *ngFor=\"let item of items\"\n  >\n    {{ item.text }}\n  </button>\n</kirby-card>\n<button\n  *ngIf=\"!hideCancel\"\n  kirby-button\n  class=\"cancel-btn\"\n  size=\"lg\"\n  attentionLevel=\"3\"\n  (click)=\"onCancel()\"\n>\n  {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--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))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}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{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"] }]
+            args: [{ standalone: true, imports: [CardModule, ButtonComponent, CommonModule], selector: 'kirby-action-sheet', template: "<kirby-card>\n  <kirby-card-header\n    *ngIf=\"header\"\n    [title]=\"header\"\n    [isTitleBold]=\"true\"\n    [subtitle]=\"subheader\"\n  ></kirby-card-header>\n  <button\n    kirby-button\n    expand=\"block\"\n    size=\"lg\"\n    [noDecoration]=\"true\"\n    (click)=\"onItemSelect(item)\"\n    *ngFor=\"let item of items\"\n  >\n    {{ item.text }}\n  </button>\n</kirby-card>\n<button\n  *ngIf=\"!hideCancel\"\n  kirby-button\n  class=\"cancel-btn\"\n  size=\"lg\"\n  attentionLevel=\"3\"\n  (click)=\"onCancel()\"\n>\n  {{ cancelButtonText }}\n</button>\n", styles: [":host{--kirby-internal-margin-horizontal-default: 32px;--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))}@media (max-width: 320px){:host{--kirby-internal-margin-horizontal-default: 16px}}@media (hover: hover) and (pointer: fine){:host button[kirby-button].no-decoration:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}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{font-weight:700;margin-top:16px;margin-bottom:24px;pointer-events:auto}@media (hover: hover) and (pointer: fine){.cancel-btn:focus{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}.cancel-btn:focus:not(:focus-visible){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}.cancel-btn:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}\n"] }]
         }], propDecorators: { cancelButtonText: [{
                 type: Input
             }], hideCancel: [{
@@ -669,6 +669,7 @@ class ModalWrapperComponent {
         this.initializeModalRoute();
         this.listenForIonModalDidPresent();
         this.listenForIonModalWillDismiss();
+        this.listenForScroll();
         this.initializeResizeModalToModalWrapper();
         this.componentPropsInjector = Injector.create({
             providers: [{ provide: COMPONENT_PROPS, useValue: this.config.componentProps }],
@@ -679,7 +680,6 @@ class ModalWrapperComponent {
         if (this.toolbarButtonsQuery) {
             this.toolbarButtons = this.toolbarButtonsQuery.map((buttonRef) => buttonRef.nativeElement);
         }
-        this.initializeContentScrollListening();
     }
     set currentFooter(footer) {
         if (footer !== null) {
@@ -806,16 +806,25 @@ class ModalWrapperComponent {
             });
         }
     }
-    /*
-     * Runs scroll subscription outside zone to avoid excessive amount of CD cycles
-     * when ionScroll emits.
-     */
-    initializeContentScrollListening() {
+    listenForScroll() {
+        const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`;
+        const mediaQuery = this.windowRef.nativeWindow.matchMedia(query);
+        const enableScrollEvents = (listOrEvent) => {
+            const isDesktop = listOrEvent.matches;
+            this.scrollEventsEnabled = !isDesktop;
+        };
+        enableScrollEvents(mediaQuery);
+        mediaQuery.onchange = enableScrollEvents;
+        // Runs scroll subscription outside zone to avoid excessive amount of CD cycles
+        // when ionScroll emits.
         this.zone.runOutsideAngular(() => {
-            this.contentScrolled$ = this.ionContent.ionScroll.pipe(debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.destroy$));
-            this.contentScrolled$.subscribe((scrollInfo) => {
-                if (scrollInfo.scrollTop > contentScrolledOffsetInPixels !== this.isContentScrolled) {
-                    this.isContentScrolled = !this.isContentScrolled;
+            // Always subscribe as ionScroll only emits when scrollEventsEnabled is true
+            this.ionContent.ionScroll
+                .pipe(debounceTime(contentScrollDebounceTimeInMS), map((event) => event.detail), takeUntil(this.destroy$))
+                .subscribe((scrollInfo) => {
+                const contentScrolledPastOffset = scrollInfo.scrollTop > contentScrolledOffsetInPixels;
+                if (contentScrolledPastOffset !== this.isContentScrolled) {
+                    this.isContentScrolled = contentScrolledPastOffset;
                     this.changeDetector.detectChanges();
                 }
             });
@@ -1002,14 +1011,14 @@ class ModalWrapperComponent {
     /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", type: ModalWrapperComponent, isStandalone: true, selector: "kirby-modal-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()", "window:ionKeyboardDidShow": "_onKeyboardShow($event.detail.keyboardHeight)", "window:keyboardWillShow": "_onKeyboardShow($event.keyboardHeight)", "window:ionKeyboardDidHide": "_onKeyboardHide()", "window:keyboardWillHide": "_onKeyboardHide()", "window:resize": "_onWindowResize()" }, properties: { "class.collapsible-title": "this._hasCollapsibleTitle", "class.drawer": "this._isDrawer" } }, providers: [
             { provide: Modal, useExisting: ModalWrapperComponent },
             { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
-        ], viewQueries: [{ propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionToolbarElement", first: true, predicate: IonToolbar, descendants: true, read: ElementRef, static: true }, { propertyName: "ionTitleElement", first: true, predicate: IonTitle, descendants: true, read: ElementRef, static: true }, { propertyName: "routerOutlet", first: true, predicate: RouterOutlet, descendants: true, static: true }, { propertyName: "_contentTitleElement", first: true, predicate: ["contentTitle"], descendants: true, read: ElementRef }, { propertyName: "toolbarButtonsQuery", predicate: ButtonComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ion-header [class.content-scrolled]=\"isContentScrolled\" (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title></ion-title>\n    <ion-buttons\n      slot=\"secondary\"\n      *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\"\n    >\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    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\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]=\"true\">\n  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-xlarge\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: ["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}@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-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 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: IonicModule }, { kind: "component", type: i1$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i7.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+        ], 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 [class.content-scrolled]=\"isContentScrolled\" (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title></ion-title>\n    <ion-buttons\n      slot=\"secondary\"\n      *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\"\n    >\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    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\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  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-xlarge\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: ["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}@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-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 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: IonicModule }, { kind: "component", type: i1$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1$2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i1$2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i7.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ModalWrapperComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [IonicModule, RouterModule, ButtonComponent, IconModule, CommonModule], selector: 'kirby-modal-wrapper', providers: [
                         { provide: Modal, useExisting: ModalWrapperComponent },
                         { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
-                    ], template: "<ion-header [class.content-scrolled]=\"isContentScrolled\" (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title></ion-title>\n    <ion-buttons\n      slot=\"secondary\"\n      *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\"\n    >\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    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\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]=\"true\">\n  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-xlarge\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: ["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}@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-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 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"] }]
+                    ], template: "<ion-header [class.content-scrolled]=\"isContentScrolled\" (touchstart)=\"onHeaderTouchStart($event)\">\n  <ion-toolbar>\n    <ion-title></ion-title>\n    <ion-buttons\n      slot=\"secondary\"\n      *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\"\n    >\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    <ion-buttons slot=\"primary\">\n      <button\n        kirby-button\n        attentionLevel=\"3\"\n        size=\"md\"\n        [noDecoration]=\"config.interactWithBackground\"\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  <ion-header *ngIf=\"_hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-xlarge\" #contentTitle></span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container\n    *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n  ></ng-container>\n  <router-outlet\n    name=\"kirbyModalWrapperOutlet\"\n    [style.visibility]=\"config.modalRoute ? 'visible' : 'hidden'\"\n  ></router-outlet>\n</ion-content>\n", styles: ["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}@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-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:16px;font-weight:700}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));display:flex;flex-direction:column;--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 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: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1$4.ResizeObserverService }, { type: i1$3.WindowRef }, { type: i3$1.PlatformService }, { type: CanDismissHelper }]; }, propDecorators: { _hasCollapsibleTitle: [{
                 type: HostBinding,
                 args: ['class.collapsible-title']
@@ -1481,6 +1490,15 @@ class ModalHelper {
             ionModal.style.setProperty('--kirby-modal-height', config.customHeight);
         }
         await ionModal.present();
+        /**
+         * Due to somewhat unexpected behavior of the ion-modal not being focused when keyboardClose
+         * is set to false we manually focus it, but only if focus is not already inside the modal
+         * See here: https://github.com/ionic-team/ionic-framework/issues/28775#issuecomment-1875475739
+         */
+        const focusedElementWithinModal = ionModal.contains(document.activeElement);
+        if (!focusedElementWithinModal) {
+            ionModal.focus();
+        }
         // Back button should only be handled manually
         // if the modal is not instantiated through a route.
         if (!config.modalRoute && !config.canDismiss && !alertConfig) {
@@ -1612,17 +1630,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
                 }] }]; } });
 class ModalFooterComponent extends ModalElementComponent {
+    get _cssClass() {
+        return [this.themeColor, this.type].filter((cssClass) => !!cssClass);
+    }
     constructor(elementRef, modalElementsAdvertiser) {
         super(ModalElementType.FOOTER, elementRef, modalElementsAdvertiser);
         this.snapToKeyboard = false;
         this.type = 'fixed';
+        this.themeColor = 'white';
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", 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: "16.2.5", type: ModalFooterComponent, isStandalone: true, selector: "kirby-modal-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, usesInheritance: true, ngImport: i0, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:16px;padding-bottom:calc(12px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.5", 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>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:16px;padding-bottom:calc(12px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "ngmodule", type: IonicModule }, { kind: "component", type: i1$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: ModalFooterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [IonicModule, ThemeColorDirective, CommonModule], selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:16px;padding-bottom:calc(12px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
+            args: [{ standalone: true, imports: [IonicModule, CommonModule], selector: 'kirby-modal-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-footer>\n  <ng-content></ng-content>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}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-elevation: none;--kirby-divider-color: var(--kirby-background-color);box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;display:flex;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:16px;padding-bottom:calc(12px + var(--kirby-modal-footer-safe-area-bottom, 0px))}@media (min-width: 768px){ion-footer{padding:24px}}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ModalElementsAdvertiser, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { snapToKeyboard: [{
@@ -1631,10 +1653,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImpor
             }, {
                 type: Input
             }], type: [{
+                type: Input
+            }], themeColor: [{
+                type: Input
+            }], _cssClass: [{
                 type: HostBinding,
                 args: ['class']
-            }, {
-                type: Input
             }] } });
 /**