@kirbydesign/designsystem 7.2.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 (19) hide show
  1. package/README.md +7 -0
  2. package/esm2020/lib/components/button/button.component.mjs +2 -2
  3. package/esm2020/lib/components/charts/shared/chart-config-service/configs/type.config.mjs +4 -1
  4. package/esm2020/lib/components/dropdown/dropdown.component.mjs +2 -2
  5. package/esm2020/lib/components/fab-sheet/fab-sheet.component.mjs +7 -10
  6. package/esm2020/lib/components/icon/kirby-icon-settings.mjs +2 -1
  7. package/esm2020/lib/components/item/item.component.mjs +2 -2
  8. package/esm2020/lib/components/modal/services/modal.helper.mjs +12 -1
  9. package/fesm2015/kirbydesign-designsystem.mjs +27 -15
  10. package/fesm2015/kirbydesign-designsystem.mjs.map +1 -1
  11. package/fesm2020/kirbydesign-designsystem.mjs +27 -15
  12. package/fesm2020/kirbydesign-designsystem.mjs.map +1 -1
  13. package/icons/svg/user-blocked.svg +5 -0
  14. package/lib/components/fab-sheet/fab-sheet.component.d.ts +1 -3
  15. package/lib/components/modal/services/modal.helper.d.ts +1 -0
  16. package/package.json +2 -2
  17. package/polyfills/intersection-observer-polyfill-loader.js +1 -14
  18. package/polyfills/resize-observer-polyfill-loader.js +1 -14
  19. package/src/lib/components/icon/README.md +0 -16
package/esm2020/lib/components/modal/services/modal.helper.mjs CHANGED
@@ -16,8 +16,17 @@ export class ModalHelper {
16
16
  this.modalAnimationBuilder = modalAnimationBuilder;
17
17
  this.windowRef = windowRef;
18
18
  this.alertHelper = alertHelper;
19
+ /*
20
+ isModalOpening is used to prevent additional instantiations
21
+ of modals, while a modal is already being instatiated, but not completed.
22
+ This is the recommended approach by one of the maintainers of Ionic:
23
+ https://github.com/ionic-team/ionic-framework/issues/23327#issuecomment-847028058
24
+ */
25
+ this.isModalOpening = false;
19
26
  }
20
27
  async showModalWindow(config, alertConfig) {
28
+ if (this.isModalOpening)
29
+ return;
21
30
  config.flavor = config.flavor || 'modal';
22
31
  const modalPresentingElement = await this.getPresentingElement(config.flavor);
23
32
  let currentBackdrop;
@@ -45,6 +54,7 @@ export class ModalHelper {
45
54
  return canBeDismissed;
46
55
  };
47
56
  }
57
+ this.isModalOpening = true;
48
58
  const ionModal = await this.ionicModalController.create({
49
59
  component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
50
60
  cssClass: [
@@ -72,6 +82,7 @@ export class ModalHelper {
72
82
  });
73
83
  }
74
84
  await ionModal.present();
85
+ this.isModalOpening = false;
75
86
  return {
76
87
  dismiss: ionModal.dismiss.bind(ionModal),
77
88
  onWillDismiss: ionModal.onWillDismiss(),
@@ -123,4 +134,4 @@ ModalHelper.presentingElement = undefined;
123
134
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ModalHelper, decorators: [{
124
135
  type: Injectable
125
136
  }], ctorParameters: function () { return [{ type: i1.ModalController }, { type: i2.ModalAnimationBuilderService }, { type: i3.WindowRef }, { type: i4.AlertHelper }]; } });
126
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuaGVscGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL21vZGFsL3NlcnZpY2VzL21vZGFsLmhlbHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUdqRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFdEQsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sMERBQTBELENBQUM7QUFFeEcsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDakYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDOzs7Ozs7QUFJakYsTUFBTSxPQUFPLFdBQVc7SUFLdEIsWUFDVSxvQkFBcUMsRUFDckMscUJBQW1ELEVBQ25ELFNBQW9CLEVBQ3BCLFdBQXdCO1FBSHhCLHlCQUFvQixHQUFwQixvQkFBb0IsQ0FBaUI7UUFDckMsMEJBQXFCLEdBQXJCLHFCQUFxQixDQUE4QjtRQUNuRCxjQUFTLEdBQVQsU0FBUyxDQUFXO1FBQ3BCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO0lBQy9CLENBQUM7SUFFRyxLQUFLLENBQUMsZUFBZSxDQUFDLE1BQW1CLEVBQUUsV0FBeUI7UUFDekUsTUFBTSxDQUFDLE1BQU0sR0FBRyxNQUFNLENBQUMsTUFBTSxJQUFJLE9BQU8sQ0FBQztRQUN6QyxNQUFNLHNCQUFzQixHQUFHLE1BQU0sSUFBSSxDQUFDLG9CQUFvQixDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUU5RSxJQUFJLGVBQXVDLENBQUM7UUFDNUMsTUFB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J0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTW9kYWxDb250cm9sbGVyIH0gZnJvbSAnQGlvbmljL2FuZ3VsYXInO1xuXG5pbXBvcnQgeyBLaXJieUFuaW1hdGlvbiB9IGZyb20gJy4uLy4uLy4uL2FuaW1hdGlvbi9raXJieS1hbmltYXRpb24nO1xuaW1wb3J0IHsgV2luZG93UmVmIH0gZnJvbSAnLi4vLi4vLi4vdHlwZXMvd2luZG93LXJlZic7XG5pbXBvcnQgeyBBbGVydENvbmZpZyB9IGZyb20gJy4uL2FsZXJ0L2NvbmZpZy9hbGVydC1jb25maWcnO1xuaW1wb3J0IHsgTW9kYWxDb21wYWN0V3JhcHBlckNvbXBvbmVudCB9IGZyb20gJy4uL21vZGFsLXdyYXBwZXIvY29tcGFjdC9tb2RhbC1jb21wYWN0LXdyYXBwZXIuY29tcG9uZW50JztcbmltcG9ydCB7IE1vZGFsQ29uZmlnLCBNb2RhbEZsYXZvciwgTW9kYWxTaXplIH0gZnJvbSAnLi4vbW9kYWwtd3JhcHBlci9jb25maWcvbW9kYWwtY29uZmlnJztcbmltcG9ydCB7IE1vZGFsV3JhcHBlckNvbXBvbmVudCB9IGZyb20gJy4uL21vZGFsLXdyYXBwZXIvbW9kYWwtd3JhcHBlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgQWxlcnRIZWxwZXIgfSBmcm9tICcuL2FsZXJ0LmhlbHBlcic7XG5cbmltcG9ydCB7IE1vZGFsQW5pbWF0aW9uQnVpbGRlclNlcnZpY2UgfSBmcm9tICcuL21vZGFsLWFuaW1hdGlvbi1idWlsZGVyLnNlcnZpY2UnO1xuaW1wb3J0IHsgT3ZlcmxheSB9IGZyb20gJy4vbW9kYWwuaW50ZXJmYWNlcyc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBNb2RhbEhlbHBlciB7XG4gIC8vIFRPRE86IE1ha2UgcHJlc2VudGluZ0VsZW1lbnQgYW4gaW5zdGFuY2UgZmllbGQgd2hlblxuICAvLyBmb3JSb290KCkvc2luZ2xldG9uIHNlcnZpY2VzIGhhcyBiZWVuIHNvbHZlZDpcbiAgcHJpdmF0ZSBzdGF0aWMgcHJlc2VudGluZ0VsZW1lbnQ6IEhUTUxFbGVtZW50ID0gdW5kZWZpbmVkO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgaW9uaWNNb2RhbENvbnRyb2xsZXI6IE1vZGFsQ29udHJvbGxlcixcbiAgICBwcml2YXRlIG1vZGFsQW5pbWF0aW9uQnVpbGRlcjogTW9kYWxBbmltYXRpb25CdWlsZGVyU2VydmljZSxcbiAgICBwcml2YXRlIHdpbmRvd1JlZjogV2luZG93UmVmLFxuICAgIHByaXZhdGUgYWxlcnRIZWxwZXI6IEFsZXJ0SGVscGVyXG4gICkge31cblxuICBwdWJsaWMgYXN5bmMgc2hvd01vZGFsV2luZG93KGNvbmZpZzogTW9kYWxDb25maWcsIGFsZXJ0Q29uZmlnPzogQWxlcnRDb25maWcpOiBQcm9taXNlPE92ZXJsYXk+IHtcbiAgICBjb25maWcuZmxhdm9yID0gY29uZmlnLmZsYXZvciB8fCAnbW9kYWwnO1xuICAgIGNvbnN0IG1vZGFsUHJlc2VudGluZ0VsZW1lbnQgPSBhd2FpdCB0aGlzLmdldFByZXNlbnRpbmdFbGVtZW50KGNvbmZpZy5mbGF2b3IpO1xuXG4gICAgbGV0IGN1cnJlbnRCYWNrZHJvcDogSFRNTElvbkJhY2tkcm9wRWxlbWVudDtcbiAgICBjb25zdCB0b3BNb3N0TW9kYWwgPSBhd2FpdCB0aGlzLmlvbmljTW9kYWxDb250cm9sbGVyLmdldFRvcCgpO1xuICAgIGlmICh0b3BNb3N0TW9kYWwpIHtcbiAgICAgIGN1cnJlbnRCYWNrZHJvcCA9XG4gICAgICAgIHRvcE1vc3RNb2RhbC5zaGFkb3dSb290LnF1ZXJ5U2VsZWN0b3I8SFRNTElvbkJhY2tkcm9wRWxlbWVudD4oJ2lvbi1iYWNrZHJvcCcpO1xuICAgIH1cblxuICAgIGNvbnN0IGVudGVyQW5pbWF0aW9uID0gdGhpcy5tb2RhbEFuaW1hdGlvbkJ1aWxkZXIuZW50ZXJBbmltYXRpb24oY3VycmVudEJhY2tkcm9wKTtcbiAgICBjb25zdCBsZWF2ZUFuaW1hdGlvbiA9IHRoaXMubW9kYWxBbmltYXRpb25CdWlsZGVyLmxlYXZlQW5pbWF0aW9uKGN1cnJlbnRCYWNrZHJvcCk7XG5cbiAgICBjb25zdCBkZWZhdWx0TW9kYWxTaXplOiBNb2RhbFNpemUgPSBjb25maWcuZmxhdm9yID09PSAnbW9kYWwnID8gJ21lZGl1bScgOiBudWxsO1xuICAgIGNvbnN0IG1vZGFsU2l6ZSA9IGNvbmZpZy5zaXplIHx8IGRlZmF1bHRNb2RhbFNpemU7XG4gICAgY29uc3QgYWxsb3dfc2Nyb2xsX2NsYXNzID0gJ2FsbG93LWJhY2tncm91bmQtc2Nyb2xsJztcblxuICAgIGxldCBjdXN0b21Dc3NDbGFzc2VzID0gW107XG4gICAgaWYgKGNvbmZpZy5jc3NDbGFzcykge1xuICAgICAgY3VzdG9tQ3NzQ2xhc3NlcyA9IEFycmF5LmlzQXJyYXkoY29uZmlnLmNzc0NsYXNzKSA/IGNvbmZpZy5jc3NDbGFzcyA6IFtjb25maWcuY3NzQ2xhc3NdO1xuICAgIH1cblxuICAgIGlmIChjb25maWcuaW50ZXJhY3RXaXRoQmFja2dyb3VuZCkge1xuICAgICAgdGhpcy53aW5kb3dSZWYubmF0aXZlV2luZG93LmRvY3VtZW50LmJvZHkuY2xhc3NMaXN0LmFkZChhbGxvd19zY3JvbGxfY2xhc3MpO1xuICAgIH1cblxuICAgIGxldCBjYW5EaXNtaXNzOiBib29sZWFuIHwgKCgpID0+IFByb21pc2U8Ym9vbGVhbj4pID0gdHJ1ZTtcbiAgICBpZiAoYWxlcnRDb25maWcpIHtcbiAgICAgIGNhbkRpc21pc3MgPSBhc3luYyAoKSA9PiB7XG4gICAgICAgIGNvbnN0IGNhbkJlRGlzbWlzc2VkID0gYXdhaXQgdGhpcy5zaG93QWxlcnQoYWxlcnRDb25maWcpO1xuICAgICAgICByZXR1cm4gY2FuQmVEaXNtaXNzZWQ7XG4gICAgICB9O1xuICAgIH1cblxuICAgIGNvbnN0IGlvbk1vZGFsID0gYXdhaXQgdGhpcy5pb25pY01vZGFsQ29udHJvbGxlci5jcmVhdGUoe1xuICAgICAgY29tcG9uZW50OiBjb25maWcuZmxhdm9yID09PSAnY29tcGFjdCcgPyBNb2RhbENvbXBhY3RXcmFwcGVyQ29tcG9uZW50IDogTW9kYWxXcmFwcGVyQ29tcG9uZW50LFxuICAgICAgY3NzQ2xhc3M6IFtcbiAgICAgICAgJ2tpcmJ5LW92ZXJsYXknLFxuICAgICAgICAna2lyYnktbW9kYWwnLFxuICAgICAgICBjb25maWcuZmxhdm9yID09PSAnZHJhd2VyJyA/ICdraXJieS1kcmF3ZXInIDogbnVsbCxcbiAgICAgICAgY29uZmlnLmZsYXZvciA9PT0gJ2NvbXBhY3QnID8gJ2tpcmJ5LW1vZGFsLWNvbXBhY3QnIDogbnVsbCxcbiAgICAgICAgbW9kYWxTaXplID8gJ2tpcmJ5LW1vZGFsLScgKyBtb2RhbFNpemUgOiBudWxsLFxuICAgICAgICBjb25maWcuaW50ZXJhY3RXaXRoQmFja2dyb3VuZCA/ICdpbnRlcmFjdC13aXRoLWJhY2tncm91bmQnIDogbnVsbCxcbiAgICAgICAgLi4uY3VzdG9tQ3NzQ2xhc3NlcyxcbiAgICAgIF0sXG4gICAgICBiYWNrZHJvcERpc21pc3M6IGNvbmZpZy5mbGF2b3IgPT09ICdjb21wYWN0JyB8fCBjb25maWcuaW50ZXJhY3RXaXRoQmFja2dyb3VuZCA/IGZhbHNlIDogdHJ1ZSxcbiAgICAgIHNob3dCYWNrZHJvcDogIWNvbmZpZy5pbnRlcmFjdFdpdGhCYWNrZ3JvdW5kLFxuICAgICAgY29tcG9uZW50UHJvcHM6IHsgY29uZmlnOiBjb25maWcgfSxcbiAgICAgIHN3aXBlVG9DbG9zZTogY29uZmlnLmZsYXZvciAhPSAnY29tcGFjdCcsXG4gICAgICBwcmVzZW50aW5nRWxlbWVudDogbW9kYWxQcmVzZW50aW5nRWxlbWVudCxcbiAgICAgIGtleWJvYXJkQ2xvc2U6IGZhbHNlLFxuICAgICAgY2FuRGlzbWlzcyxcbiAgICAgIGVudGVyQW5pbWF0aW9uLFxuICAgICAgbGVhdmVBbmltYXRpb24sXG4gICAgfSk7XG5cbiAgICBpZiAoY29uZmlnLmludGVyYWN0V2l0aEJhY2tncm91bmQpIHtcbiAgICAgIGlvbk1vZGFsLm9uRGlkRGlzbWlzcygpLnRoZW4oKCkgPT4ge1xuICAgICAgICB0aGlzLndpbmRvd1JlZi5uYXRpdmVXaW5kb3cuZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QucmVtb3ZlKGFsbG93X3Njcm9sbF9jbGFzcyk7XG4gICAgICB9KTtcbiAgICB9XG5cbiAgICBhd2FpdCBpb25Nb2RhbC5wcmVzZW50KCk7XG5cbiAgICByZXR1cm4ge1xuICAgICAgZGlzbWlzczogaW9uTW9kYWwuZGlzbWlzcy5iaW5kKGlvbk1vZGFsKSxcbiAgICAgIG9uV2lsbERpc21pc3M6IGlvbk1vZGFsLm9uV2lsbERpc21pc3MoKSxcbiAgICAgIG9uRGlkRGlzbWlzczogaW9uTW9kYWwub25EaWREaXNtaXNzKCksXG4gICAgfTtcbiAgfVxuXG4gIHB1YmxpYyByZWdpc3RlclByZXNlbnRpbmdFbGVtZW50KGVsZW1lbnQ6IEhUTUxFbGVtZW50KSB7XG4gICAgTW9kYWxIZWxwZXIucHJlc2VudGluZ0VsZW1lbnQgPSBlbGVtZW50O1xuICB9XG5cbiAgcHVibGljIGFzeW5jIHNob3dBbGVydChjb25maWc6IEFsZXJ0Q29uZmlnKTogUHJvbWlzZTxib29sZWFuPiB7XG4gICAgY29uc3QgYWxlcnQgPSBhd2FpdCB0aGlzLmFsZXJ0SGVscGVyLnNob3dBbGVydChjb25maWcpO1xuICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGFsZXJ0Lm9uV2lsbERpc21pc3M7XG4gICAgcmV0dXJuIHJlc3VsdC5kYXRhO1xuICB9XG5cbiAgcHJpdmF0ZSBhc3luYyBnZXRQcmVzZW50aW5nRWxlbWVudChmbGF2b3I/OiBNb2RhbEZsYXZvcikge1xuICAgIGxldCBtb2RhbFByZXNlbnRpbmdFbGVtZW50OiBIVE1MRWxlbWVudCA9IHVuZGVmaW5lZDtcbiAgICBpZiAoIWZsYXZvciB8fCBmbGF2b3IgPT09ICdtb2RhbCcpIHtcbiAgICAgIGNvbnN0IHRvcE1vc3RNb2RhbCA9IGF3YWl0IHRoaXMuaW9uaWNNb2RhbENvbnRyb2xsZXIuZ2V0VG9wKCk7XG4gICAgICBpZiAoIXRvcE1vc3RNb2RhbCkge1xuICAgICAgICBtb2RhbFByZXNlbnRpbmdFbGVtZW50ID0gTW9kYWxIZWxwZXIucHJlc2VudGluZ0VsZW1lbnQ7XG4gICAgICB9IGVsc2UgaWYgKFxuICAgICAgICAhdG9wTW9zdE1vZGFsLmNsYXNzTGlzdC5jb250YWlucygna2lyYnktZHJhd2VyJykgJiZcbiAgICAgICAgIXRvcE1vc3RNb2RhbC5jbGFzc0xpc3QuY29udGFpbnMoJ2tpcmJ5LW1vZGFsLWNvbXBhY3QnKVxuICAgICAgKSB7XG4gICAgICAgIG1vZGFsUHJlc2VudGluZ0VsZW1lbnQgPSB0b3BNb3N0TW9kYWw7XG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiBtb2RhbFByZXNlbnRpbmdFbGVtZW50O1xuICB9XG5cbiAgcHVibGljIGFzeW5jIHNjcm9sbFRvVG9wKFxuICAgIG5vTW9kYWxSZWdpc3RlcmVkRXJyb3JNZXNzYWdlOiBzdHJpbmcsXG4gICAgZHVyYXRpb24/OiBLaXJieUFuaW1hdGlvbi5EdXJhdGlvblxuICApIHtcbiAgICBjb25zdCBtb2RhbCA9IGF3YWl0IHRoaXMuaW9uaWNNb2RhbENvbnRyb2xsZXIuZ2V0VG9wKCk7XG4gICAgaWYgKCFtb2RhbCB8fCAhKG1vZGFsLmNvbXBvbmVudCBpbnN0YW5jZW9mIE1vZGFsV3JhcHBlckNvbXBvbmVudCkpIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcihub01vZGFsUmVnaXN0ZXJlZEVycm9yTWVzc2FnZSk7XG4gICAgfVxuICAgIG1vZGFsLmNvbXBvbmVudC5zY3JvbGxUb1RvcChkdXJhdGlvbik7XG4gIH1cblxuICBwdWJsaWMgYXN5bmMgc2Nyb2xsVG9Cb3R0b20oXG4gICAgbm9Nb2RhbFJlZ2lzdGVyZWRFcnJvck1lc3NhZ2U6IHN0cmluZyxcbiAgICBkdXJhdGlvbj86IEtpcmJ5QW5pbWF0aW9uLkR1cmF0aW9uXG4gICkge1xuICAgIGNvbnN0IG1vZGFsID0gYXdhaXQgdGhpcy5pb25pY01vZGFsQ29udHJvbGxlci5nZXRUb3AoKTtcbiAgICBpZiAoIW1vZGFsIHx8ICEobW9kYWwuY29tcG9uZW50IGluc3RhbmNlb2YgTW9kYWxXcmFwcGVyQ29tcG9uZW50KSkge1xuICAgICAgdGhyb3cgbmV3IEVycm9yKG5vTW9kYWxSZWdpc3RlcmVkRXJyb3JNZXNzYWdlKTtcbiAgICB9XG4gICAgbW9kYWwuY29tcG9uZW50LnNjcm9sbFRvQm90dG9tKGR1cmF0aW9uKTtcbiAgfVxufVxuIl19
137
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuaGVscGVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy9kZXNpZ25zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL21vZGFsL3NlcnZpY2VzL21vZGFsLmhlbHBlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNDLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUdqRCxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFFdEQsT0FBTyxFQUFFLDRCQUE0QixFQUFFLE1BQU0sMERBQTBELENBQUM7QUFFeEcsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDakYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRTdDLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLG1DQUFtQyxDQUFDOzs7Ozs7QUFJakYsTUFBTSxPQUFPLFdBQVc7SUFLdEIsWUFDVSxvQkFBcUMsRUFDckMscUJBQW1ELEVBQ25ELFNBQW9CLEVBQ3BCLFdBQXdCO1FBSHhCLHlCQUFvQixHQUFwQixvQkFBb0IsQ0FBaUI7UUFDckMsMEJBQXFCLEdBQXJCLHFCQUFxQixDQUE4QjtRQUNuRCxjQUFTLEdBQVQsU0FBUyxDQUFXO1FBQ3BCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBR2xDOzs7OztVQUtFO1FBQ00sbUJBQWMsR0FBRyxLQUFLLENBQUM7SUFSNUIsQ0FBQztJQVVHLEtBQUssQ0FBQyxlQUFlLENBQUMsTUFBbUIsRUFBRSxXQUF5QjtRQUN6RSxJQUFJLElBQUksQ0FBQyxjQUFjO1lBQUUsT0FBTztRQUVoQyxNQUFNLENBQUMsTUFBTSxHQUFHLE1BQU0sQ0FBQyxNQUFNLElBQUksT0FBTyxDQUFDO1FBQ3pDLE1BQU0sc0JBQXNCLEdBQUcsTUFBTSxJ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O0FBL0lELHNEQUFzRDtBQUN0RCxnREFBZ0Q7QUFDakMsNkJBQWlCLEdBQWdCLFNBQVUsQ0FBQTsySEFIL0MsV0FBVzsrSEFBWCxXQUFXOzJGQUFYLFdBQVc7a0JBRHZCLFVBQVUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNb2RhbENvbnRyb2xsZXIgfSBmcm9tICdAaW9uaWMvYW5ndWxhcic7XG5cbmltcG9ydCB7IEtpcmJ5QW5pbWF0aW9uIH0gZnJvbSAnLi4vLi4vLi4vYW5pbWF0aW9uL2tpcmJ5LWFuaW1hdGlvbic7XG5pbXBvcnQgeyBXaW5kb3dSZWYgfSBmcm9tICcuLi8uLi8uLi90eXBlcy93aW5kb3ctcmVmJztcbmltcG9ydCB7IEFsZXJ0Q29uZmlnIH0gZnJvbSAnLi4vYWxlcnQvY29uZmlnL2FsZXJ0LWNvbmZpZyc7XG5pbXBvcnQgeyBNb2RhbENvbXBhY3RXcmFwcGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9kYWwtd3JhcHBlci9jb21wYWN0L21vZGFsLWNvbXBhY3Qtd3JhcHBlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgTW9kYWxDb25maWcsIE1vZGFsRmxhdm9yLCBNb2RhbFNpemUgfSBmcm9tICcuLi9tb2RhbC13cmFwcGVyL2NvbmZpZy9tb2RhbC1jb25maWcnO1xuaW1wb3J0IHsgTW9kYWxXcmFwcGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vbW9kYWwtd3JhcHBlci9tb2RhbC13cmFwcGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBBbGVydEhlbHBlciB9IGZyb20gJy4vYWxlcnQuaGVscGVyJztcblxuaW1wb3J0IHsgTW9kYWxBbmltYXRpb25CdWlsZGVyU2VydmljZSB9IGZyb20gJy4vbW9kYWwtYW5pbWF0aW9uLWJ1aWxkZXIuc2VydmljZSc7XG5pbXBvcnQgeyBPdmVybGF5IH0gZnJvbSAnLi9tb2RhbC5pbnRlcmZhY2VzJztcblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIE1vZGFsSGVscGVyIHtcbiAgLy8gVE9ETzogTWFrZSBwcmVzZW50aW5nRWxlbWVudCBhbiBpbnN0YW5jZSBmaWVsZCB3aGVuXG4gIC8vIGZvclJvb3QoKS9zaW5nbGV0b24gc2VydmljZXMgaGFzIGJlZW4gc29sdmVkOlxuICBwcml2YXRlIHN0YXRpYyBwcmVzZW50aW5nRWxlbWVudDogSFRNTEVsZW1lbnQgPSB1bmRlZmluZWQ7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBpb25pY01vZGFsQ29udHJvbGxlcjogTW9kYWxDb250cm9sbGVyLFxuICAgIHByaXZhdGUgbW9kYWxBbmltYXRpb25CdWlsZGVyOiBNb2RhbEFuaW1hdGlvbkJ1aWxkZXJTZXJ2aWNlLFxuICAgIHByaXZhdGUgd2luZG93UmVmOiBXaW5kb3dSZWYsXG4gICAgcHJpdmF0ZSBhbGVydEhlbHBlcjogQWxlcnRIZWxwZXJcbiAgKSB7fVxuXG4gIC8qIFxuICAgIGlzTW9kYWxPcGVuaW5nIGlzIHVzZWQgdG8gcHJldmVudCBhZGRpdGlvbmFsIGluc3RhbnRpYXRpb25zXG4gICAgb2YgbW9kYWxzLCB3aGlsZSBhIG1vZGFsIGlzIGFscmVhZHkgYmVpbmcgaW5zdGF0aWF0ZWQsIGJ1dCBub3QgY29tcGxldGVkLlxuICAgIFRoaXMgaXMgdGhlIHJlY29tbWVuZGVkIGFwcHJvYWNoIGJ5IG9uZSBvZiB0aGUgbWFpbnRhaW5lcnMgb2YgSW9uaWM6XG4gICAgaHR0cHM6Ly9naXRodWIuY29tL2lvbmljLXRlYW0vaW9uaWMtZnJhbWV3b3JrL2lzc3Vlcy8yMzMyNyNpc3N1ZWNvbW1lbnQtODQ3MDI4MDU4XG4gICovXG4gIHByaXZhdGUgaXNNb2RhbE9wZW5pbmcgPSBmYWxzZTtcblxuICBwdWJsaWMgYXN5bmMgc2hvd01vZGFsV2luZG93KGNvbmZpZzogTW9kYWxDb25maWcsIGFsZXJ0Q29uZmlnPzogQWxlcnRDb25maWcpOiBQcm9taXNlPE92ZXJsYXk+IHtcbiAgICBpZiAodGhpcy5pc01vZGFsT3BlbmluZykgcmV0dXJuO1xuXG4gICAgY29uZmlnLmZsYXZvciA9IGNvbmZpZy5mbGF2b3IgfHwgJ21vZGFsJztcbiAgICBjb25zdCBtb2RhbFByZXNlbnRpbmdFbGVtZW50ID0gYXdhaXQgdGhpcy5nZXRQcmVzZW50aW5nRWxlbWVudChjb25maWcuZmxhdm9yKTtcblxuICAgIGxldCBjdXJyZW50QmFja2Ryb3A6IEhUTUxJb25CYWNrZHJvcEVsZW1lbnQ7XG4gICAgY29uc3QgdG9wTW9zdE1vZGFsID0gYXdhaXQgdGhpcy5pb25pY01vZGFsQ29udHJvbGxlci5nZXRUb3AoKTtcbiAgICBpZiAodG9wTW9zdE1vZGFsKSB7XG4gICAgICBjdXJyZW50QmFja2Ryb3AgPVxuICAgICAgICB0b3BNb3N0TW9kYWwuc2hhZG93Um9vdC5xdWVyeVNlbGVjdG9yPEhUTUxJb25CYWNrZHJvcEVsZW1lbnQ+KCdpb24tYmFja2Ryb3AnKTtcbiAgICB9XG5cbiAgICBjb25zdCBlbnRlckFuaW1hdGlvbiA9IHRoaXMubW9kYWxBbmltYXRpb25CdWlsZGVyLmVudGVyQW5pbWF0aW9uKGN1cnJlbnRCYWNrZHJvcCk7XG4gICAgY29uc3QgbGVhdmVBbmltYXRpb24gPSB0aGlzLm1vZGFsQW5pbWF0aW9uQnVpbGRlci5sZWF2ZUFuaW1hdGlvbihjdXJyZW50QmFja2Ryb3ApO1xuXG4gICAgY29uc3QgZGVmYXVsdE1vZGFsU2l6ZTogTW9kYWxTaXplID0gY29uZmlnLmZsYXZvciA9PT0gJ21vZGFsJyA/ICdtZWRpdW0nIDogbnVsbDtcbiAgICBjb25zdCBtb2RhbFNpemUgPSBjb25maWcuc2l6ZSB8fCBkZWZhdWx0TW9kYWxTaXplO1xuICAgIGNvbnN0IGFsbG93X3Njcm9sbF9jbGFzcyA9ICdhbGxvdy1iYWNrZ3JvdW5kLXNjcm9sbCc7XG5cbiAgICBsZXQgY3VzdG9tQ3NzQ2xhc3NlcyA9IFtdO1xuICAgIGlmIChjb25maWcuY3NzQ2xhc3MpIHtcbiAgICAgIGN1c3RvbUNzc0NsYXNzZXMgPSBBcnJheS5pc0FycmF5KGNvbmZpZy5jc3NDbGFzcykgPyBjb25maWcuY3NzQ2xhc3MgOiBbY29uZmlnLmNzc0NsYXNzXTtcbiAgICB9XG5cbiAgICBpZiAoY29uZmlnLmludGVyYWN0V2l0aEJhY2tncm91bmQpIHtcbiAgICAgIHRoaXMud2luZG93UmVmLm5hdGl2ZVdpbmRvdy5kb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5hZGQoYWxsb3dfc2Nyb2xsX2NsYXNzKTtcbiAgICB9XG5cbiAgICBsZXQgY2FuRGlzbWlzczogYm9vbGVhbiB8ICgoKSA9PiBQcm9taXNlPGJvb2xlYW4+KSA9IHRydWU7XG4gICAgaWYgKGFsZXJ0Q29uZmlnKSB7XG4gICAgICBjYW5EaXNtaXNzID0gYXN5bmMgKCkgPT4ge1xuICAgICAgICBjb25zdCBjYW5CZURpc21pc3NlZCA9IGF3YWl0IHRoaXMuc2hvd0FsZXJ0KGFsZXJ0Q29uZmlnKTtcbiAgICAgICAgcmV0dXJuIGNhbkJlRGlzbWlzc2VkO1xuICAgICAgfTtcbiAgICB9XG5cbiAgICB0aGlzLmlzTW9kYWxPcGVuaW5nID0gdHJ1ZTtcblxuICAgIGNvbnN0IGlvbk1vZGFsID0gYXdhaXQgdGhpcy5pb25pY01vZGFsQ29udHJvbGxlci5jcmVhdGUoe1xuICAgICAgY29tcG9uZW50OiBjb25maWcuZmxhdm9yID09PSAnY29tcGFjdCcgPyBNb2RhbENvbXBhY3RXcmFwcGVyQ29tcG9uZW50IDogTW9kYWxXcmFwcGVyQ29tcG9uZW50LFxuICAgICAgY3NzQ2xhc3M6IFtcbiAgICAgICAgJ2tpcmJ5LW92ZXJsYXknLFxuICAgICAgICAna2lyYnktbW9kYWwnLFxuICAgICAgICBjb25maWcuZmxhdm9yID09PSAnZHJhd2VyJyA/ICdraXJieS1kcmF3ZXInIDogbnVsbCxcbiAgICAgICAgY29uZmlnLmZsYXZvciA9PT0gJ2NvbXBhY3QnID8gJ2tpcmJ5LW1vZGFsLWNvbXBhY3QnIDogbnVsbCxcbiAgICAgICAgbW9kYWxTaXplID8gJ2tpcmJ5LW1vZGFsLScgKyBtb2RhbFNpemUgOiBudWxsLFxuICAgICAgICBjb25maWcuaW50ZXJhY3RXaXRoQmFja2dyb3VuZCA/ICdpbnRlcmFjdC13aXRoLWJhY2tncm91bmQnIDogbnVsbCxcbiAgICAgICAgLi4uY3VzdG9tQ3NzQ2xhc3NlcyxcbiAgICAgIF0sXG4gICAgICBiYWNrZHJvcERpc21pc3M6IGNvbmZpZy5mbGF2b3IgPT09ICdjb21wYWN0JyB8fCBjb25maWcuaW50ZXJhY3RXaXRoQmFja2dyb3VuZCA/IGZhbHNlIDogdHJ1ZSxcbiAgICAgIHNob3dCYWNrZHJvcDogIWNvbmZpZy5pbnRlcmFjdFdpdGhCYWNrZ3JvdW5kLFxuICAgICAgY29tcG9uZW50UHJvcHM6IHsgY29uZmlnOiBjb25maWcgfSxcbiAgICAgIHN3aXBlVG9DbG9zZTogY29uZmlnLmZsYXZvciAhPSAnY29tcGFjdCcsXG4gICAgICBwcmVzZW50aW5nRWxlbWVudDogbW9kYWxQcmVzZW50aW5nRWxlbWVudCxcbiAgICAgIGtleWJvYXJkQ2xvc2U6IGZhbHNlLFxuICAgICAgY2FuRGlzbWlzcyxcbiAgICAgIGVudGVyQW5pbWF0aW9uLFxuICAgICAgbGVhdmVBbmltYXRpb24sXG4gICAgfSk7XG5cbiAgICBpZiAoY29uZmlnLmludGVyYWN0V2l0aEJhY2tncm91bmQpIHtcbiAgICAgIGlvbk1vZGFsLm9uRGlkRGlzbWlzcygpLnRoZW4oKCkgPT4ge1xuICAgICAgICB0aGlzLndpbmRvd1JlZi5uYXRpdmVXaW5kb3cuZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QucmVtb3ZlKGFsbG93X3Njcm9sbF9jbGFzcyk7XG4gICAgICB9KTtcbiAgICB9XG5cbiAgICBhd2FpdCBpb25Nb2RhbC5wcmVzZW50KCk7XG5cbiAgICB0aGlzLmlzTW9kYWxPcGVuaW5nID0gZmFsc2U7XG5cbiAgICByZXR1cm4ge1xuICAgICAgZGlzbWlzczogaW9uTW9kYWwuZGlzbWlzcy5iaW5kKGlvbk1vZGFsKSxcbiAgICAgIG9uV2lsbERpc21pc3M6IGlvbk1vZGFsLm9uV2lsbERpc21pc3MoKSxcbiAgICAgIG9uRGlkRGlzbWlzczogaW9uTW9kYWwub25EaWREaXNtaXNzKCksXG4gICAgfTtcbiAgfVxuXG4gIHB1YmxpYyByZWdpc3RlclByZXNlbnRpbmdFbGVtZW50KGVsZW1lbnQ6IEhUTUxFbGVtZW50KSB7XG4gICAgTW9kYWxIZWxwZXIucHJlc2VudGluZ0VsZW1lbnQgPSBlbGVtZW50O1xuICB9XG5cbiAgcHVibGljIGFzeW5jIHNob3dBbGVydChjb25maWc6IEFsZXJ0Q29uZmlnKTogUHJvbWlzZTxib29sZWFuPiB7XG4gICAgY29uc3QgYWxlcnQgPSBhd2FpdCB0aGlzLmFsZXJ0SGVscGVyLnNob3dBbGVydChjb25maWcpO1xuICAgIGNvbnN0IHJlc3VsdCA9IGF3YWl0IGFsZXJ0Lm9uV2lsbERpc21pc3M7XG4gICAgcmV0dXJuIHJlc3VsdC5kYXRhO1xuICB9XG5cbiAgcHJpdmF0ZSBhc3luYyBnZXRQcmVzZW50aW5nRWxlbWVudChmbGF2b3I/OiBNb2RhbEZsYXZvcikge1xuICAgIGxldCBtb2RhbFByZXNlbnRpbmdFbGVtZW50OiBIVE1MRWxlbWVudCA9IHVuZGVmaW5lZDtcbiAgICBpZiAoIWZsYXZvciB8fCBmbGF2b3IgPT09ICdtb2RhbCcpIHtcbiAgICAgIGNvbnN0IHRvcE1vc3RNb2RhbCA9IGF3YWl0IHRoaXMuaW9uaWNNb2RhbENvbnRyb2xsZXIuZ2V0VG9wKCk7XG4gICAgICBpZiAoIXRvcE1vc3RNb2RhbCkge1xuICAgICAgICBtb2RhbFByZXNlbnRpbmdFbGVtZW50ID0gTW9kYWxIZWxwZXIucHJlc2VudGluZ0VsZW1lbnQ7XG4gICAgICB9IGVsc2UgaWYgKFxuICAgICAgICAhdG9wTW9zdE1vZGFsLmNsYXNzTGlzdC5jb250YWlucygna2lyYnktZHJhd2VyJykgJiZcbiAgICAgICAgIXRvcE1vc3RNb2RhbC5jbGFzc0xpc3QuY29udGFpbnMoJ2tpcmJ5LW1vZGFsLWNvbXBhY3QnKVxuICAgICAgKSB7XG4gICAgICAgIG1vZGFsUHJlc2VudGluZ0VsZW1lbnQgPSB0b3BNb3N0TW9kYWw7XG4gICAgICB9XG4gICAgfVxuICAgIHJldHVybiBtb2RhbFByZXNlbnRpbmdFbGVtZW50O1xuICB9XG5cbiAgcHVibGljIGFzeW5jIHNjcm9sbFRvVG9wKFxuICAgIG5vTW9kYWxSZWdpc3RlcmVkRXJyb3JNZXNzYWdlOiBzdHJpbmcsXG4gICAgZHVyYXRpb24/OiBLaXJieUFuaW1hdGlvbi5EdXJhdGlvblxuICApIHtcbiAgICBjb25zdCBtb2RhbCA9IGF3YWl0IHRoaXMuaW9uaWNNb2RhbENvbnRyb2xsZXIuZ2V0VG9wKCk7XG4gICAgaWYgKCFtb2RhbCB8fCAhKG1vZGFsLmNvbXBvbmVudCBpbnN0YW5jZW9mIE1vZGFsV3JhcHBlckNvbXBvbmVudCkpIHtcbiAgICAgIHRocm93IG5ldyBFcnJvcihub01vZGFsUmVnaXN0ZXJlZEVycm9yTWVzc2FnZSk7XG4gICAgfVxuICAgIG1vZGFsLmNvbXBvbmVudC5zY3JvbGxUb1RvcChkdXJhdGlvbik7XG4gIH1cblxuICBwdWJsaWMgYXN5bmMgc2Nyb2xsVG9Cb3R0b20oXG4gICAgbm9Nb2RhbFJlZ2lzdGVyZWRFcnJvck1lc3NhZ2U6IHN0cmluZyxcbiAgICBkdXJhdGlvbj86IEtpcmJ5QW5pbWF0aW9uLkR1cmF0aW9uXG4gICkge1xuICAgIGNvbnN0IG1vZGFsID0gYXdhaXQgdGhpcy5pb25pY01vZGFsQ29udHJvbGxlci5nZXRUb3AoKTtcbiAgICBpZiAoIW1vZGFsIHx8ICEobW9kYWwuY29tcG9uZW50IGluc3RhbmNlb2YgTW9kYWxXcmFwcGVyQ29tcG9uZW50KSkge1xuICAgICAgdGhyb3cgbmV3IEVycm9yKG5vTW9kYWxSZWdpc3RlcmVkRXJyb3JNZXNzYWdlKTtcbiAgICB9XG4gICAgbW9kYWwuY29tcG9uZW50LnNjcm9sbFRvQm90dG9tKGR1cmF0aW9uKTtcbiAgfVxufVxuIl19
package/fesm2015/kirbydesign-designsystem.mjs CHANGED
@@ -129,6 +129,7 @@ const kirbyIconSettings = {
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
131
  { name: 'update', svg: 'assets/kirby/icons/svg/update.svg' },
132
+ { name: 'user-blocked', svg: 'assets/kirby/icons/svg/user-blocked.svg' },
132
133
  ],
133
134
  };
134
135
  const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);
@@ -494,10 +495,10 @@ class ButtonComponent {
494
495
  }
495
496
  }
496
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 });
497
- /** @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 });
498
499
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ButtonComponent, decorators: [{
499
500
  type: Component,
500
- 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"] }]
501
502
  }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { isAttentionLevel1: [{
502
503
  type: HostBinding,
503
504
  args: ['class.attention-level1']
@@ -1686,9 +1687,18 @@ class ModalHelper {
1686
1687
  this.modalAnimationBuilder = modalAnimationBuilder;
1687
1688
  this.windowRef = windowRef;
1688
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;
1689
1697
  }
1690
1698
  showModalWindow(config, alertConfig) {
1691
1699
  return __awaiter(this, void 0, void 0, function* () {
1700
+ if (this.isModalOpening)
1701
+ return;
1692
1702
  config.flavor = config.flavor || 'modal';
1693
1703
  const modalPresentingElement = yield this.getPresentingElement(config.flavor);
1694
1704
  let currentBackdrop;
@@ -1716,6 +1726,7 @@ class ModalHelper {
1716
1726
  return canBeDismissed;
1717
1727
  });
1718
1728
  }
1729
+ this.isModalOpening = true;
1719
1730
  const ionModal = yield this.ionicModalController.create({
1720
1731
  component: config.flavor === 'compact' ? ModalCompactWrapperComponent : ModalWrapperComponent,
1721
1732
  cssClass: [
@@ -1743,6 +1754,7 @@ class ModalHelper {
1743
1754
  });
1744
1755
  }
1745
1756
  yield ionModal.present();
1757
+ this.isModalOpening = false;
1746
1758
  return {
1747
1759
  dismiss: ionModal.dismiss.bind(ionModal),
1748
1760
  onWillDismiss: ionModal.onWillDismiss(),
@@ -3273,6 +3285,9 @@ const CHART_TYPES_CONFIG = {
3273
3285
  labelColor: (tooltipItem) => {
3274
3286
  return {
3275
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
3276
3291
  };
3277
3292
  },
3278
3293
  },
@@ -4049,10 +4064,10 @@ class ItemComponent {
4049
4064
  }
4050
4065
  }
4051
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 });
4052
- /** @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) 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-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: i5.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 });
4053
4068
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: ItemComponent, decorators: [{
4054
4069
  type: Component,
4055
- 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) 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-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"] }]
4056
4071
  }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
4057
4072
  type: Input
4058
4073
  }], selected: [{
@@ -4762,7 +4777,7 @@ DropdownComponent.OPEN_DELAY_IN_MS = 100;
4762
4777
  useExisting: forwardRef((() => DropdownComponent)),
4763
4778
  multi: true,
4764
4779
  },
4765
- ], 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}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: 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"] }] });
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"] }] });
4766
4781
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: DropdownComponent, decorators: [{
4767
4782
  type: Component,
4768
4783
  args: [{ selector: 'kirby-dropdown', providers: [
@@ -4771,7 +4786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImpor
4771
4786
  useExisting: forwardRef((() => DropdownComponent)),
4772
4787
  multi: true,
4773
4788
  },
4774
- ], 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}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"] }]
4775
4790
  }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: KeyboardHandlerService }]; }, propDecorators: { items: [{
4776
4791
  type: Input
4777
4792
  }], selectedIndex: [{
@@ -6345,16 +6360,12 @@ class FabSheetComponent {
6345
6360
  this.disabled = false;
6346
6361
  this.horizontalAlignment = 'right';
6347
6362
  this._isFabSheetOpen = false;
6348
- this._isBackdropVisible = false;
6349
6363
  }
6350
6364
  get isFabSheetOpen() {
6351
6365
  return this._isFabSheetOpen;
6352
6366
  }
6353
- get isBackdropVisible() {
6354
- return this._isBackdropVisible;
6355
- }
6356
6367
  ngAfterContentInit() {
6357
- if (!!this.actionSheet) {
6368
+ if (this.actionSheet) {
6358
6369
  this.actionSheet.hideCancel = true;
6359
6370
  }
6360
6371
  }
@@ -6375,21 +6386,22 @@ class FabSheetComponent {
6375
6386
  this._isFabSheetOpen = isOpen;
6376
6387
  if (this.isFabSheetOpen) {
6377
6388
  this.renderer.addClass(this.document.body, 'fab-sheet-active');
6389
+ this.renderer.addClass(this.document.body, 'backdrop-no-scroll');
6378
6390
  }
6379
6391
  else {
6380
6392
  this.renderer.removeClass(this.document.body, 'fab-sheet-active');
6393
+ this.renderer.removeClass(this.document.body, 'backdrop-no-scroll');
6381
6394
  }
6382
- this._isBackdropVisible = !!this.actionSheet && isOpen;
6383
6395
  this.changeDetectorRef.detectChanges();
6384
6396
  }
6385
6397
  }
6386
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 });
6387
- /** @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]=\"isBackdropVisible\"\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 });
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 });
6388
6400
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.9", ngImport: i0, type: FabSheetComponent, decorators: [{
6389
6401
  type: Component,
6390
- args: [{ selector: 'kirby-fab-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-backdrop\n [class.backdrop-visible]=\"isBackdropVisible\"\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"] }]
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"] }]
6391
6403
  }], ctorParameters: function () {
6392
- return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
6404
+ return [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{
6393
6405
  type: Inject,
6394
6406
  args: [DOCUMENT]
6395
6407
  }] }];