@kirbydesign/designsystem 8.2.0-rc.2 → 8.3.0

package/fesm2020/kirbydesign-designsystem-button.mjs

@@ -109,10 +109,10 @@ class ButtonComponent {
     }
 }
 /** @nocollapse */ ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.no-decoration": "this.hasNoDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ 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;flex-shrink:0;--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:none}: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:0;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: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--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 .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}: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.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}: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)}@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.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: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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.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-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn,:host-context(kirby-alert-experimental).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(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@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: .12;--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: .16;--state-layer-background-color: var(--kirby-black)}: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)}:host-context(kirby-dropdown.more-menu){justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.attention-level1": "this.isAttentionLevel1", "class.attention-level2": "this.isAttentionLevel2", "class.attention-level3": "this.isAttentionLevel3", "class.no-decoration": "this.hasNoDecoration", "class.floating": "this.isButtonFloating", "class.icon-only": "this.isIconOnly", "class.icon-left": "this.isIconLeft", "class.icon-right": "this.isIconRight", "class": "this._cssClass" } }, queries: [{ 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;flex-shrink:0;--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:none}: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:0;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: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--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.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}: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)}@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.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: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}: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.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-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn,:host-context(kirby-alert-experimental).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(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@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: .12;--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: .16;--state-layer-background-color: var(--kirby-black)}: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)}:host-context(kirby-dropdown.more-menu){justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], 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;flex-shrink:0;--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:none}: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:0;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: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--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 .content-layer.attention-level3{box-shadow:var(--kirby-inputs-elevation)}: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.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}: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)}@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.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: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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.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-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn,:host-context(kirby-alert-experimental).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(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@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: .12;--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: .16;--state-layer-background-color: var(--kirby-black)}: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)}:host-context(kirby-dropdown.more-menu){justify-content:center}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], 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;flex-shrink:0;--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:none}: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:0;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: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host:active,:host.interaction-state-active{--state-layer-opacity: .12;--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.icon-only .content-layer ::ng-deep>:not(kirby-icon){display:none}:host.xs{font-size:12px;height:24px;min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{--kirby-icon-font-size: 16px;width:24px;min-width:unset}:host.xs.icon-left{--kirby-button-padding-left: 8px;--kirby-icon-margin-right: 4px}:host.xs.icon-right{--kirby-button-padding-right: 8px;--kirby-icon-margin-left: 4px}:host.xs.icon-left,:host.xs.icon-right{--kirby-icon-font-size: 16px;min-width:44px}: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)}@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.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: .16;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.attention-level2:active,:host.attention-level2.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}:host.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host.attention-level3:active,:host.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host.attention-level3 .state-layer{box-shadow:var(--kirby-inputs-elevation)}: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.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-color-brightness-dark).no-decoration{--kirby-button-color: var(--kirby-white)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).no-decoration:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).no-decoration:active,:host-context(.kirby-color-brightness-dark).no-decoration.interaction-state-active{--state-layer-opacity: .2;--state-layer-background-color: var(--kirby-black-contrast)}: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-context(.kirby-color-brightness-dark).attention-level2:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level2:active,:host-context(.kirby-color-brightness-dark).attention-level2.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}@media (hover: hover){:host-context(.kirby-color-brightness-dark).attention-level3:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host-context(.kirby-color-brightness-dark).attention-level3:active,:host-context(.kirby-color-brightness-dark).attention-level3.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast)}:host-context(kirby-item)[slot=end]{margin-inline-start:16px}:host-context(kirby-alert).ok-btn,:host-context(kirby-alert-experimental).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(ion-toolbar ion-buttons.legacy-actions){font-size:14px;height:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only{width:40px}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3{--kirby-button-background-color: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@media (hover: hover){:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:hover,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:hover{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.no-decoration.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level1.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level2.interaction-state-active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3:active,:host-context(ion-toolbar ion-buttons.legacy-actions).icon-only.attention-level3.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}: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: var(--kirby-inputs-background-color);--kirby-button-color: var(--kirby-inputs-color)}@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: .12;--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: .16;--state-layer-background-color: var(--kirby-black)}: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)}:host-context(kirby-dropdown.more-menu){justify-content:center}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { isAttentionLevel1: [{
                 type: HostBinding,
                 args: ['class.attention-level1']
@@ -165,4 +165,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ButtonComponent, ButtonSize };
 //# sourceMappingURL=kirbydesign-designsystem-button.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-button.mjs.map

package/fesm2020/kirbydesign-designsystem-button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../../../libs/designsystem/button/src/button.component.ts","../../../../libs/designsystem/button/src/button.component.html","../../../../libs/designsystem/button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nconst ATTENTION_LEVEL_4_DEPRECATION_WARNING =\n  'Deprecation warning: The \"kirby-button\" support for using input property \"attentionLevel\" with the value \"4\" will be removed in a future release of Kirby designsystem. While deprecated, all attention-level 4 buttons will be rendered as attention-level 3.';\n\n@Component({\n  standalone: true,\n  imports: [CommonModule],\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[kirby-button],Button[kirby-button]',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n  @HostBinding('class.attention-level1')\n  isAttentionLevel1: boolean = true; // Default\n  @HostBinding('class.attention-level2')\n  isAttentionLevel2: boolean;\n  @HostBinding('class.attention-level3')\n  isAttentionLevel3: boolean;\n  @Input() set attentionLevel(level: '1' | '2' | '3' | '4') {\n    this.isAttentionLevel1 = level === '1';\n    this.isAttentionLevel2 = level === '2';\n    this.isAttentionLevel3 = level === '3' || level === '4';\n    if (level === '4') {\n      console.warn(ATTENTION_LEVEL_4_DEPRECATION_WARNING);\n    }\n  }\n\n  @HostBinding('class.no-decoration')\n  hasNoDecoration = false;\n  @Input()\n  set noDecoration(enable: boolean) {\n    this.hasNoDecoration = enable;\n    this.isAttentionLevel1 = !enable;\n    this.isAttentionLevel2 = false;\n    this.isAttentionLevel3 = false;\n  }\n\n  @HostBinding('class.floating')\n  public get isButtonFloating(): boolean {\n    return this.isFloating;\n  }\n\n  @HostBinding('class.icon-only')\n  public get isIconOnly(): boolean {\n    return !!this.iconElementRef && this.showIconOnly;\n  }\n  private _isIconLeft = false;\n  @HostBinding('class.icon-left')\n  public get isIconLeft() {\n    return this._isIconLeft && !this.showIconOnly;\n  }\n  private _isIconRight = false;\n  @HostBinding('class.icon-right')\n  public get isIconRight() {\n    return this._isIconRight && !this.showIconOnly;\n  }\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\n  }\n\n  @Input()\n  themeColor: NotificationColor;\n  @Input() expand: 'full' | 'block';\n  @Input() isFloating: boolean = false;\n  @Input()\n  size: ButtonSize | `${ButtonSize}` = ButtonSize.MD;\n\n  private _showIconOnly: boolean = false;\n  get showIconOnly() {\n    return this._showIconOnly;\n  }\n  @Input() set showIconOnly(value: boolean) {\n    if (value) {\n      // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n      // we need to wrap it in an element to be able to target and hide it with css:\n      this.wrapTextNode(this.iconElementRef?.nativeElement);\n    }\n    this._showIconOnly = value;\n  }\n\n  @ContentChild(IconComponent, { read: ElementRef })\n  iconElementRef?: ElementRef<HTMLElement>;\n\n  constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {}\n\n  private wrapTextNode(iconElement?: HTMLElement) {\n    if (!iconElement) {\n      return;\n    }\n\n    const ifTextNode = (node?: ChildNode): ChildNode | undefined => {\n      return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n    };\n\n    const textNode = ifTextNode(iconElement.previousSibling) || ifTextNode(iconElement.nextSibling);\n    if (textNode) {\n      const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n      const textWrapper = this.renderer.createElement('span');\n      const parent = textNode.parentNode;\n      this.renderer.removeChild(textNode.parentNode, textNode);\n      this.renderer.appendChild(textWrapper, textNode);\n      if (placement === 'before') {\n        this.renderer.insertBefore(parent, textWrapper, iconElement);\n      } else if (placement === 'after') {\n        this.renderer.appendChild(parent, textWrapper);\n      }\n    }\n  }\n\n  ngAfterContentInit(): void {\n    const iconElement = this.iconElementRef?.nativeElement;\n\n    if (iconElement === undefined) {\n      // Nothing to do here when there's no icon:\n      return;\n    }\n\n    if (this.showIconOnly) {\n      // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n      // we need to wrap it in an element to be able to target and hide it with css:\n      this.wrapTextNode(iconElement);\n    }\n\n    const hasText = !!this.elementRef.nativeElement.textContent;\n    if (!hasText) {\n      // Button doesn't contain any text, make it round:\n      this._showIconOnly = true;\n    }\n\n    if (hasText && !this.showIconOnly) {\n      this._isIconLeft =\n        this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n      this._isIconRight = !this._isIconLeft;\n    }\n  }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../../../libs/designsystem/button/src/button.component.ts","../../../../libs/designsystem/button/src/button.component.html","../../../../libs/designsystem/button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  ElementRef,\n  HostBinding,\n  Input,\n  Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\n\nimport { IconComponent } from '@kirbydesign/designsystem/icon';\n\nexport enum ButtonSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type AttentionLevel = '1' | '2' | '3' | '4';\n\nconst ATTENTION_LEVEL_4_DEPRECATION_WARNING =\n  'Deprecation warning: The \"kirby-button\" support for using input property \"attentionLevel\" with the value \"4\" will be removed in a future release of Kirby designsystem. While deprecated, all attention-level 4 buttons will be rendered as attention-level 3.';\n\n@Component({\n  standalone: true,\n  imports: [CommonModule],\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[kirby-button],Button[kirby-button]',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit {\n  @HostBinding('class.attention-level1')\n  isAttentionLevel1: boolean = true; // Default\n  @HostBinding('class.attention-level2')\n  isAttentionLevel2: boolean;\n  @HostBinding('class.attention-level3')\n  isAttentionLevel3: boolean;\n  @Input() set attentionLevel(level: AttentionLevel) {\n    this.isAttentionLevel1 = level === '1';\n    this.isAttentionLevel2 = level === '2';\n    this.isAttentionLevel3 = level === '3' || level === '4';\n    if (level === '4') {\n      console.warn(ATTENTION_LEVEL_4_DEPRECATION_WARNING);\n    }\n  }\n\n  @HostBinding('class.no-decoration')\n  hasNoDecoration = false;\n  @Input()\n  set noDecoration(enable: boolean) {\n    this.hasNoDecoration = enable;\n    this.isAttentionLevel1 = !enable;\n    this.isAttentionLevel2 = false;\n    this.isAttentionLevel3 = false;\n  }\n\n  @HostBinding('class.floating')\n  public get isButtonFloating(): boolean {\n    return this.isFloating;\n  }\n\n  @HostBinding('class.icon-only')\n  public get isIconOnly(): boolean {\n    return !!this.iconElementRef && this.showIconOnly;\n  }\n  private _isIconLeft = false;\n  @HostBinding('class.icon-left')\n  public get isIconLeft() {\n    return this._isIconLeft && !this.showIconOnly;\n  }\n  private _isIconRight = false;\n  @HostBinding('class.icon-right')\n  public get isIconRight() {\n    return this._isIconRight && !this.showIconOnly;\n  }\n\n  @HostBinding('class')\n  get _cssClass() {\n    return [this.themeColor, this.size].filter((cssClass) => !!cssClass);\n  }\n\n  @Input()\n  themeColor: NotificationColor;\n  @Input() expand: 'full' | 'block';\n  @Input() isFloating: boolean = false;\n  @Input()\n  size: ButtonSize | `${ButtonSize}` = ButtonSize.MD;\n\n  private _showIconOnly: boolean = false;\n  get showIconOnly() {\n    return this._showIconOnly;\n  }\n  @Input() set showIconOnly(value: boolean) {\n    if (value) {\n      // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n      // we need to wrap it in an element to be able to target and hide it with css:\n      this.wrapTextNode(this.iconElementRef?.nativeElement);\n    }\n    this._showIconOnly = value;\n  }\n\n  @ContentChild(IconComponent, { read: ElementRef })\n  iconElementRef?: ElementRef<HTMLElement>;\n\n  constructor(private elementRef: ElementRef<HTMLElement>, private renderer: Renderer2) {}\n\n  private wrapTextNode(iconElement?: HTMLElement) {\n    if (!iconElement) {\n      return;\n    }\n\n    const ifTextNode = (node?: ChildNode): ChildNode | undefined => {\n      return node?.nodeType === Node.TEXT_NODE ? node : undefined;\n    };\n\n    const textNode = ifTextNode(iconElement.previousSibling) || ifTextNode(iconElement.nextSibling);\n    if (textNode) {\n      const placement = textNode === iconElement.previousSibling ? 'before' : 'after';\n      const textWrapper = this.renderer.createElement('span');\n      const parent = textNode.parentNode;\n      this.renderer.removeChild(textNode.parentNode, textNode);\n      this.renderer.appendChild(textWrapper, textNode);\n      if (placement === 'before') {\n        this.renderer.insertBefore(parent, textWrapper, iconElement);\n      } else if (placement === 'after') {\n        this.renderer.appendChild(parent, textWrapper);\n      }\n    }\n  }\n\n  ngAfterContentInit(): void {\n    const iconElement = this.iconElementRef?.nativeElement;\n\n    if (iconElement === undefined) {\n      // Nothing to do here when there's no icon:\n      return;\n    }\n\n    if (this.showIconOnly) {\n      // If the button text is supplied as plain text (i.e. as a text node not within an element tag),\n      // we need to wrap it in an element to be able to target and hide it with css:\n      this.wrapTextNode(iconElement);\n    }\n\n    const hasText = !!this.elementRef.nativeElement.textContent;\n    if (!hasText) {\n      // Button doesn't contain any text, make it round:\n      this._showIconOnly = true;\n    }\n\n    if (hasText && !this.showIconOnly) {\n      this._isIconLeft =\n        this.elementRef.nativeElement.querySelector('.content-layer').firstChild === iconElement;\n      this._isIconRight = !this._isIconLeft;\n    }\n  }\n}\n","<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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/kirbydesign-designsystem-calendar.mjs

@@ -524,4 +524,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { CalendarComponent };
 //# sourceMappingURL=kirbydesign-designsystem-calendar.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-calendar.mjs.map

package/fesm2020/kirbydesign-designsystem-card.mjs

@@ -101,10 +101,10 @@ class CardComponent {
     }
 }
 /** @nocollapse */ CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", flat: "flat" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50)}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] });
+/** @nocollapse */ CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: CardComponent, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", flat: "flat" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class.flat": "this.flat" } }, ngImport: i0, template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50)}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
+            args: [{ selector: 'kirby-card', template: "<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host{--kirby-card-main-background-color: var(--kirby-white);--kirby-card-main-color: var(--kirby-white-contrast);--kirby-card-footer-background-color: var(--kirby-white);--kirby-card-footer-color: var(--kirby-white-contrast);--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;border-radius:16px;box-shadow:0 1px 24px #1c1c1c0a;color:var(--kirby-card-main-color);background-color:var(--kirby-card-main-background-color);background-image:var(--kirby-card-background-image);background-repeat:var(--kirby-card-background-repeat, no-repeat);background-position:var(--kirby-card-background-position, center);background-size:var(--kirby-card-background-size, cover);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.kirby-color-brightness-light{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2)}:host.kirby-color-brightness-dark{--kirby-inputs-background-color: var(--kirby-white-overlay);--kirby-inputs-background-color-hover: var(--kirby-white-overlay-30);--kirby-inputs-background-color-active: var(--kirby-white-overlay-40);--kirby-inputs-color: var(--kirby-white);--kirby-inputs-indicator-background-color: var(--kirby-white);--kirby-inputs-indicator-color: var(--kirby-black);--kirby-inputs-placeholder-color: var(--kirby-white-overlay-50);--kirby-inputs-elevation: none}@media (hover: hover){:host.kirby-color-brightness-dark[role=button]:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black-contrast);cursor:pointer}}:host.kirby-color-brightness-dark[role=button]:active,:host.kirby-color-brightness-dark[role=button].interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black-contrast)}:host .content-layer{display:inherit;flex-direction:inherit;justify-content:inherit}:host .content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}:host.flat{box-shadow:none}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;outline:none}:host[role=button] .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host[role=button] .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host[role=button] .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}@media (hover: hover){:host[role=button]:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host[role=button]:active,:host[role=button].interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}@media (hover: hover) and (pointer: fine){:host[role=button]:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host[role=button]:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host-context(.swiper-slide-active){box-shadow:0 20px 30px -15px #1c1c1c4d,0 0 5px #1c1c1c14;transition:all .5s;transform:translateY(-3px)}:host(.primary){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.ResizeObserverService }, { type: i0.Renderer2 }]; }, propDecorators: { title: [{
                 type: Input
             }], subtitle: [{
@@ -220,4 +220,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { CardAsButtonDirective, CardComponent, CardFooterComponent, CardHeaderComponent, CardModule };
 //# sourceMappingURL=kirbydesign-designsystem-card.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-card.mjs.map

package/fesm2020/kirbydesign-designsystem-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../../../libs/designsystem/card/src/card-footer/card-footer.component.ts","../../../../libs/designsystem/card/src/card-footer/card-footer.component.html","../../../../libs/designsystem/card/src/card-header/card-header.component.ts","../../../../libs/designsystem/card/src/card-header/card-header.component.html","../../../../libs/designsystem/card/src/card.component.ts","../../../../libs/designsystem/card/src/card.component.html","../../../../libs/designsystem/card/src/card-as-button/card-as-button.directive.ts","../../../../libs/designsystem/card/src/card.module.ts","../../../../libs/designsystem/card/src/kirbydesign-designsystem-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n  selector: 'kirby-card-footer',\n  templateUrl: './card-footer.component.html',\n  styleUrls: ['./card-footer.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n  @HostBinding('class.has-padding')\n  @Input()\n  hasPadding: boolean = true;\n}\n","<footer>\n  <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n  selector: 'kirby-card-header',\n  templateUrl: './card-header.component.html',\n  styleUrls: ['./card-header.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n  @Input() title: string;\n  @Input() subtitle: string;\n  @Input() isTitleBold: boolean;\n  @HostBinding('class')\n  @Input()\n  flagged: CardFlagLevel = null;\n  @HostBinding('class.has-padding')\n  @Input()\n  hasPadding: boolean = true;\n}\n","<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n","import {\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  selector: 'kirby-card',\n  templateUrl: './card.component.html',\n  styleUrls: ['./card.component.scss'],\n})\nexport class CardComponent implements OnInit, OnDestroy {\n  @Input() title: string;\n  @Input() subtitle: string;\n\n  @HostBinding('style.--kirby-card-background-image')\n  _backgroundImage: string;\n\n  @Input()\n  set backgroundImageUrl(value: string) {\n    this._backgroundImage = `url('${value}')`;\n  }\n\n  @Input()\n  hasPadding: boolean;\n\n  private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n    small: 360,\n    medium: 720,\n    large: 1024,\n  });\n\n  @Input()\n  set sizes(value: { [size: string]: number }) {\n    if (typeof value === 'string') {\n      console.error(\n        'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n      );\n    }\n    this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n  }\n\n  @HostBinding('class.flat')\n  @Input()\n  flat: boolean = false;\n\n  constructor(\n    private elementRef: ElementRef,\n    private resizeObserverService: ResizeObserverService,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit() {\n    this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n  }\n\n  ngOnDestroy() {\n    this.resizeObserverService.unobserve(this.elementRef);\n  }\n\n  private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n    return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n  }\n\n  private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n    return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n  }\n\n  private handleResize(entry: ResizeObserverEntry) {\n    const sizeAttributeName = 'size';\n    const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n    const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n    if (entry.contentRect.width < smallestBreakpointWidth) {\n      this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n    } else {\n      this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n        if (entry.contentRect.width >= width) {\n          this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n        }\n      });\n    }\n  }\n}\n","<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n","import { Directive, ElementRef, HostBinding, HostListener, OnInit, Optional } from '@angular/core';\n\nimport { CardComponent } from '../card.component';\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective implements OnInit {\n  @HostBinding('attr.role') role: string = 'button';\n  @HostBinding('attr.tabindex') tabindex: number = 0;\n\n  @HostBinding('class.interaction-state-active') _pressed = false;\n  constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}\n\n  ngOnInit(): void {\n    if (this.card) {\n      this.card.flat = false;\n    }\n  }\n\n  @HostListener('keydown.space', ['$event'])\n  @HostListener('keydown.enter', ['$event'])\n  _onKeydownHandler(event: KeyboardEvent) {\n    this._pressed = true;\n    this.clickableElement.nativeElement.click(event);\n    /*\n     * Prevent default event from firing so the UA wont\n     * catch this event and e.g. scroll the page on space,\n     * which is the default behavior in major browsers\n     */\n\n    event.preventDefault();\n  }\n\n  @HostListener('keyup.space')\n  @HostListener('keyup.enter')\n  @HostListener('blur')\n  _onInactiveHandler() {\n    this._pressed = false;\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst declarations = [\n  CardComponent,\n  CardFooterComponent,\n  CardHeaderComponent,\n  CardAsButtonDirective,\n];\n@NgModule({\n  imports: [CommonModule, ThemeColorDirective],\n  declarations: [...declarations],\n  exports: [...declarations, ThemeColorDirective],\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i1.CardComponent"],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../../../libs/designsystem/card/src/card-footer/card-footer.component.ts","../../../../libs/designsystem/card/src/card-footer/card-footer.component.html","../../../../libs/designsystem/card/src/card-header/card-header.component.ts","../../../../libs/designsystem/card/src/card-header/card-header.component.html","../../../../libs/designsystem/card/src/card.component.ts","../../../../libs/designsystem/card/src/card.component.html","../../../../libs/designsystem/card/src/card-as-button/card-as-button.directive.ts","../../../../libs/designsystem/card/src/card.module.ts","../../../../libs/designsystem/card/src/kirbydesign-designsystem-card.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n  selector: 'kirby-card-footer',\n  templateUrl: './card-footer.component.html',\n  styleUrls: ['./card-footer.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardFooterComponent {\n  @HostBinding('class.has-padding')\n  @Input()\n  hasPadding: boolean = true;\n}\n","<footer>\n  <ng-content></ng-content>\n</footer>\n","import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nimport { CardFlagLevel } from '../card-flag-level';\n\n@Component({\n  selector: 'kirby-card-header',\n  templateUrl: './card-header.component.html',\n  styleUrls: ['./card-header.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardHeaderComponent {\n  @Input() title: string;\n  @Input() subtitle: string;\n  @Input() isTitleBold: boolean;\n  @HostBinding('class')\n  @Input()\n  flagged: CardFlagLevel = null;\n  @HostBinding('class.has-padding')\n  @Input()\n  hasPadding: boolean = true;\n}\n","<header>\n  <h2 *ngIf=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</h2>\n  <h4 *ngIf=\"subtitle\">{{ subtitle }}</h4>\n  <ng-content></ng-content>\n</header>\n","import {\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  OnDestroy,\n  OnInit,\n  Renderer2,\n} from '@angular/core';\nimport { ResizeObserverService } from '@kirbydesign/designsystem/shared';\n\n@Component({\n  selector: 'kirby-card',\n  templateUrl: './card.component.html',\n  styleUrls: ['./card.component.scss'],\n})\nexport class CardComponent implements OnInit, OnDestroy {\n  @Input() title: string;\n  @Input() subtitle: string;\n\n  @HostBinding('style.--kirby-card-background-image')\n  _backgroundImage: string;\n\n  @Input()\n  set backgroundImageUrl(value: string) {\n    this._backgroundImage = `url('${value}')`;\n  }\n\n  @Input()\n  hasPadding: boolean;\n\n  private sizesSortedByBreakpoint = this.sortSizesByBreakpoint({\n    small: 360,\n    medium: 720,\n    large: 1024,\n  });\n\n  @Input()\n  set sizes(value: { [size: string]: number }) {\n    if (typeof value === 'string') {\n      console.error(\n        'Sizes property cannot be a string. Please ensure the size property is bound as an expression:\\n[sizes]=\"{...}\"'\n      );\n    }\n    this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);\n  }\n\n  @HostBinding('class.flat')\n  @Input()\n  flat: boolean = false;\n\n  constructor(\n    private elementRef: ElementRef,\n    private resizeObserverService: ResizeObserverService,\n    private renderer: Renderer2\n  ) {}\n\n  ngOnInit() {\n    this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));\n  }\n\n  ngOnDestroy() {\n    this.resizeObserverService.unobserve(this.elementRef);\n  }\n\n  private sortSizesByBreakpoint(sizes: { [size: string]: number }): [string, number][] {\n    return Object.entries(sizes).sort(this.compareSizesByBreakpoint);\n  }\n\n  private compareSizesByBreakpoint(a: [string, number], b: [string, number]): number {\n    return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;\n  }\n\n  private handleResize(entry: ResizeObserverEntry) {\n    const sizeAttributeName = 'size';\n    const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];\n    const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];\n    if (entry.contentRect.width < smallestBreakpointWidth) {\n      this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);\n    } else {\n      this.sizesSortedByBreakpoint.forEach(([size, width]) => {\n        if (entry.contentRect.width >= width) {\n          this.renderer.setAttribute(entry.target, sizeAttributeName, size);\n        }\n      });\n    }\n  }\n}\n","<div class=\"state-layer\" aria-hidden=\"true\"></div>\n<div class=\"content-layer\">\n  <ng-content select=\"kirby-card-header\"></ng-content>\n  <div class=\"content-wrapper\" [class.padding]=\"hasPadding\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"kirby-card-footer\"></ng-content>\n</div>\n","import { Directive, ElementRef, HostBinding, HostListener, OnInit, Optional } from '@angular/core';\n\nimport { CardComponent } from '../card.component';\n\n@Directive({\n  // eslint-disable-next-line @angular-eslint/directive-selector\n  selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective implements OnInit {\n  @HostBinding('attr.role') role: string = 'button';\n  @HostBinding('attr.tabindex') tabindex: number = 0;\n\n  @HostBinding('class.interaction-state-active') _pressed = false;\n  constructor(@Optional() private card: CardComponent, private clickableElement: ElementRef) {}\n\n  ngOnInit(): void {\n    if (this.card) {\n      this.card.flat = false;\n    }\n  }\n\n  @HostListener('keydown.space', ['$event'])\n  @HostListener('keydown.enter', ['$event'])\n  _onKeydownHandler(event: KeyboardEvent) {\n    this._pressed = true;\n    this.clickableElement.nativeElement.click(event);\n    /*\n     * Prevent default event from firing so the UA wont\n     * catch this event and e.g. scroll the page on space,\n     * which is the default behavior in major browsers\n     */\n\n    event.preventDefault();\n  }\n\n  @HostListener('keyup.space')\n  @HostListener('keyup.enter')\n  @HostListener('blur')\n  _onInactiveHandler() {\n    this._pressed = false;\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { ThemeColorDirective } from '@kirbydesign/designsystem/shared';\nimport { CardComponent } from './card.component';\nimport { CardHeaderComponent } from './card-header/card-header.component';\nimport { CardFooterComponent } from './card-footer/card-footer.component';\nimport { CardAsButtonDirective } from './card-as-button/card-as-button.directive';\n\nconst declarations = [\n  CardComponent,\n  CardFooterComponent,\n  CardHeaderComponent,\n  CardAsButtonDirective,\n];\n@NgModule({\n  imports: [CommonModule, ThemeColorDirective],\n  declarations: [...declarations],\n  exports: [...declarations, ThemeColorDirective],\n})\nexport class CardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1","i1.CardComponent"],"mappings":"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"}

package/fesm2020/kirbydesign-designsystem-chart.mjs

@@ -1524,4 +1524,3 @@ const getChartStockShortDateTime = (dateInMiliseconds, locale) => {
 
 export { BarChartConfig, BaseChartComponent, ChartComponent, ChartConfigService, ChartJSService, ChartsModule, StockChartComponent, StockChartConfig, TEST_CHART_ANNOTATIONS_CONFIG, TEST_CHART_TYPES_CONFIG, isNumberArray };
 //# sourceMappingURL=kirbydesign-designsystem-chart.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-chart.mjs.map

package/fesm2020/kirbydesign-designsystem-checkbox.mjs

@@ -75,4 +75,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { CheckboxComponent };
 //# sourceMappingURL=kirbydesign-designsystem-checkbox.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-checkbox.mjs.map

package/fesm2020/kirbydesign-designsystem-data-table.mjs

@@ -70,4 +70,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { DataTableModule, TableComponent, TableRowComponent };
 //# sourceMappingURL=kirbydesign-designsystem-data-table.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-data-table.mjs.map

package/fesm2020/kirbydesign-designsystem-divider.mjs

@@ -19,4 +19,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { DividerComponent };
 //# sourceMappingURL=kirbydesign-designsystem-divider.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-divider.mjs.map

package/fesm2020/kirbydesign-designsystem-dropdown.mjs

@@ -1,8 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, RendererStyleFlags2, forwardRef, TemplateRef, ElementRef, Component, Input, HostBinding, Output, ContentChild, ContentChildren, ViewChild, ViewChildren, HostListener, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i6 from '@kirbydesign/designsystem/button';
-import { ButtonComponent } from '@kirbydesign/designsystem/button';
 import * as i2 from '@kirbydesign/designsystem/card';
 import { CardComponent, CardModule } from '@kirbydesign/designsystem/card';
 import { DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
@@ -11,6 +9,8 @@ import { ItemComponent, ItemModule } from '@kirbydesign/designsystem/item';
 import { ListItemTemplateDirective } from '@kirbydesign/designsystem/list';
 import * as i5 from '@kirbydesign/designsystem/popover';
 import { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';
+import * as i6 from '@kirbydesign/designsystem/button';
+import { ButtonComponent } from '@kirbydesign/designsystem/button';
 import * as i3 from '@kirbydesign/designsystem/icon';
 import { IconModule } from '@kirbydesign/designsystem/icon';
 import * as i7 from '@angular/common';
@@ -30,21 +30,26 @@ var VerticalDirection;
 })(VerticalDirection || (VerticalDirection = {}));
 
 class KeyboardHandlerService {
-    handle(event, items, selectedIndex) {
+    handle(event, selectedIndex, maxIndex, cyclicIndex = false) {
         let newIndex = -1;
         switch (event.key) {
             case 'ArrowUp':
             case 'ArrowLeft':
-                // Select previous item:
-                newIndex = selectedIndex - 1;
+                if (selectedIndex === 0 && cyclicIndex) {
+                    newIndex = maxIndex;
+                }
+                else {
+                    // Select previous item:
+                    newIndex = selectedIndex - 1;
+                }
                 break;
             case 'ArrowDown':
             case 'ArrowRight':
-                if (selectedIndex === undefined) {
+                if (selectedIndex === undefined || (selectedIndex === maxIndex && cyclicIndex)) {
                     // None selected, select first item:
                     newIndex = 0;
                 }
-                else if (selectedIndex < items.length - 1) {
+                else if (selectedIndex < maxIndex) {
                     // Select next item:
                     newIndex = selectedIndex + 1;
                 }
@@ -55,7 +60,7 @@ class KeyboardHandlerService {
                 break;
             case 'End':
                 // Select last item:
-                newIndex = items.length - 1;
+                newIndex = maxIndex;
                 break;
             default:
                 break;
@@ -480,7 +485,7 @@ class DropdownComponent {
             }
             return false;
         }
-        const newFocusedIndex = this.keyboardHandlerService.handle(event, this.items, this.focusedIndex);
+        const newFocusedIndex = this.keyboardHandlerService.handle(event, this.focusedIndex, this.items.length - 1);
         if (newFocusedIndex > -1) {
             this.focusedIndex = newFocusedIndex;
         }
@@ -491,7 +496,7 @@ class DropdownComponent {
             return;
         if (!this.isOpen)
             return;
-        const newFocusedIndex = this.keyboardHandlerService.handle(event, this.items, this.focusedIndex);
+        const newFocusedIndex = this.keyboardHandlerService.handle(event, this.focusedIndex, this.items.length - 1);
         if (newFocusedIndex > -1) {
             this.focusedIndex = newFocusedIndex;
         }
@@ -707,4 +712,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { DropdownComponent, DropdownModule, KeyboardHandlerService, OpenState, VerticalDirection };
 //# sourceMappingURL=kirbydesign-designsystem-dropdown.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-dropdown.mjs.map