@kirbydesign/designsystem 7.1.1 → 7.3.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 (74) hide show
  1. package/README.md +7 -0
  2. package/esm2020/lib/components/button/button.component.mjs +2 -2
  3. package/esm2020/lib/components/calendar/calendar.component.mjs +1 -1
  4. package/esm2020/lib/components/charts/shared/chart-config-service/configs/type.config.mjs +4 -1
  5. package/esm2020/lib/components/charts/shared/chart-js-service/chart-js.service.mjs +7 -4
  6. package/esm2020/lib/components/data-table/data-table.module.mjs +19 -0
  7. package/esm2020/lib/components/data-table/index.mjs +4 -0
  8. package/esm2020/lib/components/data-table/table/table.component.mjs +19 -0
  9. package/esm2020/lib/components/data-table/table-row/table-row.component.mjs +25 -0
  10. package/esm2020/lib/components/dropdown/dropdown.component.mjs +88 -36
  11. package/esm2020/lib/components/fab-sheet/fab-sheet.component.mjs +29 -28
  12. package/esm2020/lib/components/form-field/directives/affix/affix.directive.mjs +20 -0
  13. package/esm2020/lib/components/form-field/form-field.component.mjs +33 -9
  14. package/esm2020/lib/components/form-field/index.mjs +2 -1
  15. package/esm2020/lib/components/icon/kirby-icon-settings.mjs +3 -1
  16. package/esm2020/lib/components/index.mjs +3 -1
  17. package/esm2020/lib/components/item/item.component.mjs +2 -2
  18. package/esm2020/lib/components/modal/services/modal.controller.mjs +3 -3
  19. package/esm2020/lib/components/modal/services/modal.helper.mjs +32 -5
  20. package/esm2020/lib/components/page/index.mjs +2 -1
  21. package/esm2020/lib/components/page/page.component.mjs +20 -3
  22. package/esm2020/lib/components/page/page.module.mjs +8 -4
  23. package/esm2020/lib/components/page-local-navigation/index.mjs +2 -0
  24. package/esm2020/lib/components/page-local-navigation/page-local-navigation-item.mjs +2 -0
  25. package/esm2020/lib/components/page-local-navigation/page-local-navigation.component.mjs +76 -0
  26. package/esm2020/lib/components/tabs/tab-button/tab-button.component.mjs +3 -3
  27. package/esm2020/lib/helpers/chart-config-has-type.mjs +10 -0
  28. package/esm2020/lib/helpers/index.mjs +2 -1
  29. package/esm2020/lib/index.mjs +2 -1
  30. package/esm2020/lib/kirby-experimental.module.mjs +24 -0
  31. package/esm2020/lib/kirby.module.mjs +13 -4
  32. package/esm2020/lib/types/index.mjs +2 -0
  33. package/esm2020/testing-base/lib/components/mock.page.component.mjs +1 -1
  34. package/fesm2015/kirbydesign-designsystem-testing-base.mjs.map +1 -1
  35. package/fesm2015/kirbydesign-designsystem.mjs +883 -578
  36. package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
  37. package/fesm2020/kirbydesign-designsystem-testing-base.mjs.map +1 -1
  38. package/fesm2020/kirbydesign-designsystem.mjs +444 -142
  39. package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
  40. package/icons/svg/update.svg +5 -0
  41. package/icons/svg/user-blocked.svg +5 -0
  42. package/lib/components/avatar/avatar.component.d.ts +1 -1
  43. package/lib/components/button/button.component.d.ts +1 -1
  44. package/lib/components/data-table/data-table.module.d.ts +9 -0
  45. package/lib/components/data-table/index.d.ts +3 -0
  46. package/lib/components/data-table/table/table.component.d.ts +6 -0
  47. package/lib/components/data-table/table-row/table-row.component.d.ts +6 -0
  48. package/lib/components/dropdown/dropdown.component.d.ts +6 -3
  49. package/lib/components/fab-sheet/fab-sheet.component.d.ts +7 -6
  50. package/lib/components/flag/flag.component.d.ts +1 -1
  51. package/lib/components/form-field/directives/affix/affix.directive.d.ts +9 -0
  52. package/lib/components/form-field/form-field.component.d.ts +7 -3
  53. package/lib/components/form-field/index.d.ts +1 -0
  54. package/lib/components/index.d.ts +2 -0
  55. package/lib/components/modal/services/modal.controller.d.ts +1 -1
  56. package/lib/components/modal/services/modal.helper.d.ts +7 -2
  57. package/lib/components/page/index.d.ts +1 -0
  58. package/lib/components/page/page.component.d.ts +8 -1
  59. package/lib/components/page/page.module.d.ts +1 -1
  60. package/lib/components/page-local-navigation/index.d.ts +2 -0
  61. package/lib/components/page-local-navigation/page-local-navigation-item.d.ts +24 -0
  62. package/lib/components/page-local-navigation/page-local-navigation.component.d.ts +21 -0
  63. package/lib/components/progress-circle/progress-circle.component.d.ts +1 -1
  64. package/lib/components/tabs/tab-button/tab-button.component.d.ts +1 -1
  65. package/lib/helpers/chart-config-has-type.d.ts +2 -0
  66. package/lib/helpers/index.d.ts +1 -0
  67. package/lib/index.d.ts +1 -0
  68. package/lib/kirby-experimental.module.d.ts +13 -0
  69. package/lib/kirby.module.d.ts +44 -42
  70. package/lib/types/index.d.ts +1 -0
  71. package/package.json +3 -3
  72. package/polyfills/intersection-observer-polyfill-loader.js +1 -14
  73. package/polyfills/resize-observer-polyfill-loader.js +1 -14
  74. package/src/lib/components/icon/README.md +0 -16
package/fesm2015/kirbydesign-designsystem.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  import { DesignTokenHelper, ColorHelper, capitalizeFirstLetter } from '@kirbydesign/core';
2
2
  export { ColorHelper, DesignTokenHelper, camelToKebabCase, capitalizeFirstLetter, kebabToCamelCase, kebabToTitleCase } from '@kirbydesign/core';
3
3
  import * as i0 from '@angular/core';
4
- import { Directive, Injectable, Component, ChangeDetectionStrategy, HostBinding, Input, Optional, InjectionToken, Injector, HostListener, ElementRef, ContentChild, RendererStyleFlags2, ViewChildren, ViewChild, EventEmitter, Output, ContentChildren, Inject, NgModule, ChangeDetectorRef, NgZone, forwardRef, TemplateRef, LOCALE_ID, SkipSelf, APP_INITIALIZER } from '@angular/core';
4
+ import { Directive, Injectable, Component, ChangeDetectionStrategy, HostBinding, Input, Optional, InjectionToken, Injector, HostListener, ElementRef, ContentChild, RendererStyleFlags2, ViewChildren, ViewChild, ContentChildren, EventEmitter, Output, Inject, NgModule, ChangeDetectorRef, NgZone, forwardRef, TemplateRef, LOCALE_ID, ViewEncapsulation, SkipSelf, APP_INITIALIZER } from '@angular/core';
5
5
  import { trigger, state, style, transition, animate } from '@angular/animations';
6
6
  import * as i1 from '@ionic/angular';
7
- import { IonContent, IonHeader, IonToolbar, IonTitle, createAnimation, IonApp, IonicModule, IonRadio, IonFabButton, IonItemSliding, IonList, IonTabs, IonFooter, IonBackButtonDelegate } from '@ionic/angular';
7
+ import { IonContent, IonHeader, IonToolbar, IonTitle, createAnimation, IonApp, IonicModule, IonRadio, IonFabButton, IonFab, IonItemSliding, IonList, IonTabs, IonFooter, IonBackButtonDelegate } from '@ionic/angular';
8
8
  export { IonRouterOutlet, NavController } from '@ionic/angular';
9
- import * as i2 from '@angular/common';
9
+ import * as i5 from '@angular/common';
10
10
  import { CommonModule, getLocaleDateFormat, FormatWidth, getLocaleNumberSymbol, NumberSymbol, DOCUMENT } from '@angular/common';
11
11
  import { __awaiter, __rest } from 'tslib';
12
12
  import * as i1$1 from '@angular/router';
@@ -128,6 +128,8 @@ const kirbyIconSettings = {
128
128
  { name: 'information-decoration', svg: 'assets/kirby/icons/svg/information-decoration.svg' },
129
129
  { name: 'notification', svg: 'assets/kirby/icons/svg/notification.svg' },
130
130
  { name: 'transfer-ownership', svg: 'assets/kirby/icons/svg/transfer-ownership.svg' },
131
+ { name: 'update', svg: 'assets/kirby/icons/svg/update.svg' },
132
+ { name: 'user-blocked', svg: 'assets/kirby/icons/svg/user-blocked.svg' },
131
133
  ],
132
134
  };
133
135
  const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);
@@ -301,7 +303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
301
303
  class RouterOutletComponent {
302
304
  }
303
305
  /** @nocollapse */ RouterOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RouterOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
304
- /** @nocollapse */ RouterOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RouterOutletComponent, selector: "kirby-router-outlet", inputs: { main: "main" }, ngImport: i0, template: "<ng-container *ngIf=\"main\">\n <ion-router-outlet main></ion-router-outlet>\n</ng-container>\n<ng-container *ngIf=\"!main\">\n <ion-router-outlet></ion-router-outlet>\n</ng-container>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.IonRouterOutlet, selector: "ion-router-outlet", inputs: ["animated", "animation", "swipeGesture"], outputs: ["stackEvents", "activate", "deactivate"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
306
+ /** @nocollapse */ RouterOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RouterOutletComponent, selector: "kirby-router-outlet", inputs: { main: "main" }, ngImport: i0, template: "<ng-container *ngIf=\"main\">\n <ion-router-outlet main></ion-router-outlet>\n</ng-container>\n<ng-container *ngIf=\"!main\">\n <ion-router-outlet></ion-router-outlet>\n</ng-container>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.IonRouterOutlet, selector: "ion-router-outlet", inputs: ["animated", "animation", "swipeGesture"], outputs: ["stackEvents", "activate", "deactivate"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
305
307
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RouterOutletComponent, decorators: [{
306
308
  type: Component,
307
309
  args: [{ selector: 'kirby-router-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"main\">\n <ion-router-outlet main></ion-router-outlet>\n</ng-container>\n<ng-container *ngIf=\"!main\">\n <ion-router-outlet></ion-router-outlet>\n</ng-container>\n", styles: [":host{inset:0;position:absolute;contain:size layout style;z-index:0;overflow:hidden;background-color:var(--kirby-background-color)}\n"] }]
@@ -417,7 +419,7 @@ class ModalCompactWrapperComponent {
417
419
  }
418
420
  }
419
421
  /** @nocollapse */ ModalCompactWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalCompactWrapperComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
420
- /** @nocollapse */ ModalCompactWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalCompactWrapperComponent, selector: "kirby-modal-compact-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()" }, properties: { "class.ion-page": "false" } }, providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], ngImport: i0, template: "<ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n", styles: [":host{display:block;padding:24px 16px}\n"], directives: [{ type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }] });
422
+ /** @nocollapse */ ModalCompactWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalCompactWrapperComponent, selector: "kirby-modal-compact-wrapper", inputs: { config: "config" }, host: { listeners: { "window:focus": "onFocusChange()", "window:focusout": "onFocusChange()" }, properties: { "class.ion-page": "false" } }, providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], ngImport: i0, template: "<ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n", styles: [":host{display:block;padding:24px 16px}\n"], directives: [{ type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }] });
421
423
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalCompactWrapperComponent, decorators: [{
422
424
  type: Component,
423
425
  args: [{ selector: 'kirby-modal-compact-wrapper', providers: [{ provide: Modal, useExisting: ModalCompactWrapperComponent }], host: { '[class.ion-page]': 'false' }, template: "<ng-container\n *ngComponentOutlet=\"config.component; injector: componentPropsInjector\"\n></ng-container>\n", styles: [":host{display:block;padding:24px 16px}\n"] }]
@@ -493,10 +495,10 @@ class ButtonComponent {
493
495
  }
494
496
  }
495
497
  /** @nocollapse */ ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
496
- /** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", isDestructive: "isDestructive", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.no-decoration": "this.hasNoDecoration", "class.destructive": "this.destructive", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "icon", first: true, predicate: IconComponent, descendants: true }, { propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border-width:1px;border-style:solid;border-color:var(--kirby-button-border-color, transparent)}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:-1px;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.no-decoration.destructive{--kirby-button-color: var(--kirby-danger)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level2.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level2:active,:host :host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level3:active,:host :host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast);box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}@media (hover: hover){:host-context(kirby-dropdown).attention-level2:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-dropdown).attention-level2:active,:host-context(kirby-dropdown).attention-level2.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-action-sheet).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(kirby-action-sheet).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-action-sheet).attention-level2:active,:host-context(kirby-action-sheet).attention-level2.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions){font-size:14px;margin:0;height:44px}:host-context(ion-toolbar kirby-page-actions).icon-only{width:44px}:host-context(ion-toolbar kirby-page-actions).no-decoration,:host-context(ion-toolbar kirby-page-actions).attention-level1,:host-context(ion-toolbar kirby-page-actions).attention-level2,:host-context(ion-toolbar kirby-page-actions).attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host-context(ion-toolbar kirby-page-actions).no-decoration:hover,:host-context(ion-toolbar kirby-page-actions).attention-level1:hover,:host-context(ion-toolbar kirby-page-actions).attention-level2:hover,:host-context(ion-toolbar kirby-page-actions).attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar kirby-page-actions).no-decoration:active,:host-context(ion-toolbar kirby-page-actions).no-decoration.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level1:active,:host-context(ion-toolbar kirby-page-actions).attention-level1.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level2:active,:host-context(ion-toolbar kirby-page-actions).attention-level2.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level3:active,:host-context(ion-toolbar kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).no-decoration.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level1.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level2.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration.destructive,:host-context(.page-title kirby-page-actions).attention-level1.destructive,:host-context(.page-title kirby-page-actions).attention-level2.destructive,:host-context(.page-title kirby-page-actions).attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
498
+ /** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", isDestructive: "isDestructive", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.no-decoration": "this.hasNoDecoration", "class.destructive": "this.destructive", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ propertyName: "icon", first: true, predicate: IconComponent, descendants: true }, { propertyName: "iconElementRef", first: true, predicate: IconComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border-width:1px;border-style:solid;border-color:var(--kirby-button-border-color, transparent)}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:-1px;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.no-decoration.destructive{--kirby-button-color: var(--kirby-danger)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level2.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level2:active,:host :host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level3:active,:host :host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast);box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}@media (hover: hover){:host-context(kirby-dropdown).attention-level2:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-dropdown).attention-level2:active,:host-context(kirby-dropdown).attention-level2.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-action-sheet).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(kirby-action-sheet).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-action-sheet).attention-level2:active,:host-context(kirby-action-sheet).attention-level2.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions){font-size:14px;margin:0;height:44px}:host-context(ion-toolbar kirby-page-actions).icon-only{width:44px}:host-context(ion-toolbar kirby-page-actions).no-decoration,:host-context(ion-toolbar kirby-page-actions).attention-level1,:host-context(ion-toolbar kirby-page-actions).attention-level2,:host-context(ion-toolbar kirby-page-actions).attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host-context(ion-toolbar kirby-page-actions).no-decoration:hover,:host-context(ion-toolbar kirby-page-actions).attention-level1:hover,:host-context(ion-toolbar kirby-page-actions).attention-level2:hover,:host-context(ion-toolbar kirby-page-actions).attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar kirby-page-actions).no-decoration:active,:host-context(ion-toolbar kirby-page-actions).no-decoration.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level1:active,:host-context(ion-toolbar kirby-page-actions).attention-level1.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level2:active,:host-context(ion-toolbar kirby-page-actions).attention-level2.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level3:active,:host-context(ion-toolbar kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).no-decoration.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level1.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level2.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration.destructive,:host-context(.page-title kirby-page-actions).attention-level1.destructive,:host-context(.page-title kirby-page-actions).attention-level2.destructive,:host-context(.page-title kirby-page-actions).attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
497
499
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ButtonComponent, decorators: [{
498
500
  type: Component,
499
- args: [{ selector: 'button[kirby-button],Button[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border-width:1px;border-style:solid;border-color:var(--kirby-button-border-color, transparent)}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:-1px;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.no-decoration.destructive{--kirby-button-color: var(--kirby-danger)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level2.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level2:active,:host :host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level3:active,:host :host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast);box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}@media (hover: hover){:host-context(kirby-dropdown).attention-level2:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-dropdown).attention-level2:active,:host-context(kirby-dropdown).attention-level2.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-action-sheet).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(kirby-action-sheet).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-action-sheet).attention-level2:active,:host-context(kirby-action-sheet).attention-level2.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions){font-size:14px;margin:0;height:44px}:host-context(ion-toolbar kirby-page-actions).icon-only{width:44px}:host-context(ion-toolbar kirby-page-actions).no-decoration,:host-context(ion-toolbar kirby-page-actions).attention-level1,:host-context(ion-toolbar kirby-page-actions).attention-level2,:host-context(ion-toolbar kirby-page-actions).attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host-context(ion-toolbar kirby-page-actions).no-decoration:hover,:host-context(ion-toolbar kirby-page-actions).attention-level1:hover,:host-context(ion-toolbar kirby-page-actions).attention-level2:hover,:host-context(ion-toolbar kirby-page-actions).attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar kirby-page-actions).no-decoration:active,:host-context(ion-toolbar kirby-page-actions).no-decoration.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level1:active,:host-context(ion-toolbar kirby-page-actions).attention-level1.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level2:active,:host-context(ion-toolbar kirby-page-actions).attention-level2.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level3:active,:host-context(ion-toolbar kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).no-decoration.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level1.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level2.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration.destructive,:host-context(.page-title kirby-page-actions).attention-level1.destructive,:host-context(.page-title kirby-page-actions).attention-level2.destructive,:host-context(.page-title kirby-page-actions).attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
501
+ args: [{ selector: 'button[kirby-button],Button[kirby-button]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\"><ng-content></ng-content></span>\n</ng-container>\n<!--\n TODO: Fix globally exposed .state-layer and .content-layer\n \n See: https://github.com/kirbydesign/designsystem/issues/2101\n-->\n", styles: [":host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;font-family:var(--kirby-font-family);background-color:var(--kirby-button-background-color, initial);color:var(--kirby-button-color, inherit);border-radius:999px;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;font-size:14px;height:40px;min-width:88px;padding:0;margin:4px;line-height:20px;outline:none;border-width:1px;border-style:solid;border-color:var(--kirby-button-border-color, transparent)}:host:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:-1px;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host .content-layer{display:inherit;width:inherit;flex-direction:inherit;align-items:inherit;justify-content:inherit;padding-inline:var(--kirby-button-padding-left) var(--kirby-button-padding-right)}:host.no-margin{margin:0}:host.icon-left{--kirby-icon-margin-right: 8px;--kirby-button-padding-left: 12px;--kirby-button-padding-right: 16px;padding:0}:host.icon-right{--kirby-icon-margin-left: 8px;--kirby-button-padding-left: 16px;--kirby-button-padding-right: 12px;padding:0}:host.icon-only{width:40px;padding:0;min-width:unset}:host.sm{font-size:12px;height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{--kirby-icon-font-size: 16px;width:32px;min-width:unset}:host.sm.icon-left{--kirby-button-padding-left: 12px}:host.sm.icon-right{--kirby-button-padding-right: 12px}:host.sm.icon-left,:host.sm.icon-right{--kirby-icon-font-size: 16px;min-width:88px}:host.lg{font-size:16px;height:48px;min-width:220px}:host.lg.icon-only{width:48px;min-width:unset}:host.no-decoration{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host.no-decoration:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.no-decoration:active,:host.no-decoration.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.no-decoration.destructive{--kirby-button-color: var(--kirby-danger)}:host.attention-level1{--kirby-button-background-color: var(--kirby-primary);--kirby-button-color: var(--kirby-primary-contrast)}:host.attention-level1.destructive{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}:host.attention-level2{--kirby-button-background-color: var(--kirby-black);--kirby-button-color: var(--kirby-black-contrast)}@media (hover: hover){:host.attention-level2:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level2.destructive{--kirby-button-background-color: var(--kirby-light);--kirby-button-color: var(--kirby-danger)}:host.attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host.attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host[expand=block]{width:100%}:host:disabled{background-color:var(--kirby-semi-light);color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host :host-context(.kirby-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}:host :host-context(.kirby-color-brightness-dark).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level2:active,:host :host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host :host-context(.kirby-color-brightness-dark).attention-level3{--kirby-button-border-color: var(--kirby-white);--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host :host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host :host-context(.kirby-color-brightness-dark).attention-level3:active,:host :host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.floating{width:64px!important;height:64px!important;min-width:unset}:host.floating:not(:disabled){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}:host-context(kirby-dropdown){justify-content:space-between}:host-context(kirby-dropdown).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast);box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}@media (hover: hover){:host-context(kirby-dropdown).attention-level2:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-dropdown).attention-level2:active,:host-context(kirby-dropdown).attention-level2.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-action-sheet).attention-level2{--kirby-button-background-color: var(--kirby-white);--kirby-button-color: var(--kirby-white-contrast)}@media (hover: hover){:host-context(kirby-action-sheet).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-action-sheet).attention-level2:active,:host-context(kirby-action-sheet).attention-level2.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions){font-size:14px;margin:0;height:44px}:host-context(ion-toolbar kirby-page-actions).icon-only{width:44px}:host-context(ion-toolbar kirby-page-actions).no-decoration,:host-context(ion-toolbar kirby-page-actions).attention-level1,:host-context(ion-toolbar kirby-page-actions).attention-level2,:host-context(ion-toolbar kirby-page-actions).attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: transparent}@media (hover: hover){:host-context(ion-toolbar kirby-page-actions).no-decoration:hover,:host-context(ion-toolbar kirby-page-actions).attention-level1:hover,:host-context(ion-toolbar kirby-page-actions).attention-level2:hover,:host-context(ion-toolbar kirby-page-actions).attention-level3:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar kirby-page-actions).no-decoration:active,:host-context(ion-toolbar kirby-page-actions).no-decoration.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level1:active,:host-context(ion-toolbar kirby-page-actions).attention-level1.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level2:active,:host-context(ion-toolbar kirby-page-actions).attention-level2.interaction-state-active,:host-context(ion-toolbar kirby-page-actions).attention-level3:active,:host-context(ion-toolbar kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(ion-toolbar kirby-page-actions).no-decoration.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level1.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level2.destructive,:host-context(ion-toolbar kirby-page-actions).attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(.page-title kirby-page-actions).no-decoration,:host-context(.page-title kirby-page-actions).attention-level1,:host-context(.page-title kirby-page-actions).attention-level2,:host-context(.page-title kirby-page-actions).attention-level3{--kirby-button-background-color: transparent;--kirby-button-color: var(--kirby-black);--kirby-button-border-color: var(--kirby-medium)}@media (hover: hover){:host-context(.page-title kirby-page-actions).no-decoration:hover,:host-context(.page-title kirby-page-actions).attention-level1:hover,:host-context(.page-title kirby-page-actions).attention-level2:hover,:host-context(.page-title kirby-page-actions).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.page-title kirby-page-actions).no-decoration:active,:host-context(.page-title kirby-page-actions).no-decoration.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level1:active,:host-context(.page-title kirby-page-actions).attention-level1.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level2:active,:host-context(.page-title kirby-page-actions).attention-level2.interaction-state-active,:host-context(.page-title kirby-page-actions).attention-level3:active,:host-context(.page-title kirby-page-actions).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}:host-context(.page-title kirby-page-actions).no-decoration.destructive,:host-context(.page-title kirby-page-actions).attention-level1.destructive,:host-context(.page-title kirby-page-actions).attention-level2.destructive,:host-context(.page-title kirby-page-actions).attention-level3.destructive{--kirby-button-color: var(--kirby-danger)}:host-context(kirby-empty-state .content){font-size:16px;height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{width:48px;min-width:unset}:host-context(kirby-toggle-button).success{--kirby-button-background-color: var(--kirby-success);--kirby-button-color: var(--kirby-success-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).success:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).success:active,:host-context(kirby-toggle-button).success.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).warning{--kirby-button-background-color: var(--kirby-warning);--kirby-button-color: var(--kirby-warning-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).warning:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).warning:active,:host-context(kirby-toggle-button).warning.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-toggle-button).danger{--kirby-button-background-color: var(--kirby-danger);--kirby-button-color: var(--kirby-danger-contrast)}@media (hover: hover){:host-context(kirby-toggle-button).danger:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-toggle-button).danger:active,:host-context(kirby-toggle-button).danger.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
500
502
  }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isAttentionLevel1: [{
501
503
  type: HostBinding,
502
504
  args: ['class.attention-level1']
@@ -1089,7 +1091,7 @@ ModalWrapperComponent.KEYBOARD_HIDE_DELAY_IN_MS = 100;
1089
1091
  /** @nocollapse */ ModalWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ModalWrapperComponent, 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: [
1090
1092
  { provide: Modal, useExisting: ModalWrapperComponent },
1091
1093
  { provide: ModalElementsAdvertiser, useExisting: ModalWrapperComponent },
1092
- ], 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 (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title></ion-title>\n <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n <ng-container\n *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n ></ng-container>\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-large\" #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\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button [noDecoration]=\"true\" size=\"md\" (click)=\"close()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n <button kirby-button [noDecoration]=\"true\" size=\"md\" (click)=\"btn.action($event)\">\n <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n </button>\n</ng-template>\n", styles: ["ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal: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: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:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{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:not(.kirby-modal-full-height)).drawer 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:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}: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: 721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}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: 721px){ion-content{--padding-start: 56px;--padding-end: 56px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
1094
+ ], 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 (touchstart)=\"onHeaderTouchStart($event)\">\n <ion-toolbar>\n <ion-title></ion-title>\n <ion-buttons slot=\"start\" *ngIf=\"config.flavor === 'drawer'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'modal'\">\n <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n </ion-buttons>\n <ion-buttons slot=\"end\" *ngIf=\"config.flavor === 'drawer' && config.drawerSupplementaryAction\">\n <ng-container\n *ngTemplateOutlet=\"supplementaryButton; context: { btn: config.drawerSupplementaryAction }\"\n ></ng-container>\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-large\" #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\n<ng-template #closeButton let-icon=\"icon\">\n <button kirby-button [noDecoration]=\"true\" size=\"md\" (click)=\"close()\">\n <kirby-icon [name]=\"icon\"></kirby-icon>\n </button>\n</ng-template>\n\n<ng-template #supplementaryButton let-btn=\"btn\">\n <button kirby-button [noDecoration]=\"true\" size=\"md\" (click)=\"btn.action($event)\">\n <kirby-icon [name]=\"btn.iconName\"></kirby-icon>\n </button>\n</ng-template>\n", styles: ["ion-header{box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black))}ion-header ion-toolbar button{color:var(--color)}@media (min-width: 721px){ion-header ion-toolbar{padding-top:8px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}:host.drawer ion-header ion-toolbar:first-of-type{padding-top:0}@media (min-width: 721px){:host-context(ion-modal: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: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:not(.kirby-modal-full-height)) ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer{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:not(.kirby-modal-full-height)).drawer 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:not(.kirby-modal-full-height)).drawer ion-content::part(scroll){height:\"100%\";position:relative}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer ion-content::part(scroll){transition:padding-bottom .15s ease-out}:host-context(ion-modal:not(.kirby-modal-full-height)).drawer.drawer.keyboard-visible ion-content::part(scroll){transition:padding-bottom .25s ease-out 1ms}: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: 721px){:host-context(ion-modal.modal-card:not(.kirby-drawer)) ion-header ion-toolbar:first-of-type{padding-top:8px}}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end));font-size:22px;font-weight:700}:host(.drawer) ion-title{font-size:18px}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: 721px){ion-content{--padding-start: 56px;--padding-end: 56px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i1$1.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
1093
1095
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalWrapperComponent, decorators: [{
1094
1096
  type: Component,
1095
1097
  args: [{ selector: 'kirby-modal-wrapper', providers: [
@@ -1413,285 +1415,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
1413
1415
  args: [{ providedIn: 'root' }]
1414
1416
  }], ctorParameters: function () { return [{ type: PlatformService }]; } });
1415
1417
 
1416
- class ModalHelper {
1417
- constructor(ionicModalController, modalAnimationBuilder, windowRef) {
1418
- this.ionicModalController = ionicModalController;
1419
- this.modalAnimationBuilder = modalAnimationBuilder;
1420
- this.windowRef = windowRef;
1418
+ class EmptyStateComponent {
1419
+ ngAfterContentInit() {
1420
+ this.enforceAttentionLevelRules();
1421
+ /* setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention
1422
+ levels of slotted buttons in this.enforceAttentionLevelRules */
1423
+ this.slottedButtons.changes.subscribe(() => {
1424
+ setTimeout(() => this.enforceAttentionLevelRules());
1425
+ });
1421
1426
  }
1422
- showModalWindow(config) {
1423
- return __awaiter(this, void 0, void 0, function* () {
1424
- config.flavor = config.flavor || 'modal';
1425
- const modalPresentingElement = yield this.getPresentingElement(config.flavor);
1426
- let currentBackdrop;
1427
- const topMostModal = yield this.ionicModalController.getTop();
1428
- if (topMostModal) {
1429
- currentBackdrop =
1430
- topMostModal.shadowRoot.querySelector('ion-backdrop');
1431
- }
1432
- const enterAnimation = this.modalAnimationBuilder.enterAnimation(currentBackdrop);
1433
- const leaveAnimation = this.modalAnimationBuilder.leaveAnimation(currentBackdrop);
1434
- const defaultModalSize = config.flavor === 'modal' ? 'medium' : null;
1435
- const modalSize = config.size || defaultModalSize;
1436
- const allow_scroll_class = 'allow-background-scroll';
1437
- let customCssClasses = [];
1438
- if (config.cssClass) {
1439
- customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];
1440
- }
1441
- if (config.interactWithBackground) {
1442
- this.windowRef.nativeWindow.document.body.classList.add(allow_scroll_class);
1443
- }
1444
- const ionModal = yield this.ionicModalController.create({
1445
- component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
1446
- cssClass: [
1447
- 'kirby-overlay',
1448
- 'kirby-modal',
1449
- config.flavor === 'drawer' ? 'kirby-drawer' : null,
1450
- config.flavor === 'compact' ? 'kirby-modal-compact' : null,
1451
- modalSize ? 'kirby-modal-' + modalSize : null,
1452
- config.interactWithBackground ? 'interact-with-background' : null,
1453
- ...customCssClasses,
1454
- ],
1455
- backdropDismiss: config.flavor === 'compact' || config.interactWithBackground ? false : true,
1456
- showBackdrop: !config.interactWithBackground,
1457
- componentProps: { config: config },
1458
- swipeToClose: config.flavor != 'compact',
1459
- presentingElement: modalPresentingElement,
1460
- keyboardClose: false,
1461
- enterAnimation,
1462
- leaveAnimation,
1463
- });
1464
- if (config.interactWithBackground) {
1465
- ionModal.onDidDismiss().then(() => {
1466
- this.windowRef.nativeWindow.document.body.classList.remove(allow_scroll_class);
1467
- });
1427
+ /** Enforces that all slotted buttons will have their attention
1428
+ * level set to 3, except the first button if it has
1429
+ * level 1.
1430
+ */
1431
+ enforceAttentionLevelRules() {
1432
+ this.slottedButtons.forEach((button, index) => {
1433
+ if (index === 0 && button.isAttentionLevel1)
1434
+ return;
1435
+ if (!button.isAttentionLevel3) {
1436
+ button.attentionLevel = '3';
1468
1437
  }
1469
- yield ionModal.present();
1470
- return {
1471
- dismiss: ionModal.dismiss.bind(ionModal),
1472
- onWillDismiss: ionModal.onWillDismiss(),
1473
- onDidDismiss: ionModal.onDidDismiss(),
1474
- };
1475
1438
  });
1476
1439
  }
1477
- registerPresentingElement(element) {
1478
- ModalHelper.presentingElement = element;
1440
+ }
1441
+ /** @nocollapse */ EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1442
+ /** @nocollapse */ EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EmptyStateComponent, selector: "kirby-empty-state", inputs: { iconName: "iconName", customIconName: "customIconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<article>\n <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" [customName]=\"customIconName\" size=\"lg\"></kirby-icon>\n </div>\n <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</article>\n", styles: ["article{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}h3.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}\n"], components: [{ type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1443
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmptyStateComponent, decorators: [{
1444
+ type: Component,
1445
+ args: [{ selector: 'kirby-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article>\n <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" [customName]=\"customIconName\" size=\"lg\"></kirby-icon>\n </div>\n <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</article>\n", styles: ["article{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}h3.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}\n"] }]
1446
+ }], propDecorators: { iconName: [{
1447
+ type: Input
1448
+ }], customIconName: [{
1449
+ type: Input
1450
+ }], title: [{
1451
+ type: Input
1452
+ }], subtitle: [{
1453
+ type: Input
1454
+ }], slottedButtons: [{
1455
+ type: ContentChildren,
1456
+ args: [ButtonComponent]
1457
+ }] } });
1458
+
1459
+ class ThemeColorDirective {
1460
+ constructor() {
1461
+ this._isDefault = true;
1479
1462
  }
1480
- getPresentingElement(flavor) {
1481
- return __awaiter(this, void 0, void 0, function* () {
1482
- let modalPresentingElement = undefined;
1483
- if (!flavor || flavor === 'modal') {
1484
- const topMostModal = yield this.ionicModalController.getTop();
1485
- if (!topMostModal) {
1486
- modalPresentingElement = ModalHelper.presentingElement;
1487
- }
1488
- else if (!topMostModal.classList.contains('kirby-drawer') &&
1489
- !topMostModal.classList.contains('kirby-modal-compact')) {
1490
- modalPresentingElement = topMostModal;
1491
- }
1492
- }
1493
- return modalPresentingElement;
1494
- });
1463
+ get isDefault() {
1464
+ return this._isDefault;
1495
1465
  }
1496
- scrollToTop(noModalRegisteredErrorMessage, duration) {
1497
- return __awaiter(this, void 0, void 0, function* () {
1498
- const modal = yield this.ionicModalController.getTop();
1499
- if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
1500
- throw new Error(noModalRegisteredErrorMessage);
1501
- }
1502
- modal.component.scrollToTop(duration);
1503
- });
1466
+ get isPrimary() {
1467
+ return this._isPrimary;
1504
1468
  }
1505
- scrollToBottom(noModalRegisteredErrorMessage, duration) {
1506
- return __awaiter(this, void 0, void 0, function* () {
1507
- const modal = yield this.ionicModalController.getTop();
1508
- if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
1509
- throw new Error(noModalRegisteredErrorMessage);
1510
- }
1511
- modal.component.scrollToBottom(duration);
1512
- });
1469
+ get isSecondary() {
1470
+ return this._isSecondary;
1513
1471
  }
1514
- }
1515
- // TODO: Make presentingElement an instance field when
1516
- // forRoot()/singleton services has been solved:
1517
- ModalHelper.presentingElement = undefined;
1518
- /** @nocollapse */ ModalHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, deps: [{ token: i1.ModalController }, { token: ModalAnimationBuilderService }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
1519
- /** @nocollapse */ ModalHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper });
1520
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, decorators: [{
1521
- type: Injectable
1522
- }], ctorParameters: function () { return [{ type: i1.ModalController }, { type: ModalAnimationBuilderService }, { type: WindowRef }]; } });
1523
-
1524
- class CardComponent {
1525
- constructor(elementRef, resizeObserverService, renderer) {
1526
- this.elementRef = elementRef;
1527
- this.resizeObserverService = resizeObserverService;
1528
- this.renderer = renderer;
1529
- this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint({
1530
- small: 360,
1531
- medium: 720,
1532
- large: 1024,
1533
- });
1534
- this.flat = false;
1535
- this.highlighted = false;
1472
+ get isTertiary() {
1473
+ return this._isTertiary;
1536
1474
  }
1537
- set backgroundImageUrl(value) {
1538
- this._backgroundImage = `url('${value}')`;
1475
+ get isSuccess() {
1476
+ return this._isSuccess;
1539
1477
  }
1540
- set sizes(value) {
1541
- if (typeof value === 'string') {
1542
- console.error('Sizes property cannot be a string. Please ensure the size property is bound as an expression:\n[sizes]="{...}"');
1543
- }
1544
- this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);
1478
+ get isWarning() {
1479
+ return this._isWarning;
1545
1480
  }
1546
- set mode(value) {
1547
- this.flat = value === 'flat';
1548
- this.highlighted = value === 'highlighted';
1481
+ get isDanger() {
1482
+ return this._isDanger;
1549
1483
  }
1550
- ngOnInit() {
1551
- this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));
1484
+ get isLight() {
1485
+ return this._isLight;
1552
1486
  }
1553
- ngOnDestroy() {
1554
- this.resizeObserverService.unobserve(this.elementRef);
1487
+ get isMedium() {
1488
+ return this._isMedium;
1555
1489
  }
1556
- sortSizesByBreakpoint(sizes) {
1557
- return Object.entries(sizes).sort(this.compareSizesByBreakpoint);
1490
+ get isDark() {
1491
+ return this._isDark;
1558
1492
  }
1559
- compareSizesByBreakpoint(a, b) {
1560
- return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;
1493
+ get isWhite() {
1494
+ return this._isWhite;
1561
1495
  }
1562
- handleResize(entry) {
1563
- const sizeAttributeName = 'size';
1564
- const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];
1565
- const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];
1566
- if (entry.contentRect.width < smallestBreakpointWidth) {
1567
- this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);
1568
- }
1569
- else {
1570
- this.sizesSortedByBreakpoint.forEach(([size, width]) => {
1571
- if (entry.contentRect.width >= width) {
1572
- this.renderer.setAttribute(entry.target, sizeAttributeName, size);
1573
- }
1574
- });
1575
- }
1496
+ get isBrightnessWhite() {
1497
+ return this._isBrightnessWhite;
1498
+ }
1499
+ get isBrightnessLight() {
1500
+ return this._isBrightnessLight;
1501
+ }
1502
+ get isBrightnessDark() {
1503
+ return this._isBrightnessDark;
1504
+ }
1505
+ set themeColor(value) {
1506
+ this._isDefault = !value;
1507
+ this._isPrimary = value === 'primary';
1508
+ this._isSecondary = value === 'secondary';
1509
+ this._isTertiary = value === 'tertiary';
1510
+ this._isSuccess = value === 'success';
1511
+ this._isWarning = value === 'warning';
1512
+ this._isDanger = value === 'danger';
1513
+ this._isLight = value === 'light';
1514
+ this._isMedium = value === 'medium';
1515
+ this._isDark = value === 'dark';
1516
+ this._isWhite = value === 'white';
1517
+ const colorBrightness = ColorHelper.getColorBrightness(value);
1518
+ this._isBrightnessWhite = colorBrightness === 'white';
1519
+ this._isBrightnessLight = colorBrightness === 'light';
1520
+ this._isBrightnessDark = colorBrightness === 'dark';
1576
1521
  }
1577
1522
  }
1578
- /** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1579
- /** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode", hasDarkBackgroundColor: "hasDarkBackgroundColor" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat", "class.highlighted": "this.highlighted", "class.interaction-state-make-lighter-and-louder": "this.hasDarkBackgroundColor" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}\n"] });
1580
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, decorators: [{
1581
- type: Component,
1582
- args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}\n"] }]
1583
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
1584
- type: Input
1585
- }], subtitle: [{
1586
- type: Input
1587
- }], _backgroundImage: [{
1523
+ /** @nocollapse */ ThemeColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1524
+ /** @nocollapse */ ThemeColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],\n kirby-card[themeColor],\n kirby-icon[themeColor],\n kirby-progress-circle-ring[themeColor],\n kirby-modal-footer[themeColor],\n kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, host: { properties: { "class.default": "this.isDefault", "class.primary": "this.isPrimary", "class.secondary": "this.isSecondary", "class.tertiary": "this.isTertiary", "class.success": "this.isSuccess", "class.warning": "this.isWarning", "class.danger": "this.isDanger", "class.light": "this.isLight", "class.medium": "this.isMedium", "class.dark": "this.isDark", "class.white": "this.isWhite", "class.kirby-color-brightness-white": "this.isBrightnessWhite", "class.kirby-color-brightness-light": "this.isBrightnessLight", "class.kirby-color-brightness-dark": "this.isBrightnessDark" } }, ngImport: i0 });
1525
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ThemeColorDirective, decorators: [{
1526
+ type: Directive,
1527
+ args: [{
1528
+ // eslint-disable-next-line @angular-eslint/directive-selector
1529
+ selector: `kirby-avatar[themeColor],
1530
+ kirby-card[themeColor],
1531
+ kirby-icon[themeColor],
1532
+ kirby-progress-circle-ring[themeColor],
1533
+ kirby-modal-footer[themeColor],
1534
+ kirby-empty-state[themeColor]`,
1535
+ }]
1536
+ }], propDecorators: { isDefault: [{
1588
1537
  type: HostBinding,
1589
- args: ['style.--kirby-card-background-image']
1590
- }], backgroundImageUrl: [{
1591
- type: Input
1592
- }], hasPadding: [{
1593
- type: Input
1594
- }], sizes: [{
1595
- type: Input
1596
- }], flat: [{
1538
+ args: ['class.default']
1539
+ }], isPrimary: [{
1597
1540
  type: HostBinding,
1598
- args: ['class.flat']
1599
- }], highlighted: [{
1541
+ args: ['class.primary']
1542
+ }], isSecondary: [{
1600
1543
  type: HostBinding,
1601
- args: ['class.highlighted']
1602
- }], mode: [{
1603
- type: Input
1604
- }], hasDarkBackgroundColor: [{
1544
+ args: ['class.secondary']
1545
+ }], isTertiary: [{
1605
1546
  type: HostBinding,
1606
- args: ['class.interaction-state-make-lighter-and-louder']
1607
- }, {
1608
- type: Input
1609
- }] } });
1610
-
1611
- class CardHeaderComponent {
1612
- constructor() {
1613
- this.flagged = null;
1614
- }
1615
- }
1616
- /** @nocollapse */ CardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1617
- /** @nocollapse */ CardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged" }, host: { properties: { "class": "this.flagged" } }, ngImport: i0, template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:var(--kirby-internal-card-header-padding, 16px);color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color: var(--kirby-danger);--kirby-card-header-color: var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color: var(--kirby-warning);--kirby-card-header-color: var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color: var(--kirby-success);--kirby-card-header-color: var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding: 2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1618
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardHeaderComponent, decorators: [{
1619
- type: Component,
1620
- args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:var(--kirby-internal-card-header-padding, 16px);color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color: var(--kirby-danger);--kirby-card-header-color: var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color: var(--kirby-warning);--kirby-card-header-color: var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color: var(--kirby-success);--kirby-card-header-color: var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding: 2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
1621
- }], propDecorators: { title: [{
1622
- type: Input
1623
- }], subtitle: [{
1624
- type: Input
1625
- }], isTitleBold: [{
1626
- type: Input
1627
- }], flagged: [{
1547
+ args: ['class.tertiary']
1548
+ }], isSuccess: [{
1549
+ type: HostBinding,
1550
+ args: ['class.success']
1551
+ }], isWarning: [{
1552
+ type: HostBinding,
1553
+ args: ['class.warning']
1554
+ }], isDanger: [{
1555
+ type: HostBinding,
1556
+ args: ['class.danger']
1557
+ }], isLight: [{
1558
+ type: HostBinding,
1559
+ args: ['class.light']
1560
+ }], isMedium: [{
1628
1561
  type: HostBinding,
1629
- args: ['class']
1630
- }, {
1562
+ args: ['class.medium']
1563
+ }], isDark: [{
1564
+ type: HostBinding,
1565
+ args: ['class.dark']
1566
+ }], isWhite: [{
1567
+ type: HostBinding,
1568
+ args: ['class.white']
1569
+ }], isBrightnessWhite: [{
1570
+ type: HostBinding,
1571
+ args: ['class.kirby-color-brightness-white']
1572
+ }], isBrightnessLight: [{
1573
+ type: HostBinding,
1574
+ args: ['class.kirby-color-brightness-light']
1575
+ }], isBrightnessDark: [{
1576
+ type: HostBinding,
1577
+ args: ['class.kirby-color-brightness-dark']
1578
+ }], themeColor: [{
1631
1579
  type: Input
1632
1580
  }] } });
1633
1581
 
1634
- class ActionSheetComponent {
1635
- constructor() {
1636
- this.cancelButtonText = 'Cancel';
1637
- this.hideCancel = false;
1638
- this.disabled = false;
1639
- this.cancel = new EventEmitter();
1640
- this.itemSelect = new EventEmitter();
1582
+ class AlertComponent {
1583
+ constructor(elementRef, windowRef) {
1584
+ this.elementRef = elementRef;
1585
+ this.windowRef = windowRef;
1586
+ this.BLUR_WRAPPER_DELAY_IN_MS = 50;
1587
+ this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
1641
1588
  }
1642
- onItemSelect(selection) {
1643
- this.itemSelect.emit(selection);
1589
+ set title(title) {
1590
+ this.title$ = typeof title === 'string' ? of(title) : title;
1591
+ }
1592
+ set message(message) {
1593
+ this.message$ = typeof message === 'string' ? of(message) : message;
1594
+ }
1595
+ ngAfterViewInit() {
1596
+ setTimeout(() => {
1597
+ this.alertWrapper.nativeElement.focus();
1598
+ this.alertWrapper.nativeElement.blur();
1599
+ }, this.BLUR_WRAPPER_DELAY_IN_MS);
1600
+ }
1601
+ onFocusChange() {
1602
+ // This fixes an undesired scroll behaviour occurring on keyboard-tabbing
1603
+ this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
1644
1604
  }
1645
1605
  onCancel() {
1646
- this.cancel.emit();
1606
+ const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
1607
+ ionModalElement && ionModalElement.dismiss(false);
1608
+ }
1609
+ onOk() {
1610
+ const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
1611
+ ionModalElement && ionModalElement.dismiss(true);
1647
1612
  }
1648
1613
  }
1649
- /** @nocollapse */ ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1650
- /** @nocollapse */ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ActionSheetComponent, 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 *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [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=\"2\"\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"], components: [{ type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1651
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, decorators: [{
1614
+ /** @nocollapse */ AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
1615
+ /** @nocollapse */ AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AlertComponent, selector: "kirby-alert", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okBtn: "okBtn", okBtnIsDestructive: "okBtnIsDestructive", cancelBtn: "cancelBtn" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelBtn\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"onCancel()\"\n >\n {{ cancelBtn }}\n </button>\n <button\n kirby-button\n [size]=\"cancelBtn ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [isDestructive]=\"okBtnIsDestructive\"\n (click)=\"onOk()\"\n >\n {{ okBtn }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"], components: [{ type: EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "customIconName", "title", "subtitle"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: ThemeColorDirective, selector: "kirby-avatar[themeColor],\n kirby-card[themeColor],\n kirby-icon[themeColor],\n kirby-progress-circle-ring[themeColor],\n kirby-modal-footer[themeColor],\n kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1616
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, decorators: [{
1652
1617
  type: Component,
1653
- args: [{ selector: 'kirby-action-sheet', template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [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=\"2\"\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"] }]
1654
- }], propDecorators: { cancelButtonText: [{
1618
+ args: [{ selector: 'kirby-alert', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelBtn\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"onCancel()\"\n >\n {{ cancelBtn }}\n </button>\n <button\n kirby-button\n [size]=\"cancelBtn ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [isDestructive]=\"okBtnIsDestructive\"\n (click)=\"onOk()\"\n >\n {{ okBtn }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"] }]
1619
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: WindowRef }]; }, propDecorators: { alertWrapper: [{
1620
+ type: ViewChild,
1621
+ args: ['alertWrapper', { static: true }]
1622
+ }], title: [{
1655
1623
  type: Input
1656
- }], hideCancel: [{
1624
+ }], message: [{
1657
1625
  type: Input
1658
- }], disabled: [{
1626
+ }], iconName: [{
1659
1627
  type: Input
1660
- }], header: [{
1628
+ }], iconThemeColor: [{
1661
1629
  type: Input
1662
- }], subheader: [{
1630
+ }], okBtn: [{
1663
1631
  type: Input
1664
- }], items: [{
1632
+ }], okBtnIsDestructive: [{
1633
+ type: Input
1634
+ }], cancelBtn: [{
1665
1635
  type: Input
1666
- }], cancel: [{
1667
- type: Output
1668
- }], itemSelect: [{
1669
- type: Output
1670
1636
  }] } });
1671
1637
 
1672
- class ActionSheetHelper {
1638
+ class AlertHelper {
1673
1639
  constructor(ionicModalController) {
1674
1640
  this.ionicModalController = ionicModalController;
1675
1641
  }
1676
- showActionSheet(config) {
1642
+ showAlert(config) {
1677
1643
  return __awaiter(this, void 0, void 0, function* () {
1678
- const cancel = new EventEmitter();
1679
- const itemSelect = new EventEmitter();
1680
1644
  const ionModal = yield this.ionicModalController.create({
1681
- component: ActionSheetComponent,
1682
- cssClass: ['kirby-overlay', 'kirby-action-sheet'],
1683
- componentProps: Object.assign(Object.assign({}, config), { cancel: cancel, itemSelect: itemSelect }),
1684
- backdropDismiss: true,
1685
- });
1686
- // Remove 'modal-shadow' element as we are no longer able to hide it with CSS in Ionic 6.
1687
- // We need to remove it so it does not obstruct the backdrop-click to dismiss functionality.
1688
- ionModal.shadowRoot.querySelector('.modal-shadow').remove();
1689
- const cancelSubscription = cancel.subscribe(() => ionModal.dismiss());
1690
- const itemSelectSubscription = itemSelect.subscribe((item) => ionModal.dismiss(item));
1691
- const onDidDismiss = ionModal.onDidDismiss();
1692
- onDidDismiss.then((_) => {
1693
- cancelSubscription.unsubscribe();
1694
- itemSelectSubscription.unsubscribe();
1645
+ component: AlertComponent,
1646
+ componentProps: this.getComponentProps(config),
1647
+ cssClass: ['kirby-overlay', 'kirby-alert'],
1648
+ mode: 'ios',
1649
+ backdropDismiss: false,
1695
1650
  });
1696
1651
  yield ionModal.present();
1697
1652
  return {
@@ -1701,245 +1656,337 @@ class ActionSheetHelper {
1701
1656
  };
1702
1657
  });
1703
1658
  }
1659
+ getComponentProps(config) {
1660
+ return Object.assign(Object.assign({}, config), { okBtn: this.getOkBtn(config), cancelBtn: config.cancelBtn, okBtnIsDestructive: this.getOkBtnIsDestructive(config), iconName: config.icon && config.icon.name, iconThemeColor: config.icon && config.icon.themeColor });
1661
+ }
1662
+ getOkBtn(config) {
1663
+ let text;
1664
+ if (config.okBtn) {
1665
+ if (typeof config.okBtn === 'string') {
1666
+ text = config.okBtn;
1667
+ }
1668
+ else {
1669
+ text = config.okBtn.text;
1670
+ }
1671
+ }
1672
+ return text;
1673
+ }
1674
+ getOkBtnIsDestructive(config) {
1675
+ return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
1676
+ }
1704
1677
  }
1705
- /** @nocollapse */ ActionSheetHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
1706
- /** @nocollapse */ ActionSheetHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper });
1707
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper, decorators: [{
1678
+ /** @nocollapse */ AlertHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
1679
+ /** @nocollapse */ AlertHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper });
1680
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper, decorators: [{
1708
1681
  type: Injectable
1709
1682
  }], ctorParameters: function () { return [{ type: i1.ModalController }]; } });
1710
1683
 
1711
- class EmptyStateComponent {
1712
- ngAfterContentInit() {
1713
- this.enforceAttentionLevelRules();
1714
- /* setTimeout prevents ExpressionChangedAfterItHasBeenCheckedError when changing attention
1715
- levels of slotted buttons in this.enforceAttentionLevelRules */
1716
- this.slottedButtons.changes.subscribe(() => {
1717
- setTimeout(() => this.enforceAttentionLevelRules());
1718
- });
1684
+ class ModalHelper {
1685
+ constructor(ionicModalController, modalAnimationBuilder, windowRef, alertHelper) {
1686
+ this.ionicModalController = ionicModalController;
1687
+ this.modalAnimationBuilder = modalAnimationBuilder;
1688
+ this.windowRef = windowRef;
1689
+ this.alertHelper = alertHelper;
1690
+ /*
1691
+ isModalOpening is used to prevent additional instantiations
1692
+ of modals, while a modal is already being instatiated, but not completed.
1693
+ This is the recommended approach by one of the maintainers of Ionic:
1694
+ https://github.com/ionic-team/ionic-framework/issues/23327#issuecomment-847028058
1695
+ */
1696
+ this.isModalOpening = false;
1719
1697
  }
1720
- /** Enforces that all slotted buttons will have their attention
1721
- * level set to 3, except the first button if it has
1722
- * level 1.
1723
- */
1724
- enforceAttentionLevelRules() {
1725
- this.slottedButtons.forEach((button, index) => {
1726
- if (index === 0 && button.isAttentionLevel1)
1698
+ showModalWindow(config, alertConfig) {
1699
+ return __awaiter(this, void 0, void 0, function* () {
1700
+ if (this.isModalOpening)
1727
1701
  return;
1728
- if (!button.isAttentionLevel3) {
1729
- button.attentionLevel = '3';
1702
+ config.flavor = config.flavor || 'modal';
1703
+ const modalPresentingElement = yield this.getPresentingElement(config.flavor);
1704
+ let currentBackdrop;
1705
+ const topMostModal = yield this.ionicModalController.getTop();
1706
+ if (topMostModal) {
1707
+ currentBackdrop =
1708
+ topMostModal.shadowRoot.querySelector('ion-backdrop');
1709
+ }
1710
+ const enterAnimation = this.modalAnimationBuilder.enterAnimation(currentBackdrop);
1711
+ const leaveAnimation = this.modalAnimationBuilder.leaveAnimation(currentBackdrop);
1712
+ const defaultModalSize = config.flavor === 'modal' ? 'medium' : null;
1713
+ const modalSize = config.size || defaultModalSize;
1714
+ const allow_scroll_class = 'allow-background-scroll';
1715
+ let customCssClasses = [];
1716
+ if (config.cssClass) {
1717
+ customCssClasses = Array.isArray(config.cssClass) ? config.cssClass : [config.cssClass];
1718
+ }
1719
+ if (config.interactWithBackground) {
1720
+ this.windowRef.nativeWindow.document.body.classList.add(allow_scroll_class);
1721
+ }
1722
+ let canDismiss = true;
1723
+ if (alertConfig) {
1724
+ canDismiss = () => __awaiter(this, void 0, void 0, function* () {
1725
+ const canBeDismissed = yield this.showAlert(alertConfig);
1726
+ return canBeDismissed;
1727
+ });
1728
+ }
1729
+ this.isModalOpening = true;
1730
+ const ionModal = yield this.ionicModalController.create({
1731
+ component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
1732
+ cssClass: [
1733
+ 'kirby-overlay',
1734
+ 'kirby-modal',
1735
+ config.flavor === 'drawer' ? 'kirby-drawer' : null,
1736
+ config.flavor === 'compact' ? 'kirby-modal-compact' : null,
1737
+ modalSize ? 'kirby-modal-' + modalSize : null,
1738
+ config.interactWithBackground ? 'interact-with-background' : null,
1739
+ ...customCssClasses,
1740
+ ],
1741
+ backdropDismiss: config.flavor === 'compact' || config.interactWithBackground ? false : true,
1742
+ showBackdrop: !config.interactWithBackground,
1743
+ componentProps: { config: config },
1744
+ swipeToClose: config.flavor != 'compact',
1745
+ presentingElement: modalPresentingElement,
1746
+ keyboardClose: false,
1747
+ canDismiss,
1748
+ enterAnimation,
1749
+ leaveAnimation,
1750
+ });
1751
+ if (config.interactWithBackground) {
1752
+ ionModal.onDidDismiss().then(() => {
1753
+ this.windowRef.nativeWindow.document.body.classList.remove(allow_scroll_class);
1754
+ });
1730
1755
  }
1756
+ yield ionModal.present();
1757
+ this.isModalOpening = false;
1758
+ return {
1759
+ dismiss: ionModal.dismiss.bind(ionModal),
1760
+ onWillDismiss: ionModal.onWillDismiss(),
1761
+ onDidDismiss: ionModal.onDidDismiss(),
1762
+ };
1731
1763
  });
1732
1764
  }
1733
- }
1734
- /** @nocollapse */ EmptyStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1735
- /** @nocollapse */ EmptyStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: EmptyStateComponent, selector: "kirby-empty-state", inputs: { iconName: "iconName", customIconName: "customIconName", title: "title", subtitle: "subtitle" }, queries: [{ propertyName: "slottedButtons", predicate: ButtonComponent }], ngImport: i0, template: "<article>\n <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" [customName]=\"customIconName\" size=\"lg\"></kirby-icon>\n </div>\n <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</article>\n", styles: ["article{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}h3.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}\n"], components: [{ type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1736
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: EmptyStateComponent, decorators: [{
1737
- type: Component,
1738
- args: [{ selector: 'kirby-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, template: "<article>\n <div *ngIf=\"iconName || customIconName\" class=\"icon-outline\">\n <kirby-icon [name]=\"iconName\" [customName]=\"customIconName\" size=\"lg\"></kirby-icon>\n </div>\n <h3 *ngIf=\"title\" class=\"title\">{{ title }}</h3>\n <p *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</p>\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n</article>\n", styles: ["article{max-width:330px;margin:auto;display:flex;flex-direction:column;justify-content:center;text-align:center}.icon-outline{width:96px;height:96px;margin-left:auto;margin-right:auto;margin-bottom:24px;display:flex;flex-direction:column;justify-content:center;border:4px solid var(--kirby-medium);border-radius:50%}kirby-icon{color:var(--kirby-medium)}h3.title{margin-bottom:8px}p.subtitle{margin-bottom:24px;white-space:pre-wrap}:host(.primary) .icon-outline{border-color:var(--kirby-primary)}:host(.primary) kirby-icon{color:var(--kirby-primary)}:host(.secondary) .icon-outline{border-color:var(--kirby-secondary)}:host(.secondary) kirby-icon{color:var(--kirby-secondary)}:host(.tertiary) .icon-outline{border-color:var(--kirby-tertiary)}:host(.tertiary) kirby-icon{color:var(--kirby-tertiary)}:host(.success) .icon-outline{border-color:var(--kirby-success)}:host(.success) kirby-icon{color:var(--kirby-success)}:host(.warning) .icon-outline{border-color:var(--kirby-warning)}:host(.warning) kirby-icon{color:var(--kirby-warning)}:host(.danger) .icon-outline{border-color:var(--kirby-danger)}:host(.danger) kirby-icon{color:var(--kirby-danger)}:host(.light) .icon-outline{border-color:var(--kirby-light)}:host(.light) kirby-icon{color:var(--kirby-light)}:host(.medium) .icon-outline{border-color:var(--kirby-medium)}:host(.medium) kirby-icon{color:var(--kirby-medium)}:host(.dark) .icon-outline{border-color:var(--kirby-dark)}:host(.dark) kirby-icon{color:var(--kirby-dark)}\n"] }]
1739
- }], propDecorators: { iconName: [{
1740
- type: Input
1741
- }], customIconName: [{
1742
- type: Input
1743
- }], title: [{
1744
- type: Input
1745
- }], subtitle: [{
1746
- type: Input
1747
- }], slottedButtons: [{
1748
- type: ContentChildren,
1749
- args: [ButtonComponent]
1750
- }] } });
1751
-
1752
- class ThemeColorDirective {
1753
- constructor() {
1754
- this._isDefault = true;
1755
- }
1756
- get isDefault() {
1757
- return this._isDefault;
1758
- }
1759
- get isPrimary() {
1760
- return this._isPrimary;
1765
+ registerPresentingElement(element) {
1766
+ ModalHelper.presentingElement = element;
1761
1767
  }
1762
- get isSecondary() {
1763
- return this._isSecondary;
1768
+ showAlert(config) {
1769
+ return __awaiter(this, void 0, void 0, function* () {
1770
+ const alert = yield this.alertHelper.showAlert(config);
1771
+ const result = yield alert.onWillDismiss;
1772
+ return result.data;
1773
+ });
1764
1774
  }
1765
- get isTertiary() {
1766
- return this._isTertiary;
1775
+ getPresentingElement(flavor) {
1776
+ return __awaiter(this, void 0, void 0, function* () {
1777
+ let modalPresentingElement = undefined;
1778
+ if (!flavor || flavor === 'modal') {
1779
+ const topMostModal = yield this.ionicModalController.getTop();
1780
+ if (!topMostModal) {
1781
+ modalPresentingElement = ModalHelper.presentingElement;
1782
+ }
1783
+ else if (!topMostModal.classList.contains('kirby-drawer') &&
1784
+ !topMostModal.classList.contains('kirby-modal-compact')) {
1785
+ modalPresentingElement = topMostModal;
1786
+ }
1787
+ }
1788
+ return modalPresentingElement;
1789
+ });
1767
1790
  }
1768
- get isSuccess() {
1769
- return this._isSuccess;
1791
+ scrollToTop(noModalRegisteredErrorMessage, duration) {
1792
+ return __awaiter(this, void 0, void 0, function* () {
1793
+ const modal = yield this.ionicModalController.getTop();
1794
+ if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
1795
+ throw new Error(noModalRegisteredErrorMessage);
1796
+ }
1797
+ modal.component.scrollToTop(duration);
1798
+ });
1770
1799
  }
1771
- get isWarning() {
1772
- return this._isWarning;
1800
+ scrollToBottom(noModalRegisteredErrorMessage, duration) {
1801
+ return __awaiter(this, void 0, void 0, function* () {
1802
+ const modal = yield this.ionicModalController.getTop();
1803
+ if (!modal || !(modal.component instanceof ModalWrapperComponent)) {
1804
+ throw new Error(noModalRegisteredErrorMessage);
1805
+ }
1806
+ modal.component.scrollToBottom(duration);
1807
+ });
1773
1808
  }
1774
- get isDanger() {
1775
- return this._isDanger;
1809
+ }
1810
+ // TODO: Make presentingElement an instance field when
1811
+ // forRoot()/singleton services has been solved:
1812
+ ModalHelper.presentingElement = undefined;
1813
+ /** @nocollapse */ ModalHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, deps: [{ token: i1.ModalController }, { token: ModalAnimationBuilderService }, { token: WindowRef }, { token: AlertHelper }], target: i0.ɵɵFactoryTarget.Injectable });
1814
+ /** @nocollapse */ ModalHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper });
1815
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, decorators: [{
1816
+ type: Injectable
1817
+ }], ctorParameters: function () { return [{ type: i1.ModalController }, { type: ModalAnimationBuilderService }, { type: WindowRef }, { type: AlertHelper }]; } });
1818
+
1819
+ class CardComponent {
1820
+ constructor(elementRef, resizeObserverService, renderer) {
1821
+ this.elementRef = elementRef;
1822
+ this.resizeObserverService = resizeObserverService;
1823
+ this.renderer = renderer;
1824
+ this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint({
1825
+ small: 360,
1826
+ medium: 720,
1827
+ large: 1024,
1828
+ });
1829
+ this.flat = false;
1830
+ this.highlighted = false;
1776
1831
  }
1777
- get isLight() {
1778
- return this._isLight;
1832
+ set backgroundImageUrl(value) {
1833
+ this._backgroundImage = `url('${value}')`;
1779
1834
  }
1780
- get isMedium() {
1781
- return this._isMedium;
1835
+ set sizes(value) {
1836
+ if (typeof value === 'string') {
1837
+ console.error('Sizes property cannot be a string. Please ensure the size property is bound as an expression:\n[sizes]="{...}"');
1838
+ }
1839
+ this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);
1782
1840
  }
1783
- get isDark() {
1784
- return this._isDark;
1841
+ set mode(value) {
1842
+ this.flat = value === 'flat';
1843
+ this.highlighted = value === 'highlighted';
1785
1844
  }
1786
- get isWhite() {
1787
- return this._isWhite;
1845
+ ngOnInit() {
1846
+ this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));
1788
1847
  }
1789
- get isBrightnessWhite() {
1790
- return this._isBrightnessWhite;
1848
+ ngOnDestroy() {
1849
+ this.resizeObserverService.unobserve(this.elementRef);
1791
1850
  }
1792
- get isBrightnessLight() {
1793
- return this._isBrightnessLight;
1851
+ sortSizesByBreakpoint(sizes) {
1852
+ return Object.entries(sizes).sort(this.compareSizesByBreakpoint);
1794
1853
  }
1795
- get isBrightnessDark() {
1796
- return this._isBrightnessDark;
1854
+ compareSizesByBreakpoint(a, b) {
1855
+ return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;
1797
1856
  }
1798
- set themeColor(value) {
1799
- this._isDefault = !value;
1800
- this._isPrimary = value === 'primary';
1801
- this._isSecondary = value === 'secondary';
1802
- this._isTertiary = value === 'tertiary';
1803
- this._isSuccess = value === 'success';
1804
- this._isWarning = value === 'warning';
1805
- this._isDanger = value === 'danger';
1806
- this._isLight = value === 'light';
1807
- this._isMedium = value === 'medium';
1808
- this._isDark = value === 'dark';
1809
- this._isWhite = value === 'white';
1810
- const colorBrightness = ColorHelper.getColorBrightness(value);
1811
- this._isBrightnessWhite = colorBrightness === 'white';
1812
- this._isBrightnessLight = colorBrightness === 'light';
1813
- this._isBrightnessDark = colorBrightness === 'dark';
1857
+ handleResize(entry) {
1858
+ const sizeAttributeName = 'size';
1859
+ const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];
1860
+ const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];
1861
+ if (entry.contentRect.width < smallestBreakpointWidth) {
1862
+ this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);
1863
+ }
1864
+ else {
1865
+ this.sizesSortedByBreakpoint.forEach(([size, width]) => {
1866
+ if (entry.contentRect.width >= width) {
1867
+ this.renderer.setAttribute(entry.target, sizeAttributeName, size);
1868
+ }
1869
+ });
1870
+ }
1814
1871
  }
1815
1872
  }
1816
- /** @nocollapse */ ThemeColorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ThemeColorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1817
- /** @nocollapse */ ThemeColorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: ThemeColorDirective, selector: "kirby-avatar[themeColor],\n kirby-card[themeColor],\n kirby-icon[themeColor],\n kirby-progress-circle-ring[themeColor],\n kirby-modal-footer[themeColor],\n kirby-empty-state[themeColor]", inputs: { themeColor: "themeColor" }, host: { properties: { "class.default": "this.isDefault", "class.primary": "this.isPrimary", "class.secondary": "this.isSecondary", "class.tertiary": "this.isTertiary", "class.success": "this.isSuccess", "class.warning": "this.isWarning", "class.danger": "this.isDanger", "class.light": "this.isLight", "class.medium": "this.isMedium", "class.dark": "this.isDark", "class.white": "this.isWhite", "class.kirby-color-brightness-white": "this.isBrightnessWhite", "class.kirby-color-brightness-light": "this.isBrightnessLight", "class.kirby-color-brightness-dark": "this.isBrightnessDark" } }, ngImport: i0 });
1818
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ThemeColorDirective, decorators: [{
1819
- type: Directive,
1820
- args: [{
1821
- // eslint-disable-next-line @angular-eslint/directive-selector
1822
- selector: `kirby-avatar[themeColor],
1823
- kirby-card[themeColor],
1824
- kirby-icon[themeColor],
1825
- kirby-progress-circle-ring[themeColor],
1826
- kirby-modal-footer[themeColor],
1827
- kirby-empty-state[themeColor]`,
1828
- }]
1829
- }], propDecorators: { isDefault: [{
1830
- type: HostBinding,
1831
- args: ['class.default']
1832
- }], isPrimary: [{
1833
- type: HostBinding,
1834
- args: ['class.primary']
1835
- }], isSecondary: [{
1836
- type: HostBinding,
1837
- args: ['class.secondary']
1838
- }], isTertiary: [{
1839
- type: HostBinding,
1840
- args: ['class.tertiary']
1841
- }], isSuccess: [{
1842
- type: HostBinding,
1843
- args: ['class.success']
1844
- }], isWarning: [{
1845
- type: HostBinding,
1846
- args: ['class.warning']
1847
- }], isDanger: [{
1848
- type: HostBinding,
1849
- args: ['class.danger']
1850
- }], isLight: [{
1851
- type: HostBinding,
1852
- args: ['class.light']
1853
- }], isMedium: [{
1854
- type: HostBinding,
1855
- args: ['class.medium']
1856
- }], isDark: [{
1857
- type: HostBinding,
1858
- args: ['class.dark']
1859
- }], isWhite: [{
1873
+ /** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
1874
+ /** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", mode: "mode", hasDarkBackgroundColor: "hasDarkBackgroundColor" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat", "class.highlighted": "this.highlighted", "class.interaction-state-make-lighter-and-louder": "this.hasDarkBackgroundColor" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}\n"] });
1875
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardComponent, decorators: [{
1876
+ type: Component,
1877
+ args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n <ng-content select=\"kirby-card-header\"></ng-content>\n <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n <ng-content></ng-content>\n </div>\n <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding:16px}:host.highlighted{box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover) and (pointer: fine){:host[role=button].highlighted:focus{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button].highlighted:focus:not(:focus-visible){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host[role=button].highlighted:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host[role=button].interaction-state-make-lighter-and-louder:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host[role=button].interaction-state-make-lighter-and-louder:active,:host[role=button].interaction-state-make-lighter-and-louder.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(.swiper-slide-active){box-shadow:0 10px 15px -10px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}\n"] }]
1878
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
1879
+ type: Input
1880
+ }], subtitle: [{
1881
+ type: Input
1882
+ }], _backgroundImage: [{
1860
1883
  type: HostBinding,
1861
- args: ['class.white']
1862
- }], isBrightnessWhite: [{
1884
+ args: ['style.--kirby-card-background-image']
1885
+ }], backgroundImageUrl: [{
1886
+ type: Input
1887
+ }], hasPadding: [{
1888
+ type: Input
1889
+ }], sizes: [{
1890
+ type: Input
1891
+ }], flat: [{
1863
1892
  type: HostBinding,
1864
- args: ['class.kirby-color-brightness-white']
1865
- }], isBrightnessLight: [{
1893
+ args: ['class.flat']
1894
+ }], highlighted: [{
1866
1895
  type: HostBinding,
1867
- args: ['class.kirby-color-brightness-light']
1868
- }], isBrightnessDark: [{
1896
+ args: ['class.highlighted']
1897
+ }], mode: [{
1898
+ type: Input
1899
+ }], hasDarkBackgroundColor: [{
1869
1900
  type: HostBinding,
1870
- args: ['class.kirby-color-brightness-dark']
1871
- }], themeColor: [{
1901
+ args: ['class.interaction-state-make-lighter-and-louder']
1902
+ }, {
1872
1903
  type: Input
1873
1904
  }] } });
1874
1905
 
1875
- class AlertComponent {
1876
- constructor(elementRef, windowRef) {
1877
- this.elementRef = elementRef;
1878
- this.windowRef = windowRef;
1879
- this.BLUR_WRAPPER_DELAY_IN_MS = 50;
1880
- this.scrollY = Math.abs(this.windowRef.nativeWindow.scrollY);
1881
- }
1882
- set title(title) {
1883
- this.title$ = typeof title === 'string' ? of(title) : title;
1884
- }
1885
- set message(message) {
1886
- this.message$ = typeof message === 'string' ? of(message) : message;
1906
+ class CardHeaderComponent {
1907
+ constructor() {
1908
+ this.flagged = null;
1887
1909
  }
1888
- ngAfterViewInit() {
1889
- setTimeout(() => {
1890
- this.alertWrapper.nativeElement.focus();
1891
- this.alertWrapper.nativeElement.blur();
1892
- }, this.BLUR_WRAPPER_DELAY_IN_MS);
1910
+ }
1911
+ /** @nocollapse */ CardHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1912
+ /** @nocollapse */ CardHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CardHeaderComponent, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged" }, host: { properties: { "class": "this.flagged" } }, ngImport: i0, template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:var(--kirby-internal-card-header-padding, 16px);color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color: var(--kirby-danger);--kirby-card-header-color: var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color: var(--kirby-warning);--kirby-card-header-color: var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color: var(--kirby-success);--kirby-card-header-color: var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding: 2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1913
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CardHeaderComponent, decorators: [{
1914
+ type: Component,
1915
+ args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header>\n <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n <ng-content></ng-content>\n</header>\n", styles: [":host{display:block;border-top-left-radius:16px;border-top-right-radius:16px;text-align:center;padding:var(--kirby-internal-card-header-padding, 16px);color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color)}h2{font-size:16px;font-weight:400;margin:0 0 var(--kirby-internal-card-header-margin-bottom, 8px);line-height:var(--kirby-internal-card-header-line-height, 28px)}h2.bold{font-weight:700}h4{font-size:14px;margin:0;font-weight:400}:host(.danger){--kirby-card-header-background-color: var(--kirby-danger);--kirby-card-header-color: var(--kirby-danger-contrast)}:host(.warning){--kirby-card-header-background-color: var(--kirby-warning);--kirby-card-header-color: var(--kirby-warning-contrast)}:host(.success){--kirby-card-header-background-color: var(--kirby-success);--kirby-card-header-color: var(--kirby-success-contrast)}:host(.info){--kirby-card-header-background-color: var(--kirby-semi-light);--kirby-card-header-color: var(--kirby-semi-light-contrast)}:host(.danger,.warning,.success,.info){--kirby-internal-card-header-padding: 2px 8px}:host(.danger,.warning,.success,.info) h2{--kirby-internal-card-header-line-height: 24px;--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
1916
+ }], propDecorators: { title: [{
1917
+ type: Input
1918
+ }], subtitle: [{
1919
+ type: Input
1920
+ }], isTitleBold: [{
1921
+ type: Input
1922
+ }], flagged: [{
1923
+ type: HostBinding,
1924
+ args: ['class']
1925
+ }, {
1926
+ type: Input
1927
+ }] } });
1928
+
1929
+ class ActionSheetComponent {
1930
+ constructor() {
1931
+ this.cancelButtonText = 'Cancel';
1932
+ this.hideCancel = false;
1933
+ this.disabled = false;
1934
+ this.cancel = new EventEmitter();
1935
+ this.itemSelect = new EventEmitter();
1893
1936
  }
1894
- onFocusChange() {
1895
- // This fixes an undesired scroll behaviour occurring on keyboard-tabbing
1896
- this.windowRef.nativeWindow.scrollTo({ top: this.scrollY });
1937
+ onItemSelect(selection) {
1938
+ this.itemSelect.emit(selection);
1897
1939
  }
1898
1940
  onCancel() {
1899
- const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
1900
- ionModalElement && ionModalElement.dismiss(false);
1901
- }
1902
- onOk() {
1903
- const ionModalElement = this.elementRef.nativeElement.closest('ion-modal');
1904
- ionModalElement && ionModalElement.dismiss(true);
1941
+ this.cancel.emit();
1905
1942
  }
1906
1943
  }
1907
- /** @nocollapse */ AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ElementRef }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
1908
- /** @nocollapse */ AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AlertComponent, selector: "kirby-alert", inputs: { title: "title", message: "message", iconName: "iconName", iconThemeColor: "iconThemeColor", okBtn: "okBtn", okBtnIsDestructive: "okBtnIsDestructive", cancelBtn: "cancelBtn" }, host: { properties: { "class.ion-page": "false" } }, viewQueries: [{ propertyName: "alertWrapper", first: true, predicate: ["alertWrapper"], descendants: true, static: true }], ngImport: i0, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelBtn\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"onCancel()\"\n >\n {{ cancelBtn }}\n </button>\n <button\n kirby-button\n [size]=\"cancelBtn ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [isDestructive]=\"okBtnIsDestructive\"\n (click)=\"onOk()\"\n >\n {{ okBtn }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"], components: [{ type: EmptyStateComponent, selector: "kirby-empty-state", inputs: ["iconName", "customIconName", "title", "subtitle"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: ThemeColorDirective, selector: "kirby-avatar[themeColor],\n kirby-card[themeColor],\n kirby-icon[themeColor],\n kirby-progress-circle-ring[themeColor],\n kirby-modal-footer[themeColor],\n kirby-empty-state[themeColor]", inputs: ["themeColor"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
1909
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertComponent, decorators: [{
1910
- type: Component,
1911
- args: [{ selector: 'kirby-alert', host: { '[class.ion-page]': 'false' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<article #alertWrapper>\n <kirby-empty-state\n [iconName]=\"iconName\"\n [themeColor]=\"iconThemeColor\"\n [title]=\"title$ | async\"\n [subtitle]=\"message$ | async\"\n ></kirby-empty-state>\n <div class=\"buttongroup\">\n <button\n kirby-button\n *ngIf=\"cancelBtn\"\n attentionLevel=\"3\"\n class=\"cancel-btn\"\n (click)=\"onCancel()\"\n >\n {{ cancelBtn }}\n </button>\n <button\n kirby-button\n [size]=\"cancelBtn ? null : 'lg'\"\n attentionLevel=\"1\"\n class=\"ok-btn\"\n [isDestructive]=\"okBtnIsDestructive\"\n (click)=\"onOk()\"\n >\n {{ okBtn }}\n </button>\n </div>\n</article>\n", styles: ["article{overflow:hidden;padding:24px 16px 16px}@media (max-width: 320px){article{padding:8px}}.buttongroup{display:flex;justify-content:space-around}.buttongroup button{width:50%;margin-left:6px;margin-right:6px}\n"] }]
1912
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: WindowRef }]; }, propDecorators: { alertWrapper: [{
1913
- type: ViewChild,
1914
- args: ['alertWrapper', { static: true }]
1915
- }], title: [{
1916
- type: Input
1917
- }], message: [{
1944
+ /** @nocollapse */ ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1945
+ /** @nocollapse */ ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ActionSheetComponent, 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 *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [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=\"2\"\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"], components: [{ type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: CardHeaderComponent, selector: "kirby-card-header", inputs: ["title", "subtitle", "isTitleBold", "flagged"] }, { type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
1946
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetComponent, decorators: [{
1947
+ type: Component,
1948
+ args: [{ selector: 'kirby-action-sheet', template: "<kirby-card>\n <kirby-card-header *ngIf=\"header\" [title]=\"header\" [isTitleBold]=\"true\" [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=\"2\"\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"] }]
1949
+ }], propDecorators: { cancelButtonText: [{
1918
1950
  type: Input
1919
- }], iconName: [{
1951
+ }], hideCancel: [{
1920
1952
  type: Input
1921
- }], iconThemeColor: [{
1953
+ }], disabled: [{
1922
1954
  type: Input
1923
- }], okBtn: [{
1955
+ }], header: [{
1924
1956
  type: Input
1925
- }], okBtnIsDestructive: [{
1957
+ }], subheader: [{
1926
1958
  type: Input
1927
- }], cancelBtn: [{
1959
+ }], items: [{
1928
1960
  type: Input
1961
+ }], cancel: [{
1962
+ type: Output
1963
+ }], itemSelect: [{
1964
+ type: Output
1929
1965
  }] } });
1930
1966
 
1931
- class AlertHelper {
1967
+ class ActionSheetHelper {
1932
1968
  constructor(ionicModalController) {
1933
1969
  this.ionicModalController = ionicModalController;
1934
1970
  }
1935
- showAlert(config) {
1971
+ showActionSheet(config) {
1936
1972
  return __awaiter(this, void 0, void 0, function* () {
1973
+ const cancel = new EventEmitter();
1974
+ const itemSelect = new EventEmitter();
1937
1975
  const ionModal = yield this.ionicModalController.create({
1938
- component: AlertComponent,
1939
- componentProps: this.getComponentProps(config),
1940
- cssClass: ['kirby-overlay', 'kirby-alert'],
1941
- mode: 'ios',
1942
- backdropDismiss: false,
1976
+ component: ActionSheetComponent,
1977
+ cssClass: ['kirby-overlay', 'kirby-action-sheet'],
1978
+ componentProps: Object.assign(Object.assign({}, config), { cancel: cancel, itemSelect: itemSelect }),
1979
+ backdropDismiss: true,
1980
+ });
1981
+ // Remove 'modal-shadow' element as we are no longer able to hide it with CSS in Ionic 6.
1982
+ // We need to remove it so it does not obstruct the backdrop-click to dismiss functionality.
1983
+ ionModal.shadowRoot.querySelector('.modal-shadow').remove();
1984
+ const cancelSubscription = cancel.subscribe(() => ionModal.dismiss());
1985
+ const itemSelectSubscription = itemSelect.subscribe((item) => ionModal.dismiss(item));
1986
+ const onDidDismiss = ionModal.onDidDismiss();
1987
+ onDidDismiss.then((_) => {
1988
+ cancelSubscription.unsubscribe();
1989
+ itemSelectSubscription.unsubscribe();
1943
1990
  });
1944
1991
  yield ionModal.present();
1945
1992
  return {
@@ -1949,28 +1996,10 @@ class AlertHelper {
1949
1996
  };
1950
1997
  });
1951
1998
  }
1952
- getComponentProps(config) {
1953
- return Object.assign(Object.assign({}, config), { okBtn: this.getOkBtn(config), cancelBtn: config.cancelBtn, okBtnIsDestructive: this.getOkBtnIsDestructive(config), iconName: config.icon && config.icon.name, iconThemeColor: config.icon && config.icon.themeColor });
1954
- }
1955
- getOkBtn(config) {
1956
- let text;
1957
- if (config.okBtn) {
1958
- if (typeof config.okBtn === 'string') {
1959
- text = config.okBtn;
1960
- }
1961
- else {
1962
- text = config.okBtn.text;
1963
- }
1964
- }
1965
- return text;
1966
- }
1967
- getOkBtnIsDestructive(config) {
1968
- return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
1969
- }
1970
1999
  }
1971
- /** @nocollapse */ AlertHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
1972
- /** @nocollapse */ AlertHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper });
1973
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AlertHelper, decorators: [{
2000
+ /** @nocollapse */ ActionSheetHelper.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
2001
+ /** @nocollapse */ ActionSheetHelper.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper });
2002
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ActionSheetHelper, decorators: [{
1974
2003
  type: Injectable
1975
2004
  }], ctorParameters: function () { return [{ type: i1.ModalController }]; } });
1976
2005
 
@@ -2272,9 +2301,9 @@ class ModalController {
2272
2301
  yield this.hideAll();
2273
2302
  }));
2274
2303
  }
2275
- showModal(config, onClose) {
2304
+ showModal(config, onClose, alertConfig) {
2276
2305
  return __awaiter(this, void 0, void 0, function* () {
2277
- yield this.showAndRegisterOverlay(() => this.modalHelper.showModalWindow(config), onClose);
2306
+ yield this.showAndRegisterOverlay(() => this.modalHelper.showModalWindow(config, alertConfig), onClose);
2278
2307
  });
2279
2308
  }
2280
2309
  navigateToModal(path, queryParams) {
@@ -2451,7 +2480,7 @@ class AvatarComponent {
2451
2480
  }
2452
2481
  }
2453
2482
  /** @nocollapse */ AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2454
- /** @nocollapse */ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AvatarComponent, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", shadow: "shadow", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ shadow: shadow, overlay: overlay }\">\n <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.shadow{box-shadow:0 2px 4px 2px #71717166}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2483
+ /** @nocollapse */ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: AvatarComponent, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", shadow: "shadow", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ shadow: shadow, overlay: overlay }\">\n <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.shadow{box-shadow:0 2px 4px 2px #71717166}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2455
2484
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AvatarComponent, decorators: [{
2456
2485
  type: Component,
2457
2486
  args: [{ selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ shadow: shadow, overlay: overlay }\">\n <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.shadow{box-shadow:0 2px 4px 2px #71717166}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
@@ -2636,6 +2665,42 @@ function mergeDeepAll(...objects) {
2636
2665
  return objectsWithoutUndefined.reduce((originalObject, overrideObject) => mergeDeep(originalObject, overrideObject));
2637
2666
  }
2638
2667
 
2668
+ /*
2669
+ Utility function to check if a given element
2670
+ has an ancestor with a specific node name.
2671
+
2672
+ Can be given a 'stopNodeName' to limit the search
2673
+ as to not climb all the way up through the DOM tree.
2674
+
2675
+ Returns true when element has the ancestorNodeName
2676
+ or an ancestor has the ancestorNodeName.
2677
+
2678
+ Returns false otherwise.
2679
+ */
2680
+ const elementHasAncestor = (element, ancestorNodeName, stopNodeName) => {
2681
+ switch (element === null || element === void 0 ? void 0 : element.nodeName) {
2682
+ case undefined:
2683
+ case stopNodeName === null || stopNodeName === void 0 ? void 0 : stopNodeName.toUpperCase():
2684
+ return false;
2685
+ case ancestorNodeName.toUpperCase():
2686
+ return true;
2687
+ default:
2688
+ return elementHasAncestor(element.parentElement, ancestorNodeName, stopNodeName);
2689
+ }
2690
+ };
2691
+
2692
+ /*
2693
+ Type guard is needed as of chart.js@3.8.1. The config type has been updated to a union type,
2694
+ and the newly added type 'ChartConfigurationCustomTypesPerDataset' does not contain the 'type' property.
2695
+ Typescript will throw an error, when trying to access a property that doesn't exist on all union types,
2696
+ unless a type guard is used.
2697
+ */
2698
+ const chartConfigHasType = (config) => {
2699
+ return 'type' in config;
2700
+ };
2701
+
2702
+ // re-export helpers from core, to preserve backwards compatability
2703
+
2639
2704
  class AnnotationsDelegate {
2640
2705
  constructor(chartConfigService) {
2641
2706
  this.chartConfigService = chartConfigService;
@@ -2671,32 +2736,6 @@ class AnnotationsDelegate {
2671
2736
  }
2672
2737
  }
2673
2738
 
2674
- /*
2675
- Utility function to check if a given element
2676
- has an ancestor with a specific node name.
2677
-
2678
- Can be given a 'stopNodeName' to limit the search
2679
- as to not climb all the way up through the DOM tree.
2680
-
2681
- Returns true when element has the ancestorNodeName
2682
- or an ancestor has the ancestorNodeName.
2683
-
2684
- Returns false otherwise.
2685
- */
2686
- const elementHasAncestor = (element, ancestorNodeName, stopNodeName) => {
2687
- switch (element === null || element === void 0 ? void 0 : element.nodeName) {
2688
- case undefined:
2689
- case stopNodeName === null || stopNodeName === void 0 ? void 0 : stopNodeName.toUpperCase():
2690
- return false;
2691
- case ancestorNodeName.toUpperCase():
2692
- return true;
2693
- default:
2694
- return elementHasAncestor(element.parentElement, ancestorNodeName, stopNodeName);
2695
- }
2696
- };
2697
-
2698
- // re-export helpers from core, to preserve backwards compatability
2699
-
2700
2739
  const { getThemeColorHexString: getThemeColorHexString$2 } = ColorHelper;
2701
2740
  const hoverBackgroundColor = getThemeColorHexString$2('primary');
2702
2741
  const backgroundColor = getThemeColorHexString$2('secondary');
@@ -3246,6 +3285,9 @@ const CHART_TYPES_CONFIG = {
3246
3285
  labelColor: (tooltipItem) => {
3247
3286
  return {
3248
3287
  backgroundColor: tooltipItem.dataset.borderColor,
3288
+ borderColor: getThemeColorHexString('semi-light'),
3289
+ borderWidth: 2, // This value must be exactly 2. If it is less, a white "border" will appear, if greater than, a shadow around the box will be shown.
3290
+ // An issue has been created, requesting a test to check this value doesn´t change: https://github.com/kirbydesign/designsystem/issues/2578
3249
3291
  };
3250
3292
  },
3251
3293
  },
@@ -3410,7 +3452,7 @@ class ChartJSService {
3410
3452
  const annotationPluginOptions = annotations
3411
3453
  ? this.annotationsDelegate.createAnnotationPluginOptionsObject(annotations)
3412
3454
  : {};
3413
- let mergedOptions = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
3455
+ const mergedOptions = mergeDeepAll(typeConfigOptions, customOptions, annotationPluginOptions);
3414
3456
  return this.chartConfigService.applyInteractionFunctionsExtensions(mergedOptions);
3415
3457
  }
3416
3458
  getDefaultLabels(datasets) {
@@ -3435,7 +3477,7 @@ class ChartJSService {
3435
3477
  });
3436
3478
  }
3437
3479
  createDatasets(data) {
3438
- let datasets = isNumberArray(data) ? [{ data }] : data;
3480
+ const datasets = isNumberArray(data) ? [{ data }] : data;
3439
3481
  if (this.highlightedElements)
3440
3482
  this.addHighlightedElementsToDatasets(this.highlightedElements, datasets);
3441
3483
  return datasets;
@@ -3459,7 +3501,9 @@ class ChartJSService {
3459
3501
  annotations,
3460
3502
  });
3461
3503
  this.chart.options = options;
3462
- this.chart.config.type = this.chartConfigService.chartTypeToChartJSType(chartType);
3504
+ if (chartConfigHasType(this.chart.config)) {
3505
+ this.chart.config.type = this.chartConfigService.chartTypeToChartJSType(chartType);
3506
+ }
3463
3507
  }
3464
3508
  initializeNewChart(canvasElement, config) {
3465
3509
  this.chart = new Chart(canvasElement, config);
@@ -4020,10 +4064,10 @@ class ItemComponent {
4020
4064
  }
4021
4065
  }
4022
4066
  /** @nocollapse */ ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
4023
- /** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.selected": "this.selected", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"_selectable ? true : null\"\n [attr.tabindex]=\"_selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:14px;--transition: all 80ms linear 0ms}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top: 8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom: 8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonReorder, selector: "ion-reorder" }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4067
+ /** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.selected": "this.selected", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"_selectable ? true : null\"\n [attr.tabindex]=\"_selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px;--transition: background-color 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item{--background: whitesmoke}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], components: [{ type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1.IonReorder, selector: "ion-reorder" }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4024
4068
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, decorators: [{
4025
4069
  type: Component,
4026
- args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"_selectable ? true : null\"\n [attr.tabindex]=\"_selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:14px;--transition: all 80ms linear 0ms}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-list-item:first-of-type) ion-item{--padding-top: 8px}:host-context(kirby-list-item:first-of-type kirby-card) ion-item{--padding-top: 0}:host-context(kirby-list-item:last-of-type) ion-item{--padding-bottom: 8px}:host-context(kirby-list-item:last-of-type kirby-card) ion-item{--padding-bottom: 0}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
4070
+ args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"_selectable ? true : null\"\n [attr.tabindex]=\"_selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px;--transition: background-color 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item{--background: whitesmoke}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
4027
4071
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
4028
4072
  type: Input
4029
4073
  }], selected: [{
@@ -4300,6 +4344,9 @@ class DropdownComponent {
4300
4344
  this.verticalDirection = VerticalDirection.down;
4301
4345
  this._items = [];
4302
4346
  this._selectedIndex = -1;
4347
+ // _focusedIndex keeps track of which element has focus and will be selected
4348
+ // if it is activated (by pressing ENTER or SPACE key)
4349
+ this._focusedIndex = -1;
4303
4350
  this.itemTextProperty = 'text';
4304
4351
  this.placeholder = 'Please select:';
4305
4352
  this.attentionLevel = '3';
@@ -4314,6 +4361,17 @@ class DropdownComponent {
4314
4361
  this.change = new EventEmitter();
4315
4362
  this._value = null;
4316
4363
  this._role = 'listbox';
4364
+ /* The 'clicked' class is applied through Hostbinding to prevent the dropdown from getting a focus ring on click.
4365
+ There is a bug that causes the dropdown to get a focus ring on click, if it is the first element that is interacted with
4366
+ after the page is loaded. If the user interacts with any other element before, then the dropdown won't get a focus ring.
4367
+ See issue: https://github.com/kirbydesign/designsystem/issues/2477.
4368
+
4369
+ This solution can potentially be refactored, when popover is not experimental anymore. Then it could be possible
4370
+ to close the dropdown when the popover backdrop is clicked, instead of relying on the blur event, which is utilized
4371
+ by this line below: this.elementRef.nativeElement.focus(). Right now this forces the blur event to be triggered, when
4372
+ clicking outside of the dropdown.
4373
+ */
4374
+ this.clicked = false;
4317
4375
  this.itemClickUnlisten = [];
4318
4376
  this._onChange = () => { };
4319
4377
  this._onTouched = () => { };
@@ -4331,9 +4389,19 @@ class DropdownComponent {
4331
4389
  set selectedIndex(value) {
4332
4390
  if (this._selectedIndex != value) {
4333
4391
  this._selectedIndex = value;
4392
+ this.focusedIndex = this._selectedIndex;
4334
4393
  this._value = this.items[this.selectedIndex] || null;
4335
4394
  }
4336
4395
  }
4396
+ get focusedIndex() {
4397
+ return this._focusedIndex;
4398
+ }
4399
+ set focusedIndex(value) {
4400
+ if (this._focusedIndex !== value) {
4401
+ this._focusedIndex = value;
4402
+ this.scrollItemIntoView(this._focusedIndex);
4403
+ }
4404
+ }
4337
4405
  set popout(direction) {
4338
4406
  this.horizontalDirection = direction || HorizontalDirection.right;
4339
4407
  }
@@ -4392,6 +4460,7 @@ class DropdownComponent {
4392
4460
  }
4393
4461
  onToggle(event) {
4394
4462
  event.stopPropagation();
4463
+ this.clicked = true;
4395
4464
  if (!this.isOpen) {
4396
4465
  this.elementRef.nativeElement.focus();
4397
4466
  }
@@ -4427,8 +4496,14 @@ class DropdownComponent {
4427
4496
  if (this.usePopover)
4428
4497
  return;
4429
4498
  if (!this.intersectionObserverRef) {
4499
+ // Get the design token size of the button. In the button stylesheet a medium button height is utils.size(xl)
4500
+ // and a small button height is utils.size("l")
4501
+ const designTokenSizeHeight = this.size === 'md' ? 'xl' : 'l';
4502
+ // Setting the rootMargin equal to the height of the button
4503
+ // allows the Intersection Observer Callback to be called
4504
+ // even if the dropdown button is intersecting with the viewport
4430
4505
  const options = {
4431
- rootMargin: '0px',
4506
+ rootMargin: DesignTokenHelper.size(designTokenSizeHeight),
4432
4507
  };
4433
4508
  const callback = (entries) => {
4434
4509
  // Only apply alignment when opening:
@@ -4489,6 +4564,8 @@ class DropdownComponent {
4489
4564
  this.state = OpenState.opening;
4490
4565
  // ensures that the dropdown is opened in case the IntersectionObserverCallback isn't invoked
4491
4566
  this.showDropdownTimeoutId = setTimeout(() => this.showDropdown(), DropdownComponent.OPEN_DELAY_IN_MS);
4567
+ // Move focus to selected item (if any)
4568
+ this.focusedIndex = this.selectedIndex;
4492
4569
  }
4493
4570
  }
4494
4571
  showDropdown() {
@@ -4557,9 +4634,9 @@ class DropdownComponent {
4557
4634
  selectItem(index) {
4558
4635
  if (index != this.selectedIndex) {
4559
4636
  this.selectedIndex = index;
4637
+ this.focusedIndex = index;
4560
4638
  this.change.emit(this.value);
4561
4639
  this._onChange(this.value);
4562
- this.scrollItemIntoView(index);
4563
4640
  }
4564
4641
  }
4565
4642
  _selectItemByValue(value) {
@@ -4579,17 +4656,7 @@ class DropdownComponent {
4579
4656
  const selectedKirbyItem = kirbyItems.toArray()[index];
4580
4657
  if (selectedKirbyItem && selectedKirbyItem.nativeElement) {
4581
4658
  const itemElement = selectedKirbyItem.nativeElement;
4582
- const scrollContainer = this.cardElement.nativeElement;
4583
- const itemTop = itemElement.offsetTop;
4584
- const itemBottom = itemElement.offsetTop + itemElement.offsetHeight;
4585
- const containerVisibleTop = scrollContainer.scrollTop;
4586
- const containerVisibleBottom = scrollContainer.clientHeight + scrollContainer.scrollTop;
4587
- if (itemTop < containerVisibleTop) {
4588
- scrollContainer.scrollTop = itemTop;
4589
- }
4590
- else if (itemBottom > containerVisibleBottom) {
4591
- scrollContainer.scrollTop = itemBottom - scrollContainer.clientHeight;
4592
- }
4659
+ itemElement.scrollIntoView({ block: 'nearest' });
4593
4660
  }
4594
4661
  }
4595
4662
  }
@@ -4598,6 +4665,12 @@ class DropdownComponent {
4598
4665
  event.preventDefault();
4599
4666
  this.close();
4600
4667
  }
4668
+ if (this.clicked) {
4669
+ // Remove the 'clicked' class (Hostbinding) if the user has previously opened the dropdown by clicking,
4670
+ // since the class prevents the focus ring from showing,
4671
+ // which is expected to happen, when using the tab key
4672
+ this.clicked = false;
4673
+ }
4601
4674
  }
4602
4675
  _onMouseDown(event) {
4603
4676
  if (this.disabled) {
@@ -4632,37 +4705,54 @@ class DropdownComponent {
4632
4705
  this.close();
4633
4706
  this._onTouched();
4634
4707
  }
4635
- _onSpace(event) {
4708
+ _onEnterOrSpace(event) {
4636
4709
  event.preventDefault();
4637
4710
  event.stopPropagation();
4638
- if (!this.isOpen) {
4639
- this.open();
4711
+ if (this.isOpen) {
4712
+ this.selectItem(this.focusedIndex);
4640
4713
  }
4641
- }
4642
- _onEnter(event) {
4643
- event.preventDefault();
4644
- event.stopPropagation();
4645
4714
  this.toggle();
4646
4715
  }
4647
4716
  _onArrowKeys(event) {
4648
4717
  if (this.disabled)
4649
- return;
4718
+ return false;
4650
4719
  // Mirror default HTML5 select behaviour - prevent left/right arrows when open:
4651
4720
  if (this.isOpen && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
4652
- return;
4721
+ return false;
4722
+ }
4723
+ if (!this.isOpen) {
4724
+ // Avoid page scroll
4725
+ event.preventDefault();
4726
+ this.open();
4727
+ // If no selected item then focus first or last item
4728
+ if (this.selectedIndex < 0) {
4729
+ switch (event.key) {
4730
+ case 'ArrowUp':
4731
+ this.focusedIndex = this.items.length - 1;
4732
+ break;
4733
+ case 'ArrowDown':
4734
+ this.focusedIndex = 0;
4735
+ break;
4736
+ default:
4737
+ break;
4738
+ }
4739
+ }
4740
+ return false;
4653
4741
  }
4654
- const newIndex = this.keyboardHandlerService.handle(event, this.items, this.selectedIndex);
4655
- if (newIndex > -1) {
4656
- this.selectItem(newIndex);
4742
+ const newFocusedIndex = this.keyboardHandlerService.handle(event, this.items, this.focusedIndex);
4743
+ if (newFocusedIndex > -1) {
4744
+ this.focusedIndex = newFocusedIndex;
4657
4745
  }
4658
4746
  return false;
4659
4747
  }
4660
4748
  _onHomeEndKeys(event) {
4661
4749
  if (this.disabled)
4662
4750
  return;
4663
- const newIndex = this.keyboardHandlerService.handle(event, this.items, this.selectedIndex);
4664
- if (newIndex > -1) {
4665
- this.selectItem(newIndex);
4751
+ if (!this.isOpen)
4752
+ return;
4753
+ const newFocusedIndex = this.keyboardHandlerService.handle(event, this.items, this.focusedIndex);
4754
+ if (newFocusedIndex > -1) {
4755
+ this.focusedIndex = newFocusedIndex;
4666
4756
  }
4667
4757
  return false;
4668
4758
  }
@@ -4681,13 +4771,13 @@ class DropdownComponent {
4681
4771
  }
4682
4772
  DropdownComponent.OPEN_DELAY_IN_MS = 100;
4683
4773
  /** @nocollapse */ DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: KeyboardHandlerService }], target: i0.ɵɵFactoryTarget.Component });
4684
- /** @nocollapse */ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: DropdownComponent, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnter($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "keydown.space": "_onSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "class.with-popover": "this.usePopover", "attr.tabindex": "this._tabindex", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "attr.role": "this._role", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp" } }, providers: [
4774
+ /** @nocollapse */ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: DropdownComponent, selector: "kirby-dropdown", inputs: { items: "items", selectedIndex: "selectedIndex", focusedIndex: "focusedIndex", itemTextProperty: "itemTextProperty", placeholder: "placeholder", popout: "popout", attentionLevel: "attentionLevel", expand: "expand", disabled: "disabled", hasError: "hasError", size: "size", tabindex: "tabindex", usePopover: "usePopover" }, outputs: { change: "change" }, host: { listeners: { "keydown.tab": "_onTab($event)", "mousedown": "_onMouseDown($event)", "touchstart": "_onTouchStart($event)", "focus": "_onFocus()", "keydown.enter": "_onEnterOrSpace($event)", "keydown.escape": "_onEnterOrEscape()", "blur": "_onBlur($event)", "keydown.space": "_onEnterOrSpace($event)", "keydown.arrowup": "_onArrowKeys($event)", "keydown.arrowdown": "_onArrowKeys($event)", "keydown.arrowleft": "_onArrowKeys($event)", "keydown.arrowright": "_onArrowKeys($event)", "keydown.home": "_onHomeEndKeys($event)", "keydown.end": "_onHomeEndKeys($event)" }, properties: { "attr.disabled": "this._isDisabled", "class.error": "this.hasError", "class.with-popover": "this.usePopover", "attr.tabindex": "this._tabindex", "attr.no-blur": "this._noBlurOnScroll", "class.expand": "this._isBlockLevel", "attr.role": "this._role", "class.is-opening": "this._isOpening", "class.is-open": "this.isOpen", "class.popout-left": "this._popoutLeft", "class.popout-up": "this._popoutUp", "class.clicked": "this.clicked" } }, providers: [
4685
4775
  {
4686
4776
  provide: NG_VALUE_ACCESSOR,
4687
4777
  useExisting: forwardRef((() => DropdownComponent)),
4688
4778
  multi: true,
4689
4779
  },
4690
- ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
4780
+ ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
4691
4781
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
4692
4782
  type: Component,
4693
4783
  args: [{ selector: 'kirby-dropdown', providers: [
@@ -4696,11 +4786,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
4696
4786
  useExisting: forwardRef((() => DropdownComponent)),
4697
4787
  multi: true,
4698
4788
  },
4699
- ], template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item let-selected=\"selected\" let-index=\"index\">\n <kirby-item [selectable]=\"true\" [selected]=\"selected\" (click)=\"onItemSelect(index)\" role=\"option\">\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-top:4px;margin-bottom:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host(:not(.with-popover)) kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host(:not(.with-popover)).is-opening kirby-card{display:block}:host(:not(.with-popover)).is-open kirby-card{display:block;opacity:1}:host(:not(.with-popover)).popout-left kirby-card{right:0}:host(:not(.with-popover)).popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host(:not(.with-popover)).popout-up.is-open>button{z-index:801}:host(.with-popover).is-open kirby-card{display:block}:host(.is-open)>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
4789
+ ], template: "<button\n kirby-button\n [size]=\"size\"\n [attentionLevel]=\"isOpen ? attentionLevelOpen : attentionLevel\"\n tabindex=\"-1\"\n (click)=\"onToggle($event)\"\n (mousedown)=\"onButtonMouseEvent($event)\"\n [disabled]=\"disabled\"\n type=\"button\"\n>\n <span class=\"text\">{{ selectedText || placeholder }}</span>\n <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<ng-container *ngTemplateOutlet=\"usePopover ? popoverTemplate : itemWrapperTemplate\"></ng-container>\n\n<ng-template #popoverTemplate>\n <kirby-popover\n [target]=\"buttonElement\"\n [popout]=\"popout\"\n (click)=\"_onPopoverClick($event)\"\n (willHide)=\"_onPopoverWillHide()\"\n >\n <ng-container *ngTemplateOutlet=\"itemWrapperTemplate\"></ng-container>\n </kirby-popover>\n</ng-template>\n\n<ng-template #itemWrapperTemplate>\n <kirby-card>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: {\n $implicit: item,\n selected: i === selectedIndex,\n focused: i === focusedIndex,\n index: i\n }\n \"\n ></ng-container>\n </ng-container>\n </kirby-card>\n</ng-template>\n\n<ng-template\n #defaultItemTemplate\n let-item\n let-selected=\"selected\"\n let-index=\"index\"\n let-focused=\"focused\"\n>\n <kirby-item\n [selectable]=\"true\"\n [selected]=\"selected\"\n (click)=\"onItemSelect(index)\"\n [class.focused]=\"focused\"\n role=\"option\"\n >\n <!-- Tabindex fixes issue with popover dropdown not working in safari -->\n <h3 tabindex=\"0\">{{ getTextFromItem(item) }}</h3>\n <kirby-icon *ngIf=\"selected\" name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n </kirby-item>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}@media (hover: hover) and (pointer: fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{border-color:var(--kirby-danger)}:host>button{position:relative;margin:0;outline:none;width:100%}:host>button.attention-level2{border:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host kirby-card{display:none;opacity:0;position:absolute;z-index:800}:host.is-opening kirby-card{display:block}:host.is-open kirby-card{display:block;opacity:1}:host.is-open>button{box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14}:host.popout-left kirby-card{right:0}:host.popout-up kirby-card{top:0;margin-top:-4px;transform:translateY(-100%)}:host.popout-up.is-open>button{z-index:801}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;margin-block:4px;overflow-y:auto;box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;min-width:288px;max-width:calc(100vw - 32px)}@media (min-width: 321px){kirby-card{min-width:343px}}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}@media (hover: hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"] }]
4700
4790
  }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }]; }, propDecorators: { items: [{
4701
4791
  type: Input
4702
4792
  }], selectedIndex: [{
4703
4793
  type: Input
4794
+ }], focusedIndex: [{
4795
+ type: Input
4704
4796
  }], itemTextProperty: [{
4705
4797
  type: Input
4706
4798
  }], placeholder: [{
@@ -4756,6 +4848,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
4756
4848
  }], _popoutUp: [{
4757
4849
  type: HostBinding,
4758
4850
  args: ['class.popout-up']
4851
+ }], clicked: [{
4852
+ type: HostBinding,
4853
+ args: ['class.clicked']
4759
4854
  }], itemTemplate: [{
4760
4855
  type: ContentChild,
4761
4856
  args: [ListItemTemplateDirective, { static: true, read: TemplateRef }]
@@ -4798,12 +4893,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
4798
4893
  }], _onBlur: [{
4799
4894
  type: HostListener,
4800
4895
  args: ['blur', ['$event']]
4801
- }], _onSpace: [{
4802
- type: HostListener,
4803
- args: ['keydown.space', ['$event']]
4804
- }], _onEnter: [{
4896
+ }], _onEnterOrSpace: [{
4805
4897
  type: HostListener,
4806
4898
  args: ['keydown.enter', ['$event']]
4899
+ }, {
4900
+ type: HostListener,
4901
+ args: ['keydown.space', ['$event']]
4807
4902
  }], _onArrowKeys: [{
4808
4903
  type: HostListener,
4809
4904
  args: ['keydown.arrowup', ['$event']]
@@ -5189,7 +5284,7 @@ class CalendarComponent {
5189
5284
  }
5190
5285
  }
5191
5286
  /** @nocollapse */ CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CalendarComponent, deps: [{ token: CalendarHelper }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
5192
- /** @nocollapse */ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CalendarComponent, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n <div class=\"month-navigator\">\n <button\n [disabled]=\"!_canNavigateBack\"\n (click)=\"_changeMonth(-1)\"\n kirby-button\n [noDecoration]=\"true\"\n class=\"no-margin\"\n >\n <kirby-icon name=\"arrow-back\"></kirby-icon>\n </button>\n\n <div class=\"month-and-year\">\n <span class=\"month\">{{ activeMonthName }}</span\n ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n </div>\n\n <button\n [disabled]=\"!_canNavigateForward\"\n (click)=\"_changeMonth(1)\"\n kirby-button\n [noDecoration]=\"true\"\n class=\"no-margin\"\n >\n <kirby-icon name=\"arrow-more\"></kirby-icon>\n </button>\n </div>\n <kirby-dropdown\n *ngIf=\"_hasYearNavigator\"\n [usePopover]=\"usePopover\"\n [selectedIndex]=\"navigatedYear\"\n [items]=\"navigableYears\"\n popout=\"left\"\n (change)=\"_changeYear($event)\"\n >\n </kirby-dropdown>\n</div>\n\n<table>\n <thead>\n <tr>\n <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n </tr>\n </thead>\n\n <tbody>\n <tr *ngFor=\"let week of _month\">\n <td *ngFor=\"let day of week\">\n <div\n (click)=\"_onDateSelected(day)\"\n class=\"{{ day.cssClasses }} contain-state-layer\"\n [class.selected]=\"day.isSelected\"\n >\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\">{{ day.date }}</span>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){visibility:hidden;pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
5287
+ /** @nocollapse */ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CalendarComponent, selector: "kirby-calendar", inputs: { timezone: "timezone", disableWeekends: "disableWeekends", disablePastDates: "disablePastDates", disableFutureDates: "disableFutureDates", alwaysEnableToday: "alwaysEnableToday", customLocales: "customLocales", usePopover: "usePopover", yearNavigatorOptions: "yearNavigatorOptions", selectedDate: "selectedDate", disabledDates: "disabledDates", enabledDates: "enabledDates", todayDate: "todayDate", minDate: "minDate", maxDate: "maxDate" }, outputs: { dateChange: "dateChange", dateSelect: "dateSelect", yearSelect: "yearSelect" }, host: { properties: { "class.has-year-navigator": "this._hasYearNavigator" } }, providers: [CalendarHelper], viewQueries: [{ propertyName: "calendarContainer", first: true, predicate: ["calendarContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n <div class=\"month-navigator\">\n <button\n [disabled]=\"!_canNavigateBack\"\n (click)=\"_changeMonth(-1)\"\n kirby-button\n [noDecoration]=\"true\"\n class=\"no-margin\"\n >\n <kirby-icon name=\"arrow-back\"></kirby-icon>\n </button>\n\n <div class=\"month-and-year\">\n <span class=\"month\">{{ activeMonthName }}</span\n ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n </div>\n\n <button\n [disabled]=\"!_canNavigateForward\"\n (click)=\"_changeMonth(1)\"\n kirby-button\n [noDecoration]=\"true\"\n class=\"no-margin\"\n >\n <kirby-icon name=\"arrow-more\"></kirby-icon>\n </button>\n </div>\n <kirby-dropdown\n *ngIf=\"_hasYearNavigator\"\n [usePopover]=\"usePopover\"\n [selectedIndex]=\"navigatedYear\"\n [items]=\"navigableYears\"\n popout=\"left\"\n (change)=\"_changeYear($event)\"\n >\n </kirby-dropdown>\n</div>\n\n<table>\n <thead>\n <tr>\n <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n </tr>\n </thead>\n\n <tbody>\n <tr *ngFor=\"let week of _month\">\n <td *ngFor=\"let day of week\">\n <div\n (click)=\"_onDateSelected(day)\"\n class=\"{{ day.cssClasses }} contain-state-layer\"\n [class.selected]=\"day.isSelected\"\n >\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\">{{ day.date }}</span>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){visibility:hidden;pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"], components: [{ type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "isDestructive", "themeColor", "expand", "isFloating", "size"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover"], outputs: ["change"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
5193
5288
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CalendarComponent, decorators: [{
5194
5289
  type: Component,
5195
5290
  args: [{ selector: 'kirby-calendar', providers: [CalendarHelper], template: "<div class=\"header\">\n <div class=\"month-navigator\">\n <button\n [disabled]=\"!_canNavigateBack\"\n (click)=\"_changeMonth(-1)\"\n kirby-button\n [noDecoration]=\"true\"\n class=\"no-margin\"\n >\n <kirby-icon name=\"arrow-back\"></kirby-icon>\n </button>\n\n <div class=\"month-and-year\">\n <span class=\"month\">{{ activeMonthName }}</span\n ><span *ngIf=\"!_hasYearNavigator\" class=\"year\">{{ activeYear }}</span>\n </div>\n\n <button\n [disabled]=\"!_canNavigateForward\"\n (click)=\"_changeMonth(1)\"\n kirby-button\n [noDecoration]=\"true\"\n class=\"no-margin\"\n >\n <kirby-icon name=\"arrow-more\"></kirby-icon>\n </button>\n </div>\n <kirby-dropdown\n *ngIf=\"_hasYearNavigator\"\n [usePopover]=\"usePopover\"\n [selectedIndex]=\"navigatedYear\"\n [items]=\"navigableYears\"\n popout=\"left\"\n (change)=\"_changeYear($event)\"\n >\n </kirby-dropdown>\n</div>\n\n<table>\n <thead>\n <tr>\n <th *ngFor=\"let weekDay of _weekDays\">{{ weekDay }}</th>\n </tr>\n </thead>\n\n <tbody>\n <tr *ngFor=\"let week of _month\">\n <td *ngFor=\"let day of week\">\n <div\n (click)=\"_onDateSelected(day)\"\n class=\"{{ day.cssClasses }} contain-state-layer\"\n [class.selected]=\"day.isSelected\"\n >\n <span class=\"state-layer\" aria-hidden=\"true\"></span>\n <span class=\"content-layer\">{{ day.date }}</span>\n </div>\n </td>\n </tr>\n </tbody>\n</table>\n\n<!-- <iframe src=\"kirby/components/calendar/calendar.webview.html\" #calendarContainer style=\"width: 320px; height: 304px; border: 0\"> -->\n", styles: ["table{width:100%;border-collapse:collapse;-webkit-user-select:none;user-select:none;margin-bottom:8px}th,td{text-align:center;padding:0}th:first-child,td:first-child{padding-left:8px}th:last-child,td:last-child{padding-right:8px}th{height:50px;border-bottom:1px solid var(--kirby-background-color)}.header,th,td{background-color:transparent}.header{display:flex;justify-content:space-between;margin:8px 8px 0}.month-navigator{display:flex;flex-grow:1;align-items:center;justify-content:space-between}.month-navigator button:disabled{opacity:.5;pointer-events:none}.month-and-year{-webkit-user-select:none;user-select:none}.month-and-year .month{font-weight:700;margin-right:8px}:host(.has-year-navigator) .month-navigator{flex-grow:0}:host(.has-year-navigator) .month-and-year{width:80px;margin:0 8px;text-align:center}:host(.has-year-navigator) .month{margin-right:0}.day{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;width:40px;height:40px;margin:4px 0;color:var(--color, var(--kirby-black));background-color:var(--background-color, transparent)}.day.disabled,.day:not(.selectable){--color: var(--kirby-text-color-semi-dark)}.day.today{color:var(--kirby-medium-contrast);background-color:var(--kirby-medium)}@media (hover: hover){.day.today:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.day.today:active,.day.today.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}.day.selected{color:var(--kirby-black-contrast);background-color:var(--kirby-black)}@media (hover: hover){.day.selected:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}.day.selected:active,.day.selected.interaction-state-active{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast)}.day:not(.current-month){visibility:hidden;pointer-events:none}.contain-state-layer{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}.contain-state-layer .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}.contain-state-layer .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}.contain-state-layer .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){.contain-state-layer:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.contain-state-layer:active,.contain-state-layer.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}\n"] }]
@@ -5255,7 +5350,7 @@ class ItemSlidingComponent {
5255
5350
  }
5256
5351
  }
5257
5352
  /** @nocollapse */ ItemSlidingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemSlidingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5258
- /** @nocollapse */ ItemSlidingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemSlidingComponent, selector: "kirby-item-sliding", inputs: { swipeActions: "swipeActions", side: "side" }, ngImport: i0, template: "<ion-item-sliding>\n <ng-content></ng-content>\n\n <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n <ng-container *ngFor=\"let swipeAction of swipeActions\">\n <ion-item-option\n *ngIf=\"!swipeAction.isDisabled\"\n [ngClass]=\"swipeAction.type\"\n (click)=\"swipeAction.onSelected()\"\n >\n <kirby-icon\n *ngIf=\"swipeAction.icon !== undefined\"\n [name]=\"swipeAction.icon\"\n slot=\"top\"\n ></kirby-icon>\n <ion-label>{{ swipeAction.title }}</ion-label>\n </ion-item-option>\n </ng-container>\n </ion-item-options>\n</ion-item-sliding>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}ion-item-option{min-width:92px}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
5353
+ /** @nocollapse */ ItemSlidingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ItemSlidingComponent, selector: "kirby-item-sliding", inputs: { swipeActions: "swipeActions", side: "side" }, ngImport: i0, template: "<ion-item-sliding>\n <ng-content></ng-content>\n\n <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n <ng-container *ngFor=\"let swipeAction of swipeActions\">\n <ion-item-option\n *ngIf=\"!swipeAction.isDisabled\"\n [ngClass]=\"swipeAction.type\"\n (click)=\"swipeAction.onSelected()\"\n >\n <kirby-icon\n *ngIf=\"swipeAction.icon !== undefined\"\n [name]=\"swipeAction.icon\"\n slot=\"top\"\n ></kirby-icon>\n <ion-label>{{ swipeAction.title }}</ion-label>\n </ion-item-option>\n </ng-container>\n </ion-item-options>\n</ion-item-sliding>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}ion-item-option{min-width:92px}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
5259
5354
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemSlidingComponent, decorators: [{
5260
5355
  type: Component,
5261
5356
  args: [{ selector: 'kirby-item-sliding', template: "<ion-item-sliding>\n <ng-content></ng-content>\n\n <ion-item-options *ngIf=\"_hasSwipeActions\" [side]=\"_side\">\n <ng-container *ngFor=\"let swipeAction of swipeActions\">\n <ion-item-option\n *ngIf=\"!swipeAction.isDisabled\"\n [ngClass]=\"swipeAction.type\"\n (click)=\"swipeAction.onSelected()\"\n >\n <kirby-icon\n *ngIf=\"swipeAction.icon !== undefined\"\n [name]=\"swipeAction.icon\"\n slot=\"top\"\n ></kirby-icon>\n <ion-label>{{ swipeAction.title }}</ion-label>\n </ion-item-option>\n </ng-container>\n </ion-item-options>\n</ion-item-sliding>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}ion-item-option{min-width:92px}\n"] }]
@@ -5309,7 +5404,7 @@ class CheckboxComponent {
5309
5404
  }
5310
5405
  }
5311
5406
  /** @nocollapse */ CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5312
- /** @nocollapse */ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CheckboxComponent, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, ngImport: i0, template: "<div class=\"wrapper\">\n <ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n [attr.aria-labelledby]=\"text ? _labelId : null\"\n ></ion-checkbox>\n <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #0ee270;--border-color-checked: #0ee270}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-checked: #0dcd65;--border-color-checked: #0dcd65}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{opacity:1;--checkmark-color: var(--kirby-semi-dark);--background: var(--kirby-semi-light);--background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px;margin-left:16px;margin-right:12px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label .wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.checkbox-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.checkbox-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.checkbox-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-checkbox{position:static;flex-shrink:0;flex-grow:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], components: [{ type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }], directives: [{ type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5407
+ /** @nocollapse */ CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: CheckboxComponent, selector: "kirby-checkbox", inputs: { checked: "checked", attentionLevel: "attentionLevel", text: "text", size: "size", hasError: "hasError", disabled: "disabled" }, outputs: { checkedChange: "checkedChange" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "class.error": "this.hasError", "attr.disabled": "this._isDisabled", "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2" } }, ngImport: i0, template: "<div class=\"wrapper\">\n <ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n [attr.aria-labelledby]=\"text ? _labelId : null\"\n ></ion-checkbox>\n <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #0ee270;--border-color-checked: #0ee270}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-checked: #0dcd65;--border-color-checked: #0dcd65}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{opacity:1;--checkmark-color: var(--kirby-semi-dark);--background: var(--kirby-semi-light);--background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px;margin-left:16px;margin-right:12px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label .wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.checkbox-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.checkbox-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.checkbox-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-checkbox{position:static;flex-shrink:0;flex-grow:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], components: [{ type: i1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }], directives: [{ type: i1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5313
5408
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: CheckboxComponent, decorators: [{
5314
5409
  type: Component,
5315
5410
  args: [{ selector: 'kirby-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\">\n <ion-checkbox\n mode=\"md\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (ionChange)=\"onChecked($event.detail.checked)\"\n [attr.aria-labelledby]=\"text ? _labelId : null\"\n ></ion-checkbox>\n <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.attention-level1 ion-checkbox{--checkmark-color: var(--kirby-black);--background-checked: var(--kirby-success);--border-color-checked: var(--kirby-success)}@media (hover: hover){:host.attention-level1 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #0ee270;--border-color-checked: #0ee270}}:host.attention-level1 ion-checkbox:active,:host.attention-level1 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-checked: #0dcd65;--border-color-checked: #0dcd65}:host.attention-level2 ion-checkbox{--checkmark-color: var(--kirby-white);--background-checked: var(--kirby-black);--border-color-checked: var(--kirby-black)}@media (hover: hover){:host.attention-level2 ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background-checked: #5c5c5c;--border-color-checked: #5c5c5c}}:host.attention-level2 ion-checkbox:active,:host.attention-level2 ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--checkmark-color: #ebebeb;--background-checked: #6e6e6e;--border-color-checked: #6e6e6e}:host.error ion-checkbox{--border-color: var(--kirby-danger)}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-checkbox{opacity:1;--checkmark-color: var(--kirby-semi-dark);--background: var(--kirby-semi-light);--background-checked: var(--kirby-semi-light);--border-color: var(--kirby-medium);--border-color-checked: var(--kirby-semi-light)}:host ion-checkbox{--transition: 80ms;--size: 24px;--checkmark-width: 4px;--background: var(--kirby-white);--border-width: 1px;--border-color: var(--kirby-semi-dark);--border-radius: 6px;margin-left:16px;margin-right:12px}@media (hover: hover) and (pointer: fine){:host ion-checkbox:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){:host ion-checkbox:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: #ebebeb}}:host ion-checkbox:active,:host ion-checkbox.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #e0e0e0}:host ion-checkbox::part(container){padding:4px}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label .wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.checkbox-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.checkbox-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.checkbox-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-checkbox{position:static;flex-shrink:0;flex-grow:0}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-checkbox{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
@@ -5369,6 +5464,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
5369
5464
  args: ['class.is-selected']
5370
5465
  }] } });
5371
5466
 
5467
+ class TableComponent {
5468
+ constructor() {
5469
+ this.fixedLayout = false;
5470
+ }
5471
+ }
5472
+ /** @nocollapse */ TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5473
+ /** @nocollapse */ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TableComponent, selector: "table[kirby-table]", inputs: { fixedLayout: "fixedLayout" }, host: { properties: { "class.kirby-table-layout-fixed": "this.fixedLayout" } }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, styles: ["table[kirby-table]{width:100%;border-collapse:collapse}table[kirby-table].kirby-table-layout-fixed{table-layout:fixed}tr:not(:last-child){border-bottom:1px solid var(--kirby-medium)}@media (hover: hover){tr.kirby-selectable-row:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-light)}}thead tr{border-bottom:1px solid var(--kirby-medium)}th{text-align:left;font-weight:400;font-size:12px;color:var(--kirby-text-color-semi-dark);padding:8px 16px}td{padding:16px;font-weight:400;font-size:14px;color:var(--kirby-text-color-black);vertical-align:middle}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5474
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TableComponent, decorators: [{
5475
+ type: Component,
5476
+ args: [{ selector: 'table[kirby-table]', template: `<ng-content></ng-content>`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["table[kirby-table]{width:100%;border-collapse:collapse}table[kirby-table].kirby-table-layout-fixed{table-layout:fixed}tr:not(:last-child){border-bottom:1px solid var(--kirby-medium)}@media (hover: hover){tr.kirby-selectable-row:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-light)}}thead tr{border-bottom:1px solid var(--kirby-medium)}th{text-align:left;font-weight:400;font-size:12px;color:var(--kirby-text-color-semi-dark);padding:8px 16px}td{padding:16px;font-weight:400;font-size:14px;color:var(--kirby-text-color-black);vertical-align:middle}\n"] }]
5477
+ }], propDecorators: { fixedLayout: [{
5478
+ type: HostBinding,
5479
+ args: ['class.kirby-table-layout-fixed']
5480
+ }, {
5481
+ type: Input
5482
+ }] } });
5483
+
5484
+ class TableRowComponent {
5485
+ constructor() {
5486
+ this.selectable = false;
5487
+ }
5488
+ }
5489
+ /** @nocollapse */ TableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5490
+ /** @nocollapse */ TableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TableRowComponent, selector: "tr[kirby-tr]", inputs: { selectable: "selectable" }, host: { properties: { "class.kirby-selectable-row": "this.selectable" } }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5491
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TableRowComponent, decorators: [{
5492
+ type: Component,
5493
+ args: [{
5494
+ // eslint-disable-next-line @angular-eslint/component-selector
5495
+ selector: 'tr[kirby-tr]',
5496
+ template: ` <ng-content></ng-content> `,
5497
+ encapsulation: ViewEncapsulation.None,
5498
+ changeDetection: ChangeDetectionStrategy.OnPush,
5499
+ }]
5500
+ }], propDecorators: { selectable: [{
5501
+ type: HostBinding,
5502
+ args: ['class.kirby-selectable-row']
5503
+ }, {
5504
+ type: Input
5505
+ }] } });
5506
+
5507
+ class DataTableModule {
5508
+ }
5509
+ /** @nocollapse */ DataTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
5510
+ /** @nocollapse */ DataTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataTableModule, declarations: [TableComponent, TableRowComponent], imports: [CommonModule], exports: [TableComponent, TableRowComponent] });
5511
+ /** @nocollapse */ DataTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataTableModule, imports: [[CommonModule]] });
5512
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DataTableModule, decorators: [{
5513
+ type: NgModule,
5514
+ args: [{
5515
+ declarations: [TableComponent, TableRowComponent],
5516
+ imports: [CommonModule],
5517
+ exports: [TableComponent, TableRowComponent],
5518
+ }]
5519
+ }] });
5520
+
5372
5521
  class DividerComponent {
5373
5522
  }
5374
5523
  /** @nocollapse */ DividerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -5395,7 +5544,7 @@ class RadioComponent {
5395
5544
  }
5396
5545
  }
5397
5546
  /** @nocollapse */ RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5398
- /** @nocollapse */ RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RadioComponent, selector: "kirby-radio", inputs: { value: "value", text: "text", size: "size", disabled: "disabled" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "attr.disabled": "this._isDisabled" } }, viewQueries: [{ propertyName: "ionRadioElement", first: true, predicate: IonRadio, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"wrapper\">\n <ion-radio\n [value]=\"value\"\n [disabled]=\"disabled\"\n mode=\"md\"\n [attr.aria-labelledby]=\"text ? _labelId : null\"\n ></ion-radio>\n <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label div.wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.radio-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.radio-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.radio-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-radio{position:static;margin-left:16px;margin-right:12px}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{opacity:1;--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}ion-radio{min-height:24px;min-width:24px;padding:2px;box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media (hover: hover) and (pointer: fine){ion-radio:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color;background-color:var(--kirby-white)}@media (hover: hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color: transparent;--color-checked: #16f17b}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(mark){width:60%;height:60%}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked{--border-width: 0px}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], components: [{ type: i1.IonRadio, selector: "ion-radio", inputs: ["color", "disabled", "mode", "name", "value"] }], directives: [{ type: i1.RadioValueAccessor, selector: "ion-radio" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5547
+ /** @nocollapse */ RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: RadioComponent, selector: "kirby-radio", inputs: { value: "value", text: "text", size: "size", disabled: "disabled" }, host: { properties: { "class.has-label": "this.text", "class": "this.size", "attr.disabled": "this._isDisabled" } }, viewQueries: [{ propertyName: "ionRadioElement", first: true, predicate: IonRadio, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<div class=\"wrapper\">\n <ion-radio\n [value]=\"value\"\n [disabled]=\"disabled\"\n mode=\"md\"\n [attr.aria-labelledby]=\"text ? _labelId : null\"\n ></ion-radio>\n <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label div.wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.radio-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.radio-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.radio-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-radio{position:static;margin-left:16px;margin-right:12px}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{opacity:1;--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}ion-radio{min-height:24px;min-width:24px;padding:2px;box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media (hover: hover) and (pointer: fine){ion-radio:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color;background-color:var(--kirby-white)}@media (hover: hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color: transparent;--color-checked: #16f17b}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(mark){width:60%;height:60%}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked{--border-width: 0px}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"], components: [{ type: i1.IonRadio, selector: "ion-radio", inputs: ["color", "disabled", "mode", "name", "value"] }], directives: [{ type: i1.RadioValueAccessor, selector: "ion-radio" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5399
5548
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RadioComponent, decorators: [{
5400
5549
  type: Component,
5401
5550
  args: [{ selector: 'kirby-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"wrapper\">\n <ion-radio\n [value]=\"value\"\n [disabled]=\"disabled\"\n mode=\"md\"\n [attr.aria-labelledby]=\"text ? _labelId : null\"\n ></ion-radio>\n <span [id]=\"_labelId\" *ngIf=\"text\">{{ text }}</span>\n</div>\n", styles: [":host{display:inline-block}:host.has-label{display:block;line-height:24px;white-space:pre-line}:host.has-label div.wrapper{position:relative;display:inline-flex;align-items:flex-start;vertical-align:top;padding:16px 12px 16px 0}:host.has-label :host-context(.radio-xs) .wrapper,:host.has-label.xs .wrapper{padding-top:4px;padding-bottom:4px}:host.has-label :host-context(.radio-sm) .wrapper,:host.has-label.sm .wrapper{padding-top:10px;padding-bottom:10px}:host.has-label :host-context(.radio-md) .wrapper,:host.has-label.md .wrapper{padding-top:16px;padding-bottom:16px}:host.has-label ion-radio{position:static;margin-left:16px;margin-right:12px}:host[disabled]{color:var(--kirby-text-color-semi-dark)}:host[disabled] ion-radio{opacity:1;--color: var(--kirby-medium);--color-checked: var(--kirby-medium)}:host[disabled] ion-radio::part(container){background-color:var(--kirby-semi-light)}ion-radio{min-height:24px;min-width:24px;padding:2px;box-sizing:border-box;--border-width: 1px;--color: var(--kirby-semi-dark);--color-checked: var(--kirby-success)}@media (hover: hover) and (pointer: fine){ion-radio:focus-within::part(container){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-radio::part(container){transition:all 80ms linear 0ms;transition-property:background-color;background-color:var(--kirby-white)}@media (hover: hover){ion-radio:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}ion-radio:hover::part(container){background-color:#ebebeb}}ion-radio:active,ion-radio.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--color: transparent;--color-checked: #16f17b}ion-radio:active::part(container),ion-radio.interaction-state-active::part(container){background-color:#e0e0e0}ion-radio::part(mark){width:60%;height:60%}ion-radio :host-context(kirby-radio-group.error) ion-radio,ion-radio :host-context(kirby-radio-group.error) ion-radio:active,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio,ion-radio :host-context(kirby-radio-group.ng-touched.ng-invalid) ion-radio:active{--color: var(--kirby-danger)}ion-radio.radio-checked{--border-width: 0px}ion-radio.radio-checked:not(:focus):not(.radio-disabled)::part(container){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14}:host-context(kirby-item){z-index:1}:host-context(kirby-item) ion-radio{margin:0}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}\n"] }]
@@ -5621,7 +5770,7 @@ class RadioGroupComponent {
5621
5770
  useExisting: RadioGroupComponent,
5622
5771
  multi: true,
5623
5772
  },
5624
- ], queries: [{ propertyName: "_customItemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedRadioButtons", predicate: RadioComponent, descendants: true }], viewQueries: [{ propertyName: "radioButtons", predicate: RadioComponent, descendants: true }], ngImport: i0, template: "<ion-radio-group *ngIf=\"_hasItems\" [value]=\"value\" (ionChange)=\"_onChange($event.detail.value)\">\n <ng-container *ngIf=\"!items || !items.length; else itemsTemplate\">\n <ng-content></ng-content>\n </ng-container>\n</ion-radio-group>\n\n<ng-template #itemsTemplate>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n _customItemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item>\n <kirby-radio\n [value]=\"item\"\n [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n [text]=\"_getTextFromItem(item)\"\n ></kirby-radio>\n</ng-template>\n", styles: ["ion-radio-group{display:inherit;flex-wrap:inherit}\n"], components: [{ type: i1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { type: RadioComponent, selector: "kirby-radio", inputs: ["value", "text", "size", "disabled"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5773
+ ], queries: [{ propertyName: "_customItemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef }, { propertyName: "projectedRadioButtons", predicate: RadioComponent, descendants: true }], viewQueries: [{ propertyName: "radioButtons", predicate: RadioComponent, descendants: true }], ngImport: i0, template: "<ion-radio-group *ngIf=\"_hasItems\" [value]=\"value\" (ionChange)=\"_onChange($event.detail.value)\">\n <ng-container *ngIf=\"!items || !items.length; else itemsTemplate\">\n <ng-content></ng-content>\n </ng-container>\n</ion-radio-group>\n\n<ng-template #itemsTemplate>\n <ng-container *ngFor=\"let item of items; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n _customItemTemplate || defaultItemTemplate;\n context: { $implicit: item, selected: i === selectedIndex, index: i }\n \"\n ></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #defaultItemTemplate let-item>\n <kirby-radio\n [value]=\"item\"\n [disabled]=\"disabled || _getDisabledStateFromItem(item)\"\n [text]=\"_getTextFromItem(item)\"\n ></kirby-radio>\n</ng-template>\n", styles: ["ion-radio-group{display:inherit;flex-wrap:inherit}\n"], components: [{ type: i1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { type: RadioComponent, selector: "kirby-radio", inputs: ["value", "text", "size", "disabled"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5625
5774
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RadioGroupComponent, decorators: [{
5626
5775
  type: Component,
5627
5776
  args: [{ selector: 'kirby-radio-group', styles: ['ion-radio-group { display: inherit; flex-wrap: inherit}'], providers: [
@@ -5664,6 +5813,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
5664
5813
  args: ['ionBlur']
5665
5814
  }] } });
5666
5815
 
5816
+ class AffixDirective {
5817
+ constructor(el) {
5818
+ this.el = el;
5819
+ }
5820
+ }
5821
+ /** @nocollapse */ AffixDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
5822
+ /** @nocollapse */ AffixDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: AffixDirective, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 });
5823
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: AffixDirective, decorators: [{
5824
+ type: Directive,
5825
+ args: [{
5826
+ // eslint-disable-next-line
5827
+ selector: '[kirby-affix]',
5828
+ }]
5829
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { type: [{
5830
+ type: Input,
5831
+ args: ['kirby-affix']
5832
+ }] } });
5833
+
5667
5834
  class FormFieldMessageComponent {
5668
5835
  constructor() {
5669
5836
  this.position = 'left';
@@ -5825,7 +5992,7 @@ class TextareaComponent {
5825
5992
  }
5826
5993
  }
5827
5994
  /** @nocollapse */ TextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5828
- /** @nocollapse */ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TextareaComponent, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{transition:all 80ms linear 0ms;transition-property:background-color;font-family:var(--kirby-font-family);resize:none}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 721px){:host{resize:vertical}}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5995
+ /** @nocollapse */ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TextareaComponent, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{transition:all 80ms linear 0ms;transition-property:background-color;font-family:var(--kirby-font-family);resize:none}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 721px){:host{resize:vertical}}\n"], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5829
5996
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TextareaComponent, decorators: [{
5830
5997
  type: Component,
5831
5998
  args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-white);color:var(--kirby-white-contrast);border:none;box-sizing:border-box;display:block;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-text-color-semi-dark)}:host{transition:all 80ms linear 0ms;transition-property:background-color;font-family:var(--kirby-font-family);resize:none}@media (hover: hover){:host:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 721px){:host{resize:vertical}}\n"] }]
@@ -5868,10 +6035,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
5868
6035
  }] } });
5869
6036
 
5870
6037
  class FormFieldComponent {
5871
- constructor(elementRef, platform, renderer, windowRef) {
6038
+ constructor(elementRef, platform, renderer, windowRef, resizeObserverService) {
5872
6039
  this.platform = platform;
5873
6040
  this.renderer = renderer;
5874
6041
  this.windowRef = windowRef;
6042
+ this.resizeObserverService = resizeObserverService;
5875
6043
  this.isRegistered = false;
5876
6044
  this._labelId = UniqueIdGenerator.scopedTo('kirby-form-field-label').next();
5877
6045
  this.element = elementRef.nativeElement;
@@ -5915,6 +6083,19 @@ class FormFieldComponent {
5915
6083
  if (this.label && this.radioGroupElement) {
5916
6084
  this.renderer.setAttribute(this.radioGroupElement.nativeElement, 'aria-labelledby', this._labelId);
5917
6085
  }
6086
+ // Measure the width of all slotted affix elements,
6087
+ // and apply their width + standard padding to the input elements
6088
+ // padding, so the start/end of the input is correctly indented.
6089
+ if (this.input) {
6090
+ this.affixElements.forEach((affix) => {
6091
+ this.resizeObserverService.observe(affix.el, (entry) => {
6092
+ const padding = affix.type === 'prefix' ? 'padding-left' : 'padding-right';
6093
+ const affixWidth = entry.contentRect.width;
6094
+ const existingPadding = parseInt(DesignTokenHelper.size('s'));
6095
+ this.renderer.setStyle(this.input.nativeElement, `${padding}`, `${affixWidth + existingPadding}px`);
6096
+ });
6097
+ });
6098
+ }
5918
6099
  }
5919
6100
  ngAfterContentChecked() {
5920
6101
  if (!this.inputElement) {
@@ -5938,17 +6119,23 @@ class FormFieldComponent {
5938
6119
  this.windowRef.nativeWindow.document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
5939
6120
  detail: this.element,
5940
6121
  }));
6122
+ this.affixElements.forEach((affix) => {
6123
+ this.resizeObserverService.unobserve(affix.el);
6124
+ });
5941
6125
  }
5942
6126
  }
5943
- /** @nocollapse */ FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: PlatformService }, { token: i0.Renderer2 }, { token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
5944
- /** @nocollapse */ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<label *ngIf=\"_wrapContentInLabel\">\n <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message || counter\" class=\"texts\">\n <kirby-form-field-message\n *ngIf=\"message\"\n class=\"message\"\n [text]=\"message\"\n ></kirby-form-field-message>\n\n <div *ngIf=\"counter\" class=\"counter\">\n <ng-content select=\"kirby-input-counter\"></ng-content>\n </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n <ng-content select=\"input[kirby-input]\"></ng-content>\n <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n <ng-content select=\"kirby-radio-group\"></ng-content>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n <ng-container *ngIf=\"label\">\n <span class=\"text\">{{ label }}</span>\n </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-container *ngIf=\"label\">\n <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}\n"], components: [{ type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6127
+ /** @nocollapse */ FormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: PlatformService }, { token: i0.Renderer2 }, { token: WindowRef }, { token: ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component });
6128
+ /** @nocollapse */ FormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "<label *ngIf=\"_wrapContentInLabel\">\n <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message || counter\" class=\"texts\">\n <kirby-form-field-message\n *ngIf=\"message\"\n class=\"message\"\n [text]=\"message\"\n ></kirby-form-field-message>\n\n <div *ngIf=\"counter\" class=\"counter\">\n <ng-content select=\"kirby-input-counter\"></ng-content>\n </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n <div class=\"affix-container\">\n <div class=\"prefix vertical-align semi-dark-text\">\n <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n </div>\n <ng-content select=\"input[kirby-input]\"></ng-content>\n <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n <ng-content select=\"kirby-radio-group\"></ng-content>\n <div class=\"suffix vertical-align semi-dark-text\">\n <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n <ng-container *ngIf=\"label\">\n <span class=\"text\">{{ label }}</span>\n </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-container *ngIf=\"label\">\n <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}\n"], components: [{ type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5945
6129
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FormFieldComponent, decorators: [{
5946
6130
  type: Component,
5947
- args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', template: "<label *ngIf=\"_wrapContentInLabel\">\n <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message || counter\" class=\"texts\">\n <kirby-form-field-message\n *ngIf=\"message\"\n class=\"message\"\n [text]=\"message\"\n ></kirby-form-field-message>\n\n <div *ngIf=\"counter\" class=\"counter\">\n <ng-content select=\"kirby-input-counter\"></ng-content>\n </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n <ng-content select=\"input[kirby-input]\"></ng-content>\n <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n <ng-content select=\"kirby-radio-group\"></ng-content>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n <ng-container *ngIf=\"label\">\n <span class=\"text\">{{ label }}</span>\n </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-container *ngIf=\"label\">\n <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}\n"] }]
5948
- }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PlatformService }, { type: i0.Renderer2 }, { type: WindowRef }]; }, propDecorators: { label: [{
6131
+ args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', template: "<label *ngIf=\"_wrapContentInLabel\">\n <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message || counter\" class=\"texts\">\n <kirby-form-field-message\n *ngIf=\"message\"\n class=\"message\"\n [text]=\"message\"\n ></kirby-form-field-message>\n\n <div *ngIf=\"counter\" class=\"counter\">\n <ng-content select=\"kirby-input-counter\"></ng-content>\n </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n <div class=\"affix-container\">\n <div class=\"prefix vertical-align semi-dark-text\">\n <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n </div>\n <ng-content select=\"input[kirby-input]\"></ng-content>\n <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n <ng-content select=\"kirby-radio-group\"></ng-content>\n <div class=\"suffix vertical-align semi-dark-text\">\n <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n </div>\n </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n <ng-container *ngIf=\"label\">\n <span class=\"text\">{{ label }}</span>\n </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n <ng-container *ngIf=\"label\">\n <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}\n"] }]
6132
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PlatformService }, { type: i0.Renderer2 }, { type: WindowRef }, { type: ResizeObserverService }]; }, propDecorators: { label: [{
5949
6133
  type: Input
5950
6134
  }], message: [{
5951
6135
  type: Input
6136
+ }], affixElements: [{
6137
+ type: ContentChildren,
6138
+ args: [AffixDirective]
5952
6139
  }], counter: [{
5953
6140
  type: ContentChild,
5954
6141
  args: [InputCounterComponent, { static: false }]
@@ -6166,54 +6353,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
6166
6353
  }] } });
6167
6354
 
6168
6355
  class FabSheetComponent {
6169
- constructor(renderer, changeDetectorRef, document) {
6170
- this.renderer = renderer;
6356
+ constructor(changeDetectorRef, renderer, document) {
6171
6357
  this.changeDetectorRef = changeDetectorRef;
6358
+ this.renderer = renderer;
6172
6359
  this.document = document;
6173
6360
  this.disabled = false;
6174
6361
  this.horizontalAlignment = 'right';
6175
6362
  this._isFabSheetOpen = false;
6176
- this._isBackdropVisible = false;
6177
6363
  }
6178
6364
  get isFabSheetOpen() {
6179
6365
  return this._isFabSheetOpen;
6180
6366
  }
6181
- get isBackdropVisible() {
6182
- return this._isBackdropVisible;
6183
- }
6184
6367
  ngAfterContentInit() {
6185
6368
  if (this.actionSheet) {
6186
6369
  this.actionSheet.hideCancel = true;
6187
6370
  }
6188
6371
  }
6189
- hideActions(fab) {
6190
- fab.close();
6191
- this._isFabSheetOpen = false;
6192
- this._isBackdropVisible = false;
6193
- this.renderer.removeClass(this.document.body, 'fab-sheet-active');
6372
+ hideActions() {
6373
+ this.ionFab.close().then(() => this.fabSheetStateChanged(false));
6374
+ }
6375
+ onFabButtonClick() {
6376
+ setTimeout(() => {
6377
+ this.fabSheetStateChanged(this.ionFab.activated);
6378
+ });
6379
+ }
6380
+ onFabListClick() {
6381
+ this.ionFab.close().then(() => {
6382
+ this.fabSheetStateChanged(false);
6383
+ });
6194
6384
  }
6195
- onFabClick(fab) {
6196
- this._isFabSheetOpen = fab.activated;
6197
- if (this._isFabSheetOpen) {
6385
+ fabSheetStateChanged(isOpen) {
6386
+ this._isFabSheetOpen = isOpen;
6387
+ if (this.isFabSheetOpen) {
6198
6388
  this.renderer.addClass(this.document.body, 'fab-sheet-active');
6389
+ this.renderer.addClass(this.document.body, 'backdrop-no-scroll');
6199
6390
  }
6200
6391
  else {
6201
6392
  this.renderer.removeClass(this.document.body, 'fab-sheet-active');
6393
+ this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
6202
6394
  }
6203
- // Postpone backdrop visibility update to allow for animation of opacity
6204
- setTimeout(() => {
6205
- this._isBackdropVisible = this.isFabSheetOpen;
6206
- this.changeDetectorRef.markForCheck();
6207
- });
6395
+ this.changeDetectorRef.detectChanges();
6208
6396
  }
6209
6397
  }
6210
- /** @nocollapse */ FabSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
6211
- /** @nocollapse */ FabSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FabSheetComponent, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen", "class.backdrop-visible": "this.isBackdropVisible" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<ion-backdrop\n *ngIf=\"actionSheet && isFabSheetOpen\"\n (ionBackdropTap)=\"hideActions(fab)\"\n (click)=\"hideActions(fab)\"\n></ion-backdrop>\n<ion-fab #fab (click)=\"disabled || onFabClick(fab)\">\n <ion-fab-button [disabled]=\"disabled\" [attr.disabled]=\"disabled ? true : null\" tabindex=\"-1\">\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list *ngIf=\"actionSheet\" side=\"top\" class=\"{{ horizontalAlignment }}\">\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{opacity:0;transition:opacity .75s;position:fixed;z-index:999}:host(.backdrop-visible) ion-backdrop{opacity:.4}@media (min-width: 721px){:host(.backdrop-visible) ion-backdrop{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { type: i1.IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6398
+ /** @nocollapse */ FabSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
6399
+ /** @nocollapse */ FabSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: FabSheetComponent, selector: "kirby-fab-sheet", inputs: { disabled: "disabled", horizontalAlignment: "horizontalAlignment" }, host: { properties: { "class.is-open": "this.isFabSheetOpen" } }, queries: [{ propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }], viewQueries: [{ propertyName: "ionFabButton", first: true, predicate: IonFabButton, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFab", first: true, predicate: IonFab, descendants: true, static: true }], ngImport: i0, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 721px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { type: i1.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { type: i1.IonFabList, selector: "ion-fab-list", inputs: ["activated", "side"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6212
6400
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, decorators: [{
6213
6401
  type: Component,
6214
- args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n *ngIf=\"actionSheet && isFabSheetOpen\"\n (ionBackdropTap)=\"hideActions(fab)\"\n (click)=\"hideActions(fab)\"\n></ion-backdrop>\n<ion-fab #fab (click)=\"disabled || onFabClick(fab)\">\n <ion-fab-button [disabled]=\"disabled\" [attr.disabled]=\"disabled ? true : null\" tabindex=\"-1\">\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list *ngIf=\"actionSheet\" side=\"top\" class=\"{{ horizontalAlignment }}\">\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{opacity:0;transition:opacity .75s;position:fixed;z-index:999}:host(.backdrop-visible) ion-backdrop{opacity:.4}@media (min-width: 721px){:host(.backdrop-visible) ion-backdrop{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
6402
+ args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n [class.backdrop-visible]=\"isFabSheetOpen\"\n [stopPropagation]=\"false\"\n (ionBackdropTap)=\"hideActions()\"\n (click)=\"hideActions()\"\n></ion-backdrop>\n<ion-fab>\n <ion-fab-button\n (click)=\"onFabButtonClick()\"\n [disabled]=\"disabled\"\n [attr.disabled]=\"disabled ? true : null\"\n tabindex=\"-1\"\n >\n <ng-content select=\"kirby-icon\"></ng-content>\n </ion-fab-button>\n <ion-fab-list\n *ngIf=\"actionSheet\"\n side=\"top\"\n class=\"{{ horizontalAlignment }}\"\n (click)=\"onFabListClick()\"\n >\n <ng-content select=\"kirby-action-sheet\"></ng-content>\n </ion-fab-list>\n</ion-fab>\n", styles: [":host{--kirby-action-sheet-margin-horizontal: 16px}ion-fab-button{--box-shadow: 0 20px 30px -15px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);width:64px;height:64px;-webkit-user-select:none;user-select:none}@media (hover: hover){ion-fab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-fab-button:active,ion-fab-button.ion-activated{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-fab-button::part(native):after{transition:all 80ms linear 0ms}@media (hover: hover) and (pointer: fine){ion-fab-button{outline:none;border-radius:999px}ion-fab-button:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}ion-fab-button:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}ion-fab-button:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}ion-fab-button[disabled]{--background: var(--kirby-semi-light);--box-shadow: none;opacity:1}ion-fab{position:fixed;bottom:16px;right:16px}:host-context(.fixed-content) ion-fab{position:absolute}ion-backdrop{visibility:hidden;opacity:0;transition:opacity .75s;position:fixed;z-index:999}ion-backdrop.backdrop-visible{visibility:visible;opacity:.4}@media (min-width: 721px){ion-backdrop.backdrop-visible{opacity:0}}ion-fab-list{margin-top:76px;margin-bottom:76px;right:0}\n"] }]
6215
6403
  }], ctorParameters: function () {
6216
- return [{ type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
6404
+ return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
6217
6405
  type: Inject,
6218
6406
  args: [DOCUMENT]
6219
6407
  }] }];
@@ -6224,15 +6412,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
6224
6412
  }], isFabSheetOpen: [{
6225
6413
  type: HostBinding,
6226
6414
  args: ['class.is-open']
6227
- }], isBackdropVisible: [{
6228
- type: HostBinding,
6229
- args: ['class.backdrop-visible']
6230
6415
  }], actionSheet: [{
6231
6416
  type: ContentChild,
6232
6417
  args: [ActionSheetComponent, { static: false }]
6233
6418
  }], ionFabButton: [{
6234
6419
  type: ViewChild,
6235
6420
  args: [IonFabButton, { static: true, read: ElementRef }]
6421
+ }], ionFab: [{
6422
+ type: ViewChild,
6423
+ args: [IonFab, { static: true }]
6236
6424
  }] } });
6237
6425
 
6238
6426
  class FlagComponent {
@@ -6367,7 +6555,7 @@ class GridComponent {
6367
6555
  }
6368
6556
  }
6369
6557
  /** @nocollapse */ GridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: GridComponent, deps: [{ token: BreakpointHelperService }], target: i0.ɵɵFactoryTarget.Component });
6370
- /** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: GridComponent, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ComponentLoaderDirective, selector: "[kirbyLoadComponent]", inputs: ["kirbyLoadComponent", "cssClass"] }] });
6558
+ /** @nocollapse */ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: GridComponent, selector: "kirby-grid", inputs: { maxColumns: "maxColumns", cardConfigurations: "cardConfigurations" }, host: { properties: { "attr.max-columns": "this.maxColumns" } }, ngImport: i0, template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ComponentLoaderDirective, selector: "[kirbyLoadComponent]", inputs: ["kirbyLoadComponent", "cssClass"] }] });
6371
6559
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: GridComponent, decorators: [{
6372
6560
  type: Component,
6373
6561
  args: [{ selector: 'kirby-grid', template: "<ng-container *ngFor=\"let card of cards\">\n <ng-template\n [kirbyLoadComponent]=\"card.configuration\"\n [cssClass]=\"'grid-item--col-' + card.colSpan\"\n ></ng-template>\n</ng-container>\n", styles: [":host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--kirby-grid-item-min-height, auto),auto);gap:24px;max-width:var(--kirby-page-max-width);margin:0 auto}@media (min-width: 721px){:host[max-columns=\"1\"]{grid-template-columns:repeat(1,1fr)}:host[max-columns=\"2\"]{grid-template-columns:repeat(2,1fr)}:host[max-columns=\"3\"]{grid-template-columns:repeat(3,1fr)}:host[max-columns=\"4\"]{grid-template-columns:repeat(4,1fr)}:host[max-columns=\"5\"]{grid-template-columns:repeat(5,1fr)}:host[max-columns=\"6\"]{grid-template-columns:repeat(6,1fr)}:host[max-columns=\"7\"]{grid-template-columns:repeat(7,1fr)}:host[max-columns=\"8\"]{grid-template-columns:repeat(8,1fr)}:host[max-columns=\"9\"]{grid-template-columns:repeat(9,1fr)}:host[max-columns=\"10\"]{grid-template-columns:repeat(10,1fr)}}@media (min-width: 721px){::ng-deep .grid-item--col-1{grid-column:span 1}}@media (min-width: 721px){::ng-deep .grid-item--col-2{grid-column:span 2}}@media (min-width: 721px){::ng-deep .grid-item--col-3{grid-column:span 3}}@media (min-width: 721px){::ng-deep .grid-item--col-4{grid-column:span 4}}@media (min-width: 721px){::ng-deep .grid-item--col-5{grid-column:span 5}}@media (min-width: 721px){::ng-deep .grid-item--col-6{grid-column:span 6}}@media (min-width: 721px){::ng-deep .grid-item--col-7{grid-column:span 7}}@media (min-width: 721px){::ng-deep .grid-item--col-8{grid-column:span 8}}@media (min-width: 721px){::ng-deep .grid-item--col-9{grid-column:span 9}}@media (min-width: 721px){::ng-deep .grid-item--col-10{grid-column:span 10}}\n"] }]
@@ -6511,7 +6699,7 @@ class LoadingOverlayComponent {
6511
6699
  }
6512
6700
  }
6513
6701
  /** @nocollapse */ LoadingOverlayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6514
- /** @nocollapse */ LoadingOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: LoadingOverlayComponent, selector: "kirby-loading-overlay", inputs: { isLoading: "isLoading", showBackdrop: "showBackdrop" }, ngImport: i0, template: "<div class=\"overlay-wrapper\">\n <div *ngIf=\"isLoading\" [class.backdrop]=\"showBackdrop\" class=\"spinner-wrapper\">\n <kirby-spinner class=\"spinner\"></kirby-spinner>\n </div>\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;min-height:32px}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:1001;display:flex;background:transparent;justify-content:center;align-items:center;justify-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper .spinner{width:32px;height:32px}\n"], components: [{ type: SpinnerComponent, selector: "kirby-spinner" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6702
+ /** @nocollapse */ LoadingOverlayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: LoadingOverlayComponent, selector: "kirby-loading-overlay", inputs: { isLoading: "isLoading", showBackdrop: "showBackdrop" }, ngImport: i0, template: "<div class=\"overlay-wrapper\">\n <div *ngIf=\"isLoading\" [class.backdrop]=\"showBackdrop\" class=\"spinner-wrapper\">\n <kirby-spinner class=\"spinner\"></kirby-spinner>\n </div>\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;min-height:32px}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:1001;display:flex;background:transparent;justify-content:center;align-items:center;justify-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper .spinner{width:32px;height:32px}\n"], components: [{ type: SpinnerComponent, selector: "kirby-spinner" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6515
6703
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
6516
6704
  type: Component,
6517
6705
  args: [{ selector: 'kirby-loading-overlay', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"overlay-wrapper\">\n <div *ngIf=\"isLoading\" [class.backdrop]=\"showBackdrop\" class=\"spinner-wrapper\">\n <kirby-spinner class=\"spinner\"></kirby-spinner>\n </div>\n <div class=\"content-wrapper\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{display:block;min-height:32px}.overlay-wrapper{min-height:inherit;height:100%;width:100%;position:relative}.overlay-wrapper .spinner-wrapper{height:100%;width:100%;position:absolute;z-index:1001;display:flex;background:transparent;justify-content:center;align-items:center;justify-items:center}.overlay-wrapper .spinner-wrapper.backdrop{background-color:#f6f6f6cc}.overlay-wrapper .spinner-wrapper .spinner{width:32px;height:32px}\n"] }]
@@ -6831,7 +7019,7 @@ class ListItemComponent {
6831
7019
  }
6832
7020
  }
6833
7021
  /** @nocollapse */ ListItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListItemComponent, deps: [{ token: PlatformService }], target: i0.ɵɵFactoryTarget.Component });
6834
- /** @nocollapse */ ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n >\n </kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
7022
+ /** @nocollapse */ ListItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListItemComponent, selector: "kirby-list-item", inputs: { item: "item", boundaryClass: "boundaryClass", swipeActions: "swipeActions", itemTemplate: "itemTemplate", isSelected: "isSelected", isSelectable: "isSelectable", getItemColor: "getItemColor" }, outputs: { itemSelect: "itemSelect", swipeActionSelect: "swipeActionSelect" }, viewQueries: [{ propertyName: "ionItemSliding", first: true, predicate: IonItemSliding, descendants: true }], ngImport: i0, template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n >\n </kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonItemSliding, selector: "ion-item-sliding", inputs: ["disabled"] }, { type: i1.IonItemOptions, selector: "ion-item-options", inputs: ["side"] }, { type: i1.IonItemOption, selector: "ion-item-option", inputs: ["color", "disabled", "download", "expandable", "href", "mode", "rel", "target", "type"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: ListItemColorDirective, selector: "[kirbyListItemColor]", inputs: ["kirbyListItemColor", "item"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
6835
7023
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListItemComponent, decorators: [{
6836
7024
  type: Component,
6837
7025
  args: [{ selector: 'kirby-list-item', template: "<ion-item-sliding\n [class.selected]=\"isSelected\"\n [kirbyListItemColor]=\"getItemColor\"\n [item]=\"item\"\n [disabled]=\"_isSwipingEnabled ? null : true\"\n keyHandler\n [ngClass]=\"boundaryClass\"\n (click)=\"_onItemSelect(item)\"\n>\n <ng-container\n *ngTemplateOutlet=\"swipeActionsTemplate; context: { $implicit: item }\"\n ></ng-container>\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n</ion-item-sliding>\n\n<ng-template #swipeActionsTemplate let-item>\n <ion-item-options *ngIf=\"_hasSwipeActions(item)\" [side]=\"_getSwipeActionEnd(item)\">\n <div class=\"swipe-action\">\n <ng-container *ngFor=\"let swipeAction of _getSwipeActions(item)\">\n <ion-item-option\n [ngClass]=\"_getSwipeActionType(swipeAction, item)\"\n (click)=\"_onSwipeActionSelect(swipeAction, item, $event)\"\n >\n <div class=\"item-content\">\n <kirby-icon\n *ngIf=\"_getSwipeActionIcon(swipeAction, item)\"\n size=\"sm\"\n [name]=\"_getSwipeActionIcon(swipeAction, item)\"\n >\n </kirby-icon>\n <ion-label>\n {{ _getSwipeActionTitle(swipeAction, item) }}\n </ion-label>\n </div>\n </ion-item-option>\n </ng-container>\n </div>\n </ion-item-options>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n", ":host{overflow:hidden}:host-context(.has-divider) ion-item-sliding:not(.last){border-bottom:1px solid var(--kirby-background-color)}\n"] }]
@@ -6973,7 +7161,7 @@ class ListComponent {
6973
7161
  }
6974
7162
  }
6975
7163
  /** @nocollapse */ ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, deps: [{ token: ListHelper }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
6976
- /** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "kirbyItems", predicate: ItemComponent }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n >\n </kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], components: [{ type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonItemGroup, selector: "ion-item-group" }, { type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }], directives: [{ type: InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
7164
+ /** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ListComponent, selector: "kirby-list", inputs: { items: "items", getItemColor: "getItemColor", getSectionName: "getSectionName", trackBy: "trackBy", getStandAloneByProperty: "getStandAloneByProperty", standAloneSpacing: "standAloneSpacing", noMoreItemsText: "noMoreItemsText", showDivider: "showDivider", markSelectedRow: "markSelectedRow", shape: "shape", hasItemSpacing: "hasItemSpacing", isLoadOnDemandEnabled: "isLoadOnDemandEnabled", swipeActions: "swipeActions", disableSelectionHighlight: "disableSelectionHighlight" }, outputs: { loadOnDemand: "loadOnDemand", itemSelect: "itemSelect" }, host: { properties: { "class.shape-rounded": "this.isShapeRounded", "class.shape-none": "this.isShapeNone", "class.item-spacing": "this.hasItemSpacing", "class.has-sections": "this._isSectionsEnabled", "class.has-stand-alone": "this._isStandAloneEnabled" } }, providers: [ListHelper], queries: [{ propertyName: "headerTemplate", first: true, predicate: ListHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "sectionHeaderTemplate", first: true, predicate: ListSectionHeaderDirective, descendants: true, read: TemplateRef }, { propertyName: "footerTemplate", first: true, predicate: ListFooterDirective, descendants: true, read: TemplateRef }, { propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "kirbyItems", predicate: ItemComponent }], viewQueries: [{ propertyName: "list", first: true, predicate: ["list"], descendants: true, static: true }, { propertyName: "scrollDirective", first: true, predicate: InfiniteScrollDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n >\n </kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"], components: [{ type: i1.IonList, selector: "ion-list", inputs: ["inset", "lines", "mode"] }, { type: i1.IonListHeader, selector: "ion-list-header", inputs: ["color", "lines", "mode"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonItemGroup, selector: "ion-item-group" }, { type: i1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: ListItemComponent, selector: "kirby-list-item", inputs: ["item", "boundaryClass", "swipeActions", "itemTemplate", "isSelected", "isSelectable", "getItemColor"], outputs: ["itemSelect", "swipeActionSelect"] }], directives: [{ type: InfiniteScrollDirective, selector: "[kirbyInfiniteScroll]", inputs: ["disabled"], outputs: ["scrollEnd"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
6977
7165
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ListComponent, decorators: [{
6978
7166
  type: Component,
6979
7167
  args: [{ selector: 'kirby-list', providers: [ListHelper], template: "<ion-list\n #list\n kirbyInfiniteScroll\n (scrollEnd)=\"_onLoadOnDemand()\"\n [disabled]=\"!isLoadOnDemandEnabled\"\n class=\"list\"\n [class.has-header]=\"headerTemplate\"\n [class.has-footer]=\"footerTemplate\"\n [class.has-divider]=\"showDivider\"\n>\n <ion-list-header *ngIf=\"headerTemplate\">\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n </ion-list-header>\n\n <ng-container\n *ngTemplateOutlet=\"\n _isSectionsEnabled || _isStandAloneEnabled ? groupedListTemplate : itemsTemplate;\n context: { $implicit: items }\n \"\n ></ng-container>\n\n <div *ngIf=\"footerTemplate\" class=\"footer\">\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\n </div>\n</ion-list>\n\n<p *ngIf=\"!isLoadOnDemandEnabled && noMoreItemsText\" class=\"no-more-items\">\n {{ noMoreItemsText }}\n</p>\n<div *ngIf=\"_isLoading\" class=\"loading\">\n <kirby-spinner></kirby-spinner>\n</div>\n\n<ng-template #groupedListTemplate>\n <ion-item-group\n *ngFor=\"let section of _groupedItems; trackBy: sectionTrackBy\"\n [ngClass]=\"standAloneClass()\"\n >\n <ion-item-divider *ngIf=\"_isSectionsEnabled\">\n <ng-container\n *ngTemplateOutlet=\"sectionHeaderTemplate; context: { $implicit: section.name }\"\n ></ng-container>\n </ion-item-divider>\n\n <ng-container *ngIf=\"_isSectionsEnabled && _isStandAloneEnabled; else groupedFlatList\">\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\" *ngFor=\"let list of section.lists\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: list }\"\n ></ng-container>\n </div>\n </ng-container>\n\n <ng-template #groupedFlatList>\n <div class=\"list-items\" [ngClass]=\"standAloneClass()\">\n <ng-container\n *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: section.items }\"\n ></ng-container>\n </div>\n </ng-template>\n </ion-item-group>\n</ng-template>\n\n<ng-template #itemsTemplate let-items>\n <kirby-list-item\n *ngFor=\"let item of items; let i = index; trackBy: trackBy || defaultTrackBy\"\n [item]=\"item\"\n [itemTemplate]=\"itemTemplate\"\n [swipeActions]=\"swipeActions\"\n [boundaryClass]=\"_getBoundaryClass(i, items)\"\n [isSelectable]=\"_isSelectable\"\n [getItemColor]=\"getItemColor\"\n [isSelected]=\"_isSelectable && item === _selectedItem\"\n (itemSelect)=\"onItemSelect($event)\"\n (swipeActionSelect)=\"onSwipeActionSelect($event)\"\n [class.is-single]=\"items.length === 1\"\n >\n </kirby-list-item>\n</ng-template>\n", styles: ["ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.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)}:host{display:block}.list{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;background:transparent;contain:inherit;padding:0}ion-list-header{background-color:var(--kirby-white);border-bottom:1px solid var(--kirby-background-color);padding:0;text-transform:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;min-height:0;overflow:inherit}ion-item{--background: var(--kirby-white);--background-activated: var(--kirby-white-shade);--background-hover: var(--kirby-background-color);--background-focused: var(--kirby-background-color);--inner-border-width: 0;--ion-safe-area-right: 0;--min-height: 56px;--padding-bottom: 8px;--padding-end: 16px;--padding-start: 16px;--padding-top: 8px;display:flex;font-size:14px;min-height:56px;overflow:visible;width:100%}ion-item-sliding.item-sliding-active-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translate(0)}ion-item-sliding.light{--kirby-item-background: var(--kirby-light);--kirby-item-background-activated: var(--kirby-light-shade);--kirby-item-background-focused: var(--kirby-light-shade);--kirby-item-background-hover: var(--kirby-light-tint)}ion-item-sliding.light ion-item{--background: var(--kirby-light);--color: var(--kirby-light-contrast);--background-activated: var(--kirby-light-shade);--background-focused: var(--kirby-light-shade);--background-hover: var(--kirby-light-tint)}ion-item-group{margin-bottom:24px}ion-item-group:last-of-type{margin-bottom:0}ion-item-divider{--inner-padding-end: 0;--color: unset;background-color:transparent;border-color:transparent;min-height:0;padding:0 16px 8px;font-weight:inherit}.footer{background-color:var(--kirby-white);border-top:1px solid var(--kirby-background-color);display:flex;align-items:center;justify-content:space-between;width:100%}.no-more-items,.loading{width:100%;padding:24px 0;text-align:center}.swipe-action{display:flex;color:var(--kirby-black);background-color:transparent}.swipe-action ion-item-option{height:100%;display:inline-block;text-align:center}.swipe-action .item-content{display:inline-grid;min-width:70px;flex-direction:column}.swipe-action .item-content ion-label{--background: unset;--color: unset}ion-item-options[side=end]{border-bottom-width:0}:host-context(.has-sections) .list,:host-context(.has-stand-alone) .list{box-shadow:none}:host-context(.has-sections) .list-items,:host-context(.has-stand-alone) .list-items{box-shadow:0 5px 10px -10px #1c1c1c4d,0 0 5px #1c1c1c14;border-radius:16px}:host-context(.has-sections) .footer,:host-context(.has-stand-alone) .footer{background-color:transparent;border-top:none}:host-context(.has-sections) ion-list-header,:host-context(.has-stand-alone) ion-list-header{background-color:transparent;border-bottom:none}:host-context(.shape-rounded) .list,:host-context(.shape-rounded) .list-items{border-radius:16px}:host-context(.shape-rounded) ion-item.first,:host-context(.shape-rounded) ion-item-sliding.first,:host-context(.shape-rounded) ion-list-header{border-top-left-radius:16px;border-top-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item,:host-context(.shape-rounded):not(.has-sections) .has-header ion-item-sliding{border-top-left-radius:0;border-top-right-radius:0}:host-context(.shape-rounded) ion-item.last,:host-context(.shape-rounded) ion-item-sliding.last,:host-context(.shape-rounded) .footer{border-bottom-left-radius:16px;border-bottom-right-radius:16px;-webkit-mask-image:radial-gradient(white,black);mask-image:radial-gradient(white,black)}:host-context(.shape-rounded) ion-item-sliding>ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item,:host-context(.shape-rounded):not(.has-sections) .has-footer ion-item-sliding{border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-none) .list,:host-context(.shape-none) .list-items{box-shadow:none;border-radius:unset}:host-context(.shape-none) .list ion-item,:host-context(.shape-none) .list ion-item-sliding{--padding-start: 0;--padding-end: 0;--padding-top: 0;--padding-bottom: 0;--inner-padding-start: 0;--inner-padding-end: 0;--inner-padding-top: 0;--inner-padding-bottom: 0;--background: none;--background-activated: none;--background-hover: none;--background-focused: none;overflow:visible}:host-context(.item-spacing) .list kirby-list-item{margin-bottom:16px}:host-context(.item-spacing) .list kirby-list-item>ion-item,:host-context(.item-spacing) .list kirby-list-item:last-child{margin-bottom:0}.stand-alone-bottom-margin-xxxl{margin-bottom:56px}.stand-alone-bottom-margin-xxl{margin-bottom:48px}.stand-alone-bottom-margin-xl{margin-bottom:40px}.stand-alone-bottom-margin-l{margin-bottom:32px}.stand-alone-bottom-margin-m{margin-bottom:24px}.stand-alone-bottom-margin-s{margin-bottom:16px}.stand-alone-bottom-margin-xs{margin-bottom:12px}.stand-alone-bottom-margin-xxs{margin-bottom:8px}.stand-alone-bottom-margin-xxxs{margin-bottom:4px}.stand-alone-bottom-margin-xxxxs{margin-bottom:2px}\n"] }]
@@ -7424,6 +7612,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
7424
7612
  type: Input,
7425
7613
  args: ['kirbyPageContent']
7426
7614
  }] } });
7615
+ class PageStickyContentDirective {
7616
+ }
7617
+ /** @nocollapse */ PageStickyContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageStickyContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
7618
+ /** @nocollapse */ PageStickyContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.9", type: PageStickyContentDirective, selector: "[kirbyPageStickyContent]", ngImport: i0 });
7619
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageStickyContentDirective, decorators: [{
7620
+ type: Directive,
7621
+ args: [{
7622
+ selector: '[kirbyPageStickyContent]',
7623
+ }]
7624
+ }] });
7427
7625
  class PageProgressComponent extends ModalElementComponent {
7428
7626
  constructor(modalWrapper, modalElementsAdvertiser, elementRef) {
7429
7627
  super(ModalElementType.PAGE_PROGRESS, elementRef, modalElementsAdvertiser);
@@ -7562,6 +7760,7 @@ class PageComponent {
7562
7760
  this.initializeTitle();
7563
7761
  this.initializeActions();
7564
7762
  this.initializeContent();
7763
+ this.initializeStickyContent();
7565
7764
  this.changeDetectorRef.detectChanges();
7566
7765
  }
7567
7766
  ngOnDestroy() {
@@ -7652,6 +7851,9 @@ class PageComponent {
7652
7851
  }
7653
7852
  });
7654
7853
  }
7854
+ initializeStickyContent() {
7855
+ this.stickyContentTemplate = this.stickyContentRef;
7856
+ }
7655
7857
  removeWrapper() {
7656
7858
  const parent = this.elementRef.nativeElement.parentNode;
7657
7859
  this.renderer.removeChild(parent, this.elementRef.nativeElement);
@@ -7691,10 +7893,10 @@ class PageComponent {
7691
7893
  }
7692
7894
  }
7693
7895
  /** @nocollapse */ PageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: ModalNavigationService }, { token: TabsComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
7694
- /** @nocollapse */ PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageComponent, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh", backButtonClick: "backButtonClick" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "backButtonDelegate", first: true, predicate: IonBackButtonDelegate, descendants: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title>\n <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons\n class=\"hide\"\n slot=\"secondary\"\n [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <div class=\"content-inner\">\n <div\n class=\"page-header\"\n *ngIf=\"hasPageTitle\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n\n <!-- Content -->\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], directives: [{ type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7896
+ /** @nocollapse */ PageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageComponent, selector: "kirby-page", inputs: { title: "title", subtitle: "subtitle", toolbarTitle: "toolbarTitle", titleAlignment: "titleAlignment", defaultBackHref: "defaultBackHref", hideBackButton: "hideBackButton", titleMaxLines: "titleMaxLines", tabBarBottomHidden: "tabBarBottomHidden" }, outputs: { enter: "enter", leave: "leave", refresh: "refresh", backButtonClick: "backButtonClick" }, host: { listeners: { "window:keyboardWillShow": "_onKeyboardWillShow($event)", "window:keyboardWillHide": "_onKeyboardWillHide()", "window:kirbySelectedTabClick": "_onSelectedTabClick()" } }, queries: [{ propertyName: "customToolbarTitleTemplate", first: true, predicate: PageToolbarTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customTitleTemplate", first: true, predicate: PageTitleDirective, descendants: true, read: TemplateRef }, { propertyName: "customSubtitleTemplate", first: true, predicate: PageSubtitleDirective, descendants: true, read: TemplateRef }, { propertyName: "stickyContentRef", first: true, predicate: PageStickyContentDirective, descendants: true, read: TemplateRef }, { propertyName: "customActions", predicate: PageActionsDirective }, { propertyName: "customContent", predicate: PageContentDirective }], viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "ionContentElement", first: true, predicate: IonContent, descendants: true, read: ElementRef, static: true }, { propertyName: "ionHeaderElement", first: true, predicate: IonHeader, descendants: true, read: ElementRef, static: true }, { propertyName: "ionFooterElement", first: true, predicate: IonFooter, descendants: true, read: ElementRef, static: true }, { propertyName: "backButtonDelegate", first: true, predicate: IonBackButtonDelegate, descendants: true }, { propertyName: "pageTitle", first: true, predicate: ["pageTitle"], descendants: true, read: ElementRef }, { propertyName: "simpleTitleTemplate", first: true, predicate: ["simpleTitleTemplate"], descendants: true, read: TemplateRef, static: true }, { propertyName: "simpleToolbarTitleTemplate", first: true, predicate: ["simpleToolbarTitleTemplate"], descendants: true, read: TemplateRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title>\n <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons\n class=\"hide\"\n slot=\"secondary\"\n [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <!-- Page header -->\n <div class=\"page-header-container\" *ngIf=\"hasPageTitle\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n </div>\n\n <!-- Sticky content -->\n <ng-container *ngIf=\"stickyContentTemplate\">\n <div class=\"sticky-content-container\">\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Content -->\n <div class=\"content-inner\">\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 720px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:0;left:0;right:0;margin-block-end:24px}.sticky-content-container div{max-width:var(--page-content-max-width, 720px);margin:0 auto}\n"], components: [{ type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1.IonBackButton, selector: "ion-back-button", inputs: ["color", "defaultHref", "disabled", "icon", "mode", "routerAnimation", "text", "type"] }, { type: i1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { type: i1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { type: SpinnerComponent, selector: "kirby-spinner" }, { type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], directives: [{ type: i1.IonBackButtonDelegate, selector: "ion-back-button", inputs: ["defaultHref", "routerAnimation"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7695
7897
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageComponent, decorators: [{
7696
7898
  type: Component,
7697
- args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title>\n <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons\n class=\"hide\"\n slot=\"secondary\"\n [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <div class=\"content-inner\">\n <div\n class=\"page-header\"\n *ngIf=\"hasPageTitle\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n\n <!-- Content -->\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}\n"] }]
7899
+ args: [{ selector: 'kirby-page', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n <ion-toolbar>\n <ion-buttons slot=\"start\">\n <ion-back-button\n text=\"\"\n [defaultHref]=\"defaultBackHref\"\n icon=\"assets/kirby/icons/svg/arrow-back.svg\"\n [style.visibility]=\"hideBackButton ? 'hidden' : null\"\n ></ion-back-button>\n </ion-buttons>\n <ion-title>\n <div class=\"toolbar-title hide\" [class.fade-in]=\"toolbarTitleVisible\">\n <ng-container *ngTemplateOutlet=\"toolbarTitleTemplate\"></ng-container>\n </div>\n </ion-title>\n <ion-buttons\n class=\"hide\"\n slot=\"primary\"\n [class.fade-in]=\"toolbarStickyActionsVisible && stickyActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"stickyActionsTemplate\"></ng-container>\n </ion-buttons>\n <ion-buttons\n class=\"hide\"\n slot=\"secondary\"\n [class.fade-in]=\"toolbarFixedActionsVisible && fixedActionsTemplate\"\n >\n <ng-container *ngTemplateOutlet=\"fixedActionsTemplate\"></ng-container>\n </ion-buttons>\n </ion-toolbar>\n</ion-header>\n\n<ion-content scrollEvents=\"true\" forceOverscroll=\"false\">\n <ion-refresher\n *ngIf=\"refresh.observers.length > 0\"\n (ionRefresh)=\"delegateRefreshEvent($event)\"\n slot=\"fixed\"\n >\n <kirby-spinner></kirby-spinner>\n </ion-refresher>\n\n <!-- Page header -->\n <div class=\"page-header-container\" *ngIf=\"hasPageTitle\">\n <div\n class=\"page-header\"\n [ngClass]=\"{\n 'text-center': titleAlignment === 'center',\n 'text-right': titleAlignment === 'right'\n }\"\n >\n <div #pageTitle class=\"page-title\" [class.has-actions]=\"hasActionsInPage\">\n <ng-container\n *ngTemplateOutlet=\"customTitleTemplate || defaultPageTitleTemplate\"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"pageActionsTemplate || defaultPageActionsTemplate\"\n ></ng-container>\n </div>\n <div *ngIf=\"hasPageSubtitle\" class=\"page-subtitle\">\n <ng-container\n *ngTemplateOutlet=\"customSubtitleTemplate || defaultPageSubtitleTemplate\"\n ></ng-container>\n </div>\n </div>\n </div>\n\n <!-- Sticky content -->\n <ng-container *ngIf=\"stickyContentTemplate\">\n <div class=\"sticky-content-container\">\n <div>\n <ng-container *ngTemplateOutlet=\"stickyContentTemplate\"></ng-container>\n </div>\n </div>\n </ng-container>\n\n <!-- Content -->\n <div class=\"content-inner\">\n <ng-container\n *ngTemplateOutlet=\"customContentTemplate || defaultContentTemplate\"\n ></ng-container>\n </div>\n\n <div slot=\"fixed\" class=\"fixed-content\" *ngIf=\"fixedContentTemplate\">\n <div class=\"content-inner\">\n <ng-container *ngTemplateOutlet=\"fixedContentTemplate\"></ng-container>\n </div>\n </div>\n</ion-content>\n\n<ion-footer>\n <ng-content select=\"kirby-page-footer\"></ng-content>\n</ion-footer>\n\n<ng-template #defaultPageTitleTemplate>\n <h1 [kirbyFitHeading]=\"fitHeadingConfig\">\n <ng-container *ngTemplateOutlet=\"simpleTitleTemplate\"></ng-container>\n </h1>\n</ng-template>\n<ng-template #defaultPageSubtitleTemplate>\n <ng-container *ngTemplateOutlet=\"simpleSubtitleTemplate\"></ng-container>\n</ng-template>\n<ng-template #defaultPageActionsTemplate>\n <ng-content select=\"kirby-page-actions\"></ng-content>\n</ng-template>\n\n<ng-template #defaultContentTemplate>\n <ng-content select=\"kirby-page-content\"></ng-content>\n</ng-template>\n\n<ng-template #simpleTitleTemplate>{{ title }}</ng-template>\n<ng-template #simpleSubtitleTemplate>{{ subtitle }}</ng-template>\n<ng-template #simpleToolbarTitleTemplate>{{ toolbarTitle }}</ng-template>\n", styles: ["ion-header,ion-toolbar{--background: var(--kirby-background-color);margin:0 auto}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-header,ion-toolbar{max-width:768px}}ion-toolbar{--border-width: 0 !important;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--ion-toolbar-color: var(--kirby-black)}ion-toolbar ion-buttons[slot=secondary]{order:6}ion-toolbar ion-title .toolbar-title{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}ion-toolbar ion-title .toolbar-title ::ng-deep>*{text-overflow:ellipsis;white-space:nowrap;pointer-events:auto;overflow:hidden}.hide{visibility:hidden;opacity:0;transition:opacity .1s linear}.hide.fade-in{visibility:inherit;opacity:1}ion-title{box-sizing:border-box;font-size:16px;font-weight:400}ion-back-button{--color: var(--kirby-black);--icon-font-size: 24px;height:44px;width:44px;opacity:1}@media (hover: hover){ion-back-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-back-button:active,ion-back-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-back-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-back-button::part(native):after{transition:all 80ms linear 0ms}.page-header-container{max-width:var(--page-content-max-width, 720px);margin:0 auto}.page-header{margin-left:16px;margin-top:8px;margin-bottom:var(--kirby-page-title-margin-bottom, 40px)}.page-header .page-title.has-actions{display:flex;justify-content:space-between;align-items:flex-start}.page-header .page-title h1,.page-header .page-title h2,.page-header .page-title h3,.page-header .page-title h4,.page-header .page-title h5,.page-header .page-title h6{margin:0}.page-header .page-subtitle{margin-top:8px}.page-header.text-center{text-align:center;margin-left:0}.page-header.text-right{text-align:right}ion-content{--padding-start: var(--page-content-padding-start, 16px);--padding-end: var(--page-content-padding-end, 16px);--background: var(--kirby-background-color);--color: var(--kirby-black)}ion-content .content-inner{max-width:var(--page-content-max-width, 720px);margin:0 auto;padding-bottom:40px}ion-content .fixed-content{width:100%;position:absolute;bottom:0}ion-content .fixed-content .content-inner{position:relative}.sticky-content-container{position:sticky;top:0;left:0;right:0;margin-block-end:24px}.sticky-content-container div{max-width:var(--page-content-max-width, 720px);margin:0 auto}\n"] }]
7698
7900
  }], ctorParameters: function () {
7699
7901
  return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: ModalNavigationService }, { type: TabsComponent, decorators: [{
7700
7902
  type: Optional
@@ -7764,6 +7966,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
7764
7966
  }], customContent: [{
7765
7967
  type: ContentChildren,
7766
7968
  args: [PageContentDirective]
7969
+ }], stickyContentRef: [{
7970
+ type: ContentChild,
7971
+ args: [PageStickyContentDirective, { static: false, read: TemplateRef }]
7767
7972
  }], _onKeyboardWillShow: [{
7768
7973
  type: HostListener,
7769
7974
  args: ['window:keyboardWillShow', ['$event']]
@@ -7834,7 +8039,8 @@ class PageModule {
7834
8039
  PageTitleComponent,
7835
8040
  PageTitleDirective,
7836
8041
  PageSubtitleDirective,
7837
- PageToolbarTitleDirective], imports: [CommonModule, IonicModule, FitHeadingModule, SpinnerModule], exports: [PageComponent,
8042
+ PageToolbarTitleDirective,
8043
+ PageStickyContentDirective], imports: [CommonModule, IonicModule, FitHeadingModule, SpinnerModule], exports: [PageComponent,
7838
8044
  PageActionsComponent,
7839
8045
  PageActionsDirective,
7840
8046
  PageContentComponent,
@@ -7845,7 +8051,8 @@ class PageModule {
7845
8051
  PageTitleDirective,
7846
8052
  PageSubtitleDirective,
7847
8053
  PageToolbarTitleDirective,
7848
- FitHeadingModule] });
8054
+ FitHeadingModule,
8055
+ PageStickyContentDirective] });
7849
8056
  /** @nocollapse */ PageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageModule, imports: [[CommonModule, IonicModule, FitHeadingModule, SpinnerModule], FitHeadingModule] });
7850
8057
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageModule, decorators: [{
7851
8058
  type: NgModule,
@@ -7862,6 +8069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
7862
8069
  PageTitleDirective,
7863
8070
  PageSubtitleDirective,
7864
8071
  PageToolbarTitleDirective,
8072
+ PageStickyContentDirective,
7865
8073
  ],
7866
8074
  imports: [CommonModule, IonicModule, FitHeadingModule, SpinnerModule],
7867
8075
  exports: [
@@ -7877,6 +8085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
7877
8085
  PageSubtitleDirective,
7878
8086
  PageToolbarTitleDirective,
7879
8087
  FitHeadingModule,
8088
+ PageStickyContentDirective,
7880
8089
  ],
7881
8090
  }]
7882
8091
  }] });
@@ -7948,7 +8157,7 @@ class RangeComponent {
7948
8157
  multi: true,
7949
8158
  useExisting: forwardRef((() => RangeComponent)),
7950
8159
  },
7951
- ], usesOnChanges: true, ngImport: i0, template: "<ion-range\n (ionChange)=\"_onRangeValueChange($event)\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [value]=\"value\"\n [pin]=\"pin\"\n [snaps]=\"ticks\"\n [ticks]=\"ticks\"\n [debounce]=\"debounce\"\n [disabled]=\"disabled\"\n>\n</ion-range>\n\n<label *ngIf=\"minLabel\" class=\"min-label\">{{ minLabel }}</label>\n<label *ngIf=\"maxLabel\" class=\"max-label\">{{ maxLabel }}</label>\n", styles: [":host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range{--knob-background: var(--kirby-white);--knob-box-shadow: 0 5px 10px 0 rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--knob-size: 24px;--pin-color: var(--kirby-text-color-black);--pin-background: var(--kirby-semi-light);--bar-background: var(--kirby-medium);--bar-background-active: var(--kirby-dark);--bar-border-radius: 4px;--bar-height: 2px;flex:1 1 100%;padding:0}@media (hover: hover) and (pointer: fine){ion-range:focus-within::part(knob){transition:all 80ms linear 0ms;box-shadow:0 5px 10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-range:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--knob-background: #ebebeb}}ion-range:active,ion-range.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--knob-background: #d6d6d6}ion-range.range-disabled{--knob-background: var(--kirby-semi-light);--knob-box-shadow: none;--bar-background: var(--kirby-semi-light);--bar-background-active: var(--kirby-semi-light)}ion-range.range-disabled::part(tick){background:var(--kirby-semi-light)}ion-range.range-has-pin{padding:0 3px}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background}ion-range::part(pin){font-size:12px;color:var(--pin-color);background-color:var(--pin-background);padding:2px 4px;border-radius:4px;min-width:40px;position:relative}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:50%;width:6px;height:6px;z-index:1;margin-inline-start:-3px}ion-range::part(tick){background:var(--kirby-medium)}label{font-size:12px;line-height:16px;color:var(--kirby-text-color-semi-dark);margin-top:-4px}\n"], components: [{ type: i1.IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }], directives: [{ type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8160
+ ], usesOnChanges: true, ngImport: i0, template: "<ion-range\n (ionChange)=\"_onRangeValueChange($event)\"\n [min]=\"min\"\n [max]=\"max\"\n [step]=\"step\"\n [value]=\"value\"\n [pin]=\"pin\"\n [snaps]=\"ticks\"\n [ticks]=\"ticks\"\n [debounce]=\"debounce\"\n [disabled]=\"disabled\"\n>\n</ion-range>\n\n<label *ngIf=\"minLabel\" class=\"min-label\">{{ minLabel }}</label>\n<label *ngIf=\"maxLabel\" class=\"max-label\">{{ maxLabel }}</label>\n", styles: [":host{display:flex;justify-content:space-between;flex-wrap:wrap}ion-range{--knob-background: var(--kirby-white);--knob-box-shadow: 0 5px 10px 0 rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--knob-size: 24px;--pin-color: var(--kirby-text-color-black);--pin-background: var(--kirby-semi-light);--bar-background: var(--kirby-medium);--bar-background-active: var(--kirby-dark);--bar-border-radius: 4px;--bar-height: 2px;flex:1 1 100%;padding:0}@media (hover: hover) and (pointer: fine){ion-range:focus-within::part(knob){transition:all 80ms linear 0ms;box-shadow:0 5px 10px #1c1c1c4d,0 0 5px #1c1c1c14,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-range:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--knob-background: #ebebeb}}ion-range:active,ion-range.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--knob-background: #d6d6d6}ion-range.range-disabled{--knob-background: var(--kirby-semi-light);--knob-box-shadow: none;--bar-background: var(--kirby-semi-light);--bar-background-active: var(--kirby-semi-light)}ion-range.range-disabled::part(tick){background:var(--kirby-semi-light)}ion-range.range-has-pin{padding:0 3px}ion-range::part(knob){transition:all 80ms linear 0ms;transition-property:background}ion-range::part(pin){font-size:12px;color:var(--pin-color);background-color:var(--pin-background);padding:2px 4px;border-radius:4px;min-width:40px;position:relative}ion-range::part(pin):before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);display:block;border:solid transparent 6px;border-top-color:var(--pin-background)}ion-range::part(tick),ion-range::part(tick-active){border-radius:50%;width:6px;height:6px;z-index:1;margin-inline-start:-3px}ion-range::part(tick){background:var(--kirby-medium)}label{font-size:12px;line-height:16px;color:var(--kirby-text-color-semi-dark);margin-top:-4px}\n"], components: [{ type: i1.IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }], directives: [{ type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
7952
8161
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: RangeComponent, decorators: [{
7953
8162
  type: Component,
7954
8163
  args: [{ selector: 'kirby-range', providers: [
@@ -8057,7 +8266,7 @@ class ReorderListComponent {
8057
8266
  }
8058
8267
  }
8059
8268
  /** @nocollapse */ ReorderListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ReorderListComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
8060
- /** @nocollapse */ ReorderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
8269
+ /** @nocollapse */ ReorderListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ReorderListComponent, selector: "kirby-reorder-list", inputs: { items: "items", subItemsName: "subItemsName", getItemTextDefault: "getItemTextDefault" }, outputs: { itemReorder: "itemReorder", subItemReorder: "subItemReorder" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "reorderGroupContainer", predicate: ["reorderGroupContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"], components: [{ type: i1.IonBackdrop, selector: "ion-backdrop", inputs: ["stopPropagation", "tappable", "visible"] }, { type: i1.IonReorderGroup, selector: "ion-reorder-group", inputs: ["disabled"] }, { type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "mode", "hasDarkBackgroundColor"] }, { type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "selectable", "reorderable", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
8061
8270
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ReorderListComponent, decorators: [{
8062
8271
  type: Component,
8063
8272
  args: [{ selector: 'kirby-reorder-list', template: "<ion-backdrop *ngIf=\"reorderActive\" [tappable]=\"false\" [visible]=\"true\" [stopPropagation]=\"false\">\n</ion-backdrop>\n<ion-reorder-group (ionItemReorder)=\"doReorder($event)\" disabled=\"false\">\n <div *ngFor=\"let reorderItem of items\" class=\"outer-group\">\n <kirby-card>\n <ng-container\n *ngTemplateOutlet=\"itemTemplate || defaultItemTemplate; context: { $implicit: reorderItem }\"\n >\n </ng-container>\n <div *ngIf=\"reorderItem[subItemsName]\" #reorderGroupContainer>\n <ion-reorder-group (ionItemReorder)=\"doSubReorder($event, reorderItem)\" disabled=\"false\">\n <div *ngFor=\"let subItem of reorderItem[subItemsName]\">\n <ng-container\n *ngTemplateOutlet=\"\n itemTemplate || defaultItemTemplate;\n context: { $implicit: subItem, isSubItem: true }\n \"\n ></ng-container>\n </div>\n </ion-reorder-group>\n </div>\n </kirby-card>\n </div>\n</ion-reorder-group>\n\n<ng-template #defaultItemTemplate let-item let-isSubItem>\n <kirby-item [reorderable]=\"true\">\n <h3>{{ getItemTextDefault(item) }}</h3>\n </kirby-item>\n</ng-template>\n", styles: ["ion-backdrop{opacity:.3;z-index:101;position:fixed}.reorder-selected{box-shadow:none;opacity:1;z-index:104}.reorder-selected kirby-card{transform:scale(1.05)}.reorder-selected kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}.reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.reorder-list-active>*{position:relative;z-index:103}.reorder-list-active>.reorder-selected{z-index:104}.reorder-list-active div:first-child{border-top:none}.reorder-list-active ::ng-deep>div:last-child kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}.reorder-list-active .reorder-selected ::ng-deep>kirby-item{box-shadow:0 0 10px #0006;transform:scale(1.05);border-radius:16px;overflow:hidden}.outer-group{border-bottom:20px transparent solid}kirby-card{overflow:inherit;z-index:auto}kirby-card ::ng-deep>div:last-child ion-reorder-group div:last-child>kirby-item{border-bottom-left-radius:16px;border-bottom-right-radius:16px;overflow:hidden}kirby-card ::ng-deep>div kirby-item{z-index:1}kirby-card ::ng-deep>.content-layer>div:first-child>kirby-item{border-radius:16px;overflow:hidden}kirby-card ::ng-deep>div .reorder-list-active kirby-item{z-index:103}kirby-card div:first-child{border-top:1px solid var(--kirby-background-color)}\n"] }]
@@ -8174,7 +8383,7 @@ class SegmentedControlComponent {
8174
8383
  }
8175
8384
  }
8176
8385
  /** @nocollapse */ SegmentedControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SegmentedControlComponent, deps: [{ token: IconRegistryService }], target: i0.ɵɵFactoryTarget.Component });
8177
- /** @nocollapse */ SegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { selectedIndexChange: "selectedIndexChange", segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n>\n <ng-container *ngFor=\"let item of items\">\n <ion-segment-button [value]=\"item.id\">{{ item.text }} </ion-segment-button>\n <div class=\"badge-container\" *ngIf=\"item.badge\">\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n <kirby-icon\n *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n [customName]=\"item.badge.icon\"\n ></kirby-icon>\n <ng-template #defaultIconName>\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n </ng-template>\n </ng-container>\n <ng-template #badgeContent>\n {{ item.badge.content }}\n </ng-template>\n </kirby-badge>\n </div>\n </ng-container>\n</ion-segment>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-top: -8px;--kirby-badge-right: 8px;--kirby-badge-z-index: 2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start: 16px;--padding-end: 16px}:host.default-mode ion-segment{--background: var(--kirby-white);width:-moz-fit-content;width:fit-content;overflow:visible;contain:none}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:4px;gap:8px}@media (pointer: coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-white);--indicator-transition: none;flex:initial}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: 12px;--padding-end: 12px}ion-segment{border-radius:999px}ion-segment-button{position:relative;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:40px;min-width:-moz-fit-content;min-width:fit-content;font-weight:400;font-size:14px;text-transform:none;margin:0;opacity:1}@media (hover: hover) and (pointer: fine){ion-segment-button:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-segment-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button:active,ion-segment-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover){ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button.segment-button-checked:active,ion-segment-button.segment-button-checked.ion-activated{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-segment-button::part(native):after{transition:all 80ms linear 0ms}ion-segment-button::part(indicator){padding-inline:0}.badge-container{position:relative}\n"], components: [{ type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { type: KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
8386
+ /** @nocollapse */ SegmentedControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SegmentedControlComponent, selector: "kirby-segmented-control", inputs: { mode: "mode", items: "items", selectedIndex: "selectedIndex", value: "value", size: "size", disableChangeOnSwipe: "disableChangeOnSwipe" }, outputs: { selectedIndexChange: "selectedIndexChange", segmentSelect: "segmentSelect" }, host: { attributes: { "role": "group" }, properties: { "class": "this._modeCssClass", "class.sm": "this.isSmallSize" } }, ngImport: i0, template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n>\n <ng-container *ngFor=\"let item of items\">\n <ion-segment-button [value]=\"item.id\">{{ item.text }} </ion-segment-button>\n <div class=\"badge-container\" *ngIf=\"item.badge\">\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n <kirby-icon\n *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n [customName]=\"item.badge.icon\"\n ></kirby-icon>\n <ng-template #defaultIconName>\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n </ng-template>\n </ng-container>\n <ng-template #badgeContent>\n {{ item.badge.content }}\n </ng-template>\n </kirby-badge>\n </div>\n </ng-container>\n</ion-segment>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-top: -8px;--kirby-badge-right: 8px;--kirby-badge-z-index: 2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start: 16px;--padding-end: 16px}:host.default-mode ion-segment{--background: var(--kirby-white);width:-moz-fit-content;width:fit-content;overflow:visible;contain:none}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:4px;gap:8px}@media (pointer: coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-white);--indicator-transition: none;flex:initial}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: 12px;--padding-end: 12px}ion-segment{border-radius:999px}ion-segment-button{position:relative;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:40px;min-width:-moz-fit-content;min-width:fit-content;font-weight:400;font-size:14px;text-transform:none;margin:0;opacity:1}@media (hover: hover) and (pointer: fine){ion-segment-button:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-segment-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button:active,ion-segment-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover){ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button.segment-button-checked:active,ion-segment-button.segment-button-checked.ion-activated{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-segment-button::part(native):after{transition:all 80ms linear 0ms}ion-segment-button::part(indicator){padding-inline:0}.badge-container{position:relative}\n"], components: [{ type: i1.IonSegment, selector: "ion-segment", inputs: ["color", "disabled", "mode", "scrollable", "selectOnFocus", "swipeGesture", "value"] }, { type: i1.IonSegmentButton, selector: "ion-segment-button", inputs: ["disabled", "layout", "mode", "type", "value"] }, { type: KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
8178
8387
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SegmentedControlComponent, decorators: [{
8179
8388
  type: Component,
8180
8389
  args: [{ selector: 'kirby-segmented-control', host: { role: 'group' }, template: "<ion-segment\n [value]=\"value?.id\"\n [scrollable]=\"disableChangeOnSwipe || mode !== 'default'\"\n (ionChange)=\"onSegmentSelect($event.detail.value)\"\n (click)=\"preventOutsideClick($event)\"\n>\n <ng-container *ngFor=\"let item of items\">\n <ion-segment-button [value]=\"item.id\">{{ item.text }} </ion-segment-button>\n <div class=\"badge-container\" *ngIf=\"item.badge\">\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"item.badge.description\"\n [themeColor]=\"item.badge.themeColor\"\n >\n <ng-container *ngIf=\"item.badge.icon; else badgeContent\">\n <kirby-icon\n *ngIf=\"item.badge.isCustomIcon; else defaultIconName\"\n [customName]=\"item.badge.icon\"\n ></kirby-icon>\n <ng-template #defaultIconName>\n <kirby-icon [name]=\"item.badge.icon\"></kirby-icon>\n </ng-template>\n </ng-container>\n <ng-template #badgeContent>\n {{ item.badge.content }}\n </ng-template>\n </kirby-badge>\n </div>\n </ng-container>\n</ion-segment>\n", styles: [":host{display:block;-webkit-user-select:none;user-select:none;--kirby-badge-elevation: 0 5px 10px -10px rgba(28, 28, 28, .3), 0 0 5px 0 rgba(28, 28, 28, .08);--kirby-badge-position: absolute;--kirby-badge-top: -8px;--kirby-badge-right: 8px;--kirby-badge-z-index: 2}:host.sm ion-segment-button{min-height:32px;font-size:12px;--padding-start: 16px;--padding-end: 16px}:host.default-mode ion-segment{--background: var(--kirby-white);width:-moz-fit-content;width:fit-content;overflow:visible;contain:none}:host.chip-mode ion-segment{--background: none;border-radius:0;padding:4px;gap:8px}@media (pointer: coarse){:host.chip-mode ion-segment{scrollbar-width:none}:host.chip-mode ion-segment::-webkit-scrollbar{display:none}}:host.chip-mode ion-segment-button{--background: var(--kirby-white);--indicator-transition: none;flex:initial}:host.chip-mode ion-segment-button::part(indicator){padding-inline:0}:host.compact ion-segment{--background: transparent}:host.compact ion-segment-button{--background: transparent;--padding-start: 12px;--padding-end: 12px}ion-segment{border-radius:999px}ion-segment-button{position:relative;--border-radius: 999px;--border-style: none;--background: none;--color: var(--kirby-white-contrast);--indicator-color: var(--kirby-black);--color-checked: var(--kirby-black-contrast);--color-hover: var(--kirby-black-tint);--indicator-box-shadow: none;--indicator-transform: none;--padding-start: 24px;--padding-end: 24px;--margin-bottom: 0;--margin-end: 0;--margin-start: 0;--margin-top: 0;min-height:40px;min-width:-moz-fit-content;min-width:fit-content;font-weight:400;font-size:14px;text-transform:none;margin:0;opacity:1}@media (hover: hover) and (pointer: fine){ion-segment-button:focus-within::part(native){transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}@media (hover: hover){ion-segment-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button:active,ion-segment-button.ion-activated{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button:after{content:\"\";position:absolute;min-height:44px;min-width:44px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}@media (hover: hover){ion-segment-button.segment-button-checked:hover{--state-layer-opacity: .24;--state-layer-background-color: var(--kirby-black-contrast);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}ion-segment-button.segment-button-checked:active,ion-segment-button.segment-button-checked.ion-activated{--state-layer-opacity: .36;--state-layer-background-color: var(--kirby-black-contrast);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}ion-segment-button::part(native){opacity:1;border-radius:999px;overflow:hidden}ion-segment-button::part(native):after{transition:all 80ms linear 0ms}ion-segment-button::part(indicator){padding-inline:0}.badge-container{position:relative}\n"] }]
@@ -8258,7 +8467,7 @@ class SlideButtonComponent {
8258
8467
  }
8259
8468
  }
8260
8469
  /** @nocollapse */ SlideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
8261
- /** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8470
+ /** @nocollapse */ SlideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: SlideButtonComponent, selector: "kirby-slide-button", inputs: { text: "text", expand: "expand" }, outputs: { slideDone: "slideDone", slidingPercentageChanged: "slidingPercentageChanged" }, ngImport: i0, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8262
8471
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlideButtonComponent, decorators: [{
8263
8472
  type: Component,
8264
8473
  args: [{ selector: 'kirby-slide-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"slide-button-container\" [ngClass]=\"{ 'slide-done': isSlideDone }\">\n <input\n type=\"range\"\n (mouseup)=\"onSliderMouseup()\"\n (touchend)=\"onSliderMouseup()\"\n (input)=\"onSliderValueChange($event.target.value)\"\n (mousedown)=\"onSliderMousedown()\"\n (touchstart)=\"onSliderMousedown()\"\n class=\"slide-button\"\n [value]=\"value\"\n max=\"100\"\n />\n <p class=\"slide-button-text slide-{{ pctInTens }}-pct\">{{ text }}</p>\n</div>\n", styles: [":host{position:relative;display:inline-block;width:256px;-webkit-user-select:none;user-select:none}:host[expand=block]{display:block;width:100%}:host .slide-button-container{width:100%;display:flex;justify-content:center;align-items:center;color:var(--kirby-primary-contrast);background-color:var(--kirby-primary);height:56px;border-radius:26px}:host .slide-10-pct{opacity:.9}:host .slide-20-pct{opacity:.8}:host .slide-30-pct{opacity:.7}:host .slide-40-pct{opacity:.6}:host .slide-50-pct{opacity:.5}:host .slide-60-pct{opacity:.4}:host .slide-70-pct{opacity:.3}:host .slide-80-pct{opacity:.2}:host .slide-90-pct{opacity:.1}:host .slide-100-pct{opacity:0}:host .slide-button-text{position:absolute;font-size:16px;margin:0;line-height:1;z-index:1;width:100%;text-align:center;padding:0 26px 0 56px}:host .slide-button{outline:none;width:100%;height:100%;-webkit-appearance:none;appearance:none;background:transparent;z-index:2}:host .slide-button::-webkit-slider-thumb{-webkit-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;-webkit-appearance:none;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-webkit-slider-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-webkit-slider-thumb:active,:host .slide-button::-webkit-slider-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-button::-moz-range-thumb{-moz-transition:all 80ms linear 0ms;transition:all 80ms linear 0ms;appearance:none;border-radius:50%;background-color:var(--kirby-white);background-image:url(/assets/kirby/icons/svg/arrow-more.svg);background-repeat:no-repeat;background-position:center;background-size:24px;width:52px;height:52px;border:none}@media (hover: hover){:host .slide-button::-moz-range-thumb:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#ebebeb}}:host .slide-button::-moz-range-thumb:active,:host .slide-button::-moz-range-thumb .interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#e0e0e0}:host .slide-done{transition:all .3s ease-in-out;opacity:0;height:0;transform:scale(0);pointer-events:none}\n"] }]
@@ -8310,7 +8519,7 @@ class SlidesComponent {
8310
8519
  ></ng-container>
8311
8520
  </ion-slide>
8312
8521
  </ion-slides>
8313
- `, isInline: true, components: [{ type: i1.IonSlides, selector: "ion-slides", inputs: ["mode", "options", "pager", "scrollbar"] }, { type: i1.IonSlide, selector: "ion-slide" }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8522
+ `, isInline: true, components: [{ type: i1.IonSlides, selector: "ion-slides", inputs: ["mode", "options", "pager", "scrollbar"] }, { type: i1.IonSlide, selector: "ion-slide" }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8314
8523
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: SlidesComponent, decorators: [{
8315
8524
  type: Component,
8316
8525
  args: [{
@@ -8364,10 +8573,10 @@ class TabButtonComponent {
8364
8573
  }
8365
8574
  }
8366
8575
  /** @nocollapse */ TabButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TabButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
8367
- /** @nocollapse */ TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TabButtonComponent, selector: "kirby-tab-button", inputs: { routerLink: "routerLink" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n <div class=\"icon-container\" *ngIf=\"icons.length\">\n <ng-content\n *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n select=\"kirby-icon[:not([selected-tab])]\"\n ></ng-content>\n <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n </div>\n <ion-label>\n <ng-content></ng-content>\n </ion-label>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: 0;--kirby-badge-right: 0}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top: -5px;--kirby-badge-right: -5px}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tab-button{padding:0 12px;margin-right:0}}\n"], components: [{ type: i1.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
8576
+ /** @nocollapse */ TabButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: TabButtonComponent, selector: "kirby-tab-button", inputs: { routerLink: "routerLink" }, outputs: { click: "click" }, queries: [{ propertyName: "icons", predicate: IconComponent }], ngImport: i0, template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n <div class=\"icon-container\" *ngIf=\"icons.length\">\n <ng-content\n *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n select=\"kirby-icon[:not([selected-tab])]\"\n ></ng-content>\n <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n </div>\n <ion-label>\n <ng-content></ng-content>\n </ion-label>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left:calc(50% + .4em)}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left:calc(50% + .2em)}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;flex-direction:row;padding:0 24px;margin-right:24px;font-size:14px;--color-selected: var(--kirby-black);--kirby-badge-position: absolute;--kirby-badge-top:calc(50% - 1.35em);--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tab-button{padding:0 12px;margin-right:0}}\n"], components: [{ type: i1.IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { type: i1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
8368
8577
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: TabButtonComponent, decorators: [{
8369
8578
  type: Component,
8370
- args: [{ selector: 'kirby-tab-button', template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n <div class=\"icon-container\" *ngIf=\"icons.length\">\n <ng-content\n *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n select=\"kirby-icon[:not([selected-tab])]\"\n ></ng-content>\n <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n <ng-content select=\"kirby-badge\"></ng-content>\n </div>\n <ion-label>\n <ng-content></ng-content>\n </ion-label>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: 0;--kirby-badge-right: 0}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>div kirby-badge.md{--kirby-badge-top: -5px;--kirby-badge-right: -5px}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;padding:0 24px;margin-right:24px;font-size:14px;flex-direction:row}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tab-button{padding:0 12px;margin-right:0}}\n"] }]
8579
+ args: [{ selector: 'kirby-tab-button', template: "<ion-tab-button #ionTabButton [tab]=\"routerLink\" (click)=\"onClick($event, ionTabButton.selected)\">\n <div class=\"icon-container\" *ngIf=\"icons.length\">\n <ng-content\n *ngIf=\"icons.length === 1 || !ionTabButton.selected\"\n select=\"kirby-icon[:not([selected-tab])]\"\n ></ng-content>\n <ng-content *ngIf=\"ionTabButton.selected\" select=\"kirby-icon[selected-tab]\"></ng-content>\n </div>\n <ion-label>\n <ng-content></ng-content>\n </ion-label>\n <ng-content select=\"kirby-badge\"></ng-content>\n</ion-tab-button>\n", styles: ["ion-tab-button{transition:all 80ms linear 0ms;height:100%;flex:1 1 0%;max-width:168px;font-size:10px;--color-selected: utils.get-color(\"black\");--kirby-badge-position: absolute;--kirby-badge-top: .55em;--kirby-badge-left:calc(50% + .4em)}@media (hover: hover) and (pointer: fine){ion-tab-button.ion-focused{--background: whitesmoke;--background-focused-opacity: 0}ion-tab-button.ion-focused:focus-visible{box-shadow:none;--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){ion-tab-button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--background: whitesmoke}}ion-tab-button:active,ion-tab-button.interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--background: #ebebeb}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-top: .3em;--kirby-badge-left:calc(50% + .2em)}ion-tab-button .icon-container{position:relative}@media (min-width: 721px){ion-tab-button{flex:none;flex-direction:row;padding:0 24px;margin-right:24px;font-size:14px;--color-selected: var(--kirby-black);--kirby-badge-position: absolute;--kirby-badge-top:calc(50% - 1.35em);--kirby-badge-left: 1.6em}ion-tab-button ::ng-deep>kirby-badge.md{--kirby-badge-position: relative;--kirby-badge-top: 0;--kirby-badge-left: 0;margin-left:2px;margin-bottom:1px}ion-tab-button:last-child{margin-right:0}ion-tab-button .icon-container{margin-right:8px}}@media (min-width: 1025px) and (hover: hover) and (pointer: fine){ion-tab-button{padding:0 12px;margin-right:0}}\n"] }]
8371
8580
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { routerLink: [{
8372
8581
  type: Input
8373
8582
  }], click: [{
@@ -8621,7 +8830,7 @@ class ToggleButtonComponent {
8621
8830
  }
8622
8831
  }
8623
8832
  /** @nocollapse */ ToggleButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
8624
- /** @nocollapse */ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ToggleButtonComponent, selector: "kirby-toggle-button", inputs: { checked: "checked" }, outputs: { checkChanged: "checkChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<ng-container *ngIf=\"!checked\">\n <ng-content select=\"button[kirby-button][unchecked]\"></ng-content>\n</ng-container>\n<ng-container *ngIf=\"checked\">\n <ng-content select=\"button[kirby-button][checked]\"></ng-content>\n</ng-container>\n", directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8833
+ /** @nocollapse */ ToggleButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: ToggleButtonComponent, selector: "kirby-toggle-button", inputs: { checked: "checked" }, outputs: { checkChanged: "checkChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0, template: "<ng-container *ngIf=\"!checked\">\n <ng-content select=\"button[kirby-button][unchecked]\"></ng-content>\n</ng-container>\n<ng-container *ngIf=\"checked\">\n <ng-content select=\"button[kirby-button][checked]\"></ng-content>\n</ng-container>\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8625
8834
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ToggleButtonComponent, decorators: [{
8626
8835
  type: Component,
8627
8836
  args: [{ selector: 'kirby-toggle-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!checked\">\n <ng-content select=\"button[kirby-button][unchecked]\"></ng-content>\n</ng-container>\n<ng-container *ngIf=\"checked\">\n <ng-content select=\"button[kirby-button][checked]\"></ng-content>\n</ng-container>\n" }]
@@ -8649,6 +8858,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
8649
8858
  }]
8650
8859
  }] });
8651
8860
 
8861
+ class PageLocalNavigationComponent {
8862
+ constructor(window) {
8863
+ this.window = window;
8864
+ this.DEBOUNCE_TIME_MS = 250;
8865
+ this.items = [];
8866
+ this.selectedIndex = 0;
8867
+ this.selectedIndexChange = new EventEmitter();
8868
+ console.warn('kirby-local-navigation component is an experimental feature and should not be used in a production environment.');
8869
+ }
8870
+ get tabBarNativeElement() {
8871
+ var _a;
8872
+ return (_a = this.tabBarElementRef) === null || _a === void 0 ? void 0 : _a.nativeElement;
8873
+ }
8874
+ ngAfterViewInit() {
8875
+ setTimeout(() => {
8876
+ this.scrollToSelectedTab(this.selectedIndex);
8877
+ }, this.DEBOUNCE_TIME_MS);
8878
+ }
8879
+ onTabChange(index) {
8880
+ if (this.selectedIndex !== index) {
8881
+ this.selectedIndex = index;
8882
+ this.scrollToSelectedTab(index);
8883
+ this.selectedIndexChange.emit(index);
8884
+ }
8885
+ }
8886
+ getSelectedItemElement(index) {
8887
+ const tabBarElement = this.tabBarNativeElement;
8888
+ if (tabBarElement) {
8889
+ return tabBarElement.children.item(index);
8890
+ }
8891
+ }
8892
+ focusNext(index) {
8893
+ const tabBarElement = this.tabBarNativeElement;
8894
+ if (tabBarElement) {
8895
+ const next = tabBarElement.children.item(index);
8896
+ next === null || next === void 0 ? void 0 : next.focus({ preventScroll: false });
8897
+ }
8898
+ }
8899
+ scrollToSelectedTab(index) {
8900
+ const tabBarElement = this.tabBarNativeElement;
8901
+ const selectedTabElement = this.getSelectedItemElement(index);
8902
+ if (tabBarElement && selectedTabElement) {
8903
+ const selectedTabElementWidth = selectedTabElement.getBoundingClientRect().width;
8904
+ const selectedTabElementOffsetLeft = selectedTabElement.offsetLeft;
8905
+ const tabBarElementWidth = tabBarElement.getBoundingClientRect().width;
8906
+ this.window.nativeWindow.requestAnimationFrame(() => {
8907
+ tabBarElement === null || tabBarElement === void 0 ? void 0 : tabBarElement.scrollTo({
8908
+ behavior: 'smooth',
8909
+ left: Math.max(0, selectedTabElementOffsetLeft - (tabBarElementWidth - selectedTabElementWidth) / 2),
8910
+ });
8911
+ });
8912
+ }
8913
+ }
8914
+ }
8915
+ /** @nocollapse */ PageLocalNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageLocalNavigationComponent, deps: [{ token: WindowRef }], target: i0.ɵɵFactoryTarget.Component });
8916
+ /** @nocollapse */ PageLocalNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.9", type: PageLocalNavigationComponent, selector: "kirby-page-local-navigation", inputs: { items: "items", selectedIndex: "selectedIndex" }, outputs: { selectedIndexChange: "selectedIndexChange" }, viewQueries: [{ propertyName: "tabBarElementRef", first: true, predicate: ["tabBar"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\n <div class=\"tab-bar\" #tabBar>\n <div\n class=\"tab-item\"\n *ngFor=\"let item of items; let i = index\"\n (click)=\"onTabChange(i)\"\n [ngClass]=\"i === selectedIndex ? 'selected' : ''\"\n [tabIndex]=\"0\"\n (keydown.enter)=\"onTabChange(i)\"\n (keydown.arrowLeft)=\"focusNext(i - 1)\"\n (keydown.arrowRight)=\"focusNext(i + 1)\"\n >\n <div class=\"tab-item-inner\" [class.extended]=\"!!item.badge\">\n <span [attr.text]=\"item.text\">{{ item.text }}</span>\n <ng-container *ngIf=\"item.badge; let badge\">\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"badge.description\"\n [themeColor]=\"badge.themeColor\"\n >\n <ng-container *ngIf=\"badge.content.name; else badgeTextContent\">\n <kirby-icon\n *ngIf=\"badge.content.isCustom; else defaultIconName\"\n [customName]=\"badge.content.name\"\n ></kirby-icon>\n <ng-template #defaultIconName>\n <kirby-icon [name]=\"badge.content.name\"></kirby-icon>\n </ng-template>\n </ng-container>\n <ng-template #badgeTextContent>\n {{ badge.content.text }}\n </ng-template>\n </kirby-badge>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [".tab-bar{position:relative;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.container{position:relative;background-color:var(--kirby-background-color);max-width:var(--page-content-max-width, 720px)}.container:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){.container:before{left:-16px;width:calc(100% + 32px)}}.tab-item{position:relative;cursor:pointer;box-sizing:border-box;outline:none;padding-bottom:2px}.tab-item.selected:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}.tab-item.selected,.tab-item:focus,.tab-item:hover{font-weight:700}.tab-item-inner{display:flex;align-items:center;justify-content:center;white-space:nowrap;margin:16px;-webkit-user-select:none;user-select:none}.tab-item-inner kirby-badge{margin-left:4px}.tab-item-inner>span{max-width:100px;overflow:hidden;text-overflow:ellipsis;line-height:24px}.tab-item-inner>span:before{display:block;content:attr(text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"], components: [{ type: KirbyBadge, selector: "kirby-badge", inputs: ["size", "text", "themeColor"] }, { type: IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
8917
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: PageLocalNavigationComponent, decorators: [{
8918
+ type: Component,
8919
+ args: [{ selector: 'kirby-page-local-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n <div class=\"tab-bar\" #tabBar>\n <div\n class=\"tab-item\"\n *ngFor=\"let item of items; let i = index\"\n (click)=\"onTabChange(i)\"\n [ngClass]=\"i === selectedIndex ? 'selected' : ''\"\n [tabIndex]=\"0\"\n (keydown.enter)=\"onTabChange(i)\"\n (keydown.arrowLeft)=\"focusNext(i - 1)\"\n (keydown.arrowRight)=\"focusNext(i + 1)\"\n >\n <div class=\"tab-item-inner\" [class.extended]=\"!!item.badge\">\n <span [attr.text]=\"item.text\">{{ item.text }}</span>\n <ng-container *ngIf=\"item.badge; let badge\">\n <kirby-badge\n role=\"text\"\n [attr.aria-label]=\"badge.description\"\n [themeColor]=\"badge.themeColor\"\n >\n <ng-container *ngIf=\"badge.content.name; else badgeTextContent\">\n <kirby-icon\n *ngIf=\"badge.content.isCustom; else defaultIconName\"\n [customName]=\"badge.content.name\"\n ></kirby-icon>\n <ng-template #defaultIconName>\n <kirby-icon [name]=\"badge.content.name\"></kirby-icon>\n </ng-template>\n </ng-container>\n <ng-template #badgeTextContent>\n {{ badge.content.text }}\n </ng-template>\n </kirby-badge>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [".tab-bar{position:relative;margin:0 auto;display:flex;gap:12px;align-items:center;justify-content:left;flex-wrap:nowrap;overflow-y:hidden;overflow-x:scroll;-webkit-overflow-scrolling:auto;scrollbar-width:none}.tab-bar::-webkit-scrollbar{display:none}.container{position:relative;background-color:var(--kirby-background-color);max-width:var(--page-content-max-width, 720px)}.container:before{content:\"\";background-color:var(--kirby-medium);position:absolute;height:1px;bottom:0;z-index:1;left:0;width:100%}@media (max-width: 752px){.container:before{left:-16px;width:calc(100% + 32px)}}.tab-item{position:relative;cursor:pointer;box-sizing:border-box;outline:none;padding-bottom:2px}.tab-item.selected:before{content:\"\";width:100%;background-color:var(--kirby-dark);position:absolute;border-radius:1px;height:2px;bottom:0;z-index:2}.tab-item.selected,.tab-item:focus,.tab-item:hover{font-weight:700}.tab-item-inner{display:flex;align-items:center;justify-content:center;white-space:nowrap;margin:16px;-webkit-user-select:none;user-select:none}.tab-item-inner kirby-badge{margin-left:4px}.tab-item-inner>span{max-width:100px;overflow:hidden;text-overflow:ellipsis;line-height:24px}.tab-item-inner>span:before{display:block;content:attr(text);font-weight:700;height:0;overflow:hidden;visibility:hidden}\n"] }]
8920
+ }], ctorParameters: function () { return [{ type: WindowRef }]; }, propDecorators: { items: [{
8921
+ type: Input
8922
+ }], selectedIndex: [{
8923
+ type: Input
8924
+ }], selectedIndexChange: [{
8925
+ type: Output
8926
+ }], tabBarElementRef: [{
8927
+ type: ViewChild,
8928
+ args: ['tabBar']
8929
+ }] } });
8930
+
8652
8931
  class KeyHandlerDirective {
8653
8932
  constructor(element) {
8654
8933
  this.element = element;
@@ -8803,6 +9082,7 @@ const exportedDeclarations = [
8803
9082
  SlideButtonComponent,
8804
9083
  ToggleComponent,
8805
9084
  EmptyStateComponent,
9085
+ AffixDirective,
8806
9086
  FormFieldComponent,
8807
9087
  InputComponent,
8808
9088
  InputCounterComponent,
@@ -8847,6 +9127,7 @@ const exportedModules = [
8847
9127
  ListModule,
8848
9128
  ChartsModule,
8849
9129
  SpinnerModule,
9130
+ DataTableModule,
8850
9131
  ];
8851
9132
  const allExports = [...exportedModules, ...exportedDeclarations];
8852
9133
  const importedModules = [...exportedModules];
@@ -8908,6 +9189,7 @@ class KirbyModule {
8908
9189
  SlideButtonComponent,
8909
9190
  ToggleComponent,
8910
9191
  EmptyStateComponent,
9192
+ AffixDirective,
8911
9193
  FormFieldComponent,
8912
9194
  InputComponent,
8913
9195
  InputCounterComponent,
@@ -8945,7 +9227,8 @@ class KirbyModule {
8945
9227
  ToggleButtonModule,
8946
9228
  ListModule,
8947
9229
  ChartsModule,
8948
- SpinnerModule], exports: [AppModule,
9230
+ SpinnerModule,
9231
+ DataTableModule], exports: [AppModule,
8949
9232
  RouterOutletModule,
8950
9233
  PageModule,
8951
9234
  TabsModule,
@@ -8954,7 +9237,8 @@ class KirbyModule {
8954
9237
  ToggleButtonModule,
8955
9238
  ListModule,
8956
9239
  ChartsModule,
8957
- SpinnerModule, CardComponent,
9240
+ SpinnerModule,
9241
+ DataTableModule, CardComponent,
8958
9242
  CardHeaderComponent,
8959
9243
  CardFooterComponent,
8960
9244
  ButtonComponent,
@@ -8975,6 +9259,7 @@ class KirbyModule {
8975
9259
  SlideButtonComponent,
8976
9260
  ToggleComponent,
8977
9261
  EmptyStateComponent,
9262
+ AffixDirective,
8978
9263
  FormFieldComponent,
8979
9264
  InputComponent,
8980
9265
  InputCounterComponent,
@@ -9016,7 +9301,8 @@ class KirbyModule {
9016
9301
  ToggleButtonModule,
9017
9302
  ListModule,
9018
9303
  ChartsModule,
9019
- SpinnerModule] });
9304
+ SpinnerModule,
9305
+ DataTableModule] });
9020
9306
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyModule, decorators: [{
9021
9307
  type: NgModule,
9022
9308
  args: [{
@@ -9044,9 +9330,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
9044
9330
  }] }];
9045
9331
  } });
9046
9332
 
9333
+ const COMPONENT_DECLARATIONS = [PageLocalNavigationComponent];
9334
+ /**
9335
+ * This module contains experimental components, that should not be used in a production environment.
9336
+ * @see KirbyModule
9337
+ */
9338
+ class KirbyExperimentalModule {
9339
+ }
9340
+ /** @nocollapse */ KirbyExperimentalModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyExperimentalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
9341
+ /** @nocollapse */ KirbyExperimentalModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyExperimentalModule, declarations: [PageLocalNavigationComponent], imports: [CommonModule, KirbyModule], exports: [PageLocalNavigationComponent] });
9342
+ /** @nocollapse */ KirbyExperimentalModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyExperimentalModule, imports: [[CommonModule, KirbyModule]] });
9343
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: KirbyExperimentalModule, decorators: [{
9344
+ type: NgModule,
9345
+ args: [{
9346
+ imports: [CommonModule, KirbyModule],
9347
+ exports: COMPONENT_DECLARATIONS,
9348
+ declarations: COMPONENT_DECLARATIONS,
9349
+ }]
9350
+ }] });
9351
+
9047
9352
  /**
9048
9353
  * Generated bundle index. Do not edit.
9049
9354
  */
9050
9355
 
9051
- export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, BaseChartComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, ElementAsButtonDirective, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, HorizontalDirection, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemTemplateDirective, ListModule, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, ModalRouterLinkDirective, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageModule, PageProgressComponent, PageSubtitleDirective, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, SpinnerModule, StockChartComponent, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, TabButtonComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleButtonModule, ToggleComponent, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent };
9356
+ export { AccordionDirective, AccordionItemComponent, ActionSheetComponent, AffixDirective, AppComponent, AppModule, AvatarComponent, AvatarSize, KirbyBadge as BadgeComponent, BaseChartComponent, ButtonComponent, ButtonSize, COMPONENT_PROPS, CalendarComponent, CardComponent, CardFooterComponent, CardHeaderComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, CheckboxComponent, ChipComponent, ComponentLoaderDirective, DataTableModule, DateInputDirective, DecimalMaskDirective, DividerComponent, DropdownComponent, ElementAsButtonDirective, EmptyStateComponent, FabSheetComponent, FitHeadingDirective, FitHeadingModule, FlagComponent, FormFieldComponent, FormFieldMessageComponent, GridCardConfiguration, GridComponent, HorizontalDirection, IconComponent, IconModule, IconRegistryService, IconSize, InfiniteScrollDirective, InputComponent, InputCounterComponent, InputSize, ItemComponent, ItemGroupComponent, ItemModule, ItemSize, ItemSlidingComponent, KeyHandlerDirective, KirbyAnimation, KirbyExperimentalModule, KirbyModule, LabelComponent, ListComponent, ListExperimentalComponent, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListItemColorDirective, ListItemComponent, ListItemTemplateDirective, ListModule, ListSectionHeaderComponent, ListSectionHeaderDirective, LoadingOverlayComponent, LoadingOverlayService, Modal, ModalController, ModalFooterComponent, ModalRouterLinkDirective, PageActionsComponent, PageActionsDirective, PageComponent, PageContentComponent, PageContentDirective, PageFooterComponent, PageLocalNavigationComponent, PageModule, PageProgressComponent, PageStickyContentDirective, PageSubtitleDirective, PageTitleComponent, PageTitleDirective, PageToolbarTitleDirective, PlatformService, PopoverComponent, ProgressCircleComponent, RadioComponent, RadioGroupComponent, RangeComponent, ReorderEvent, ReorderListComponent, ResizeObserverFactory, ResizeObserverService, RouterOutletComponent, RouterOutletModule, ScssHelper, SectionHeaderComponent, SegmentedControlComponent, SegmentedControlMode, SlideButtonComponent, SlideDirective, SlidesComponent, SpinnerComponent, SpinnerModule, StockChartComponent, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, TabButtonComponent, TableComponent, TableRowComponent, TabsComponent, TabsModule, TabsService, TextareaComponent, ThemeColorDirective, ToastController, ToggleButtonComponent, ToggleButtonModule, ToggleComponent, chartConfigHasType, defaultIcons, elementHasAncestor, isNumberArray, selectedTabClickEvent };
9052
9357
  //# sourceMappingURL=kirbydesign-designsystem.mjs.map