npm - @kirbydesign/designsystem - Versions diffs - 11.8.0-rc.1 → 11.9.0-rc.0 - Mend

@kirbydesign/designsystem 11.8.0-rc.1 → 11.9.0-rc.0

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

Files changed (59) hide show

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

@@ -123,11 +123,11 @@ class ButtonComponent {
         this.disposeEventListeners.forEach((unlistenEvent) => unlistenEvent());
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.no-decoration": "this.noDecoration", "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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}: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{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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:0;border-radius:inherit;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{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:clamp(12px,.875rem,28px);height:40px;min-width:88px;padding:0;margin:4px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left,:host.icon-right{--kirby-icon-font-size: 24px}: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{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;--kirby-icon-font-size: 24px;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:clamp(11px,.75rem,24px);height:max(24px,1rem);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:max(24px,1rem);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:clamp(11px,.75rem,24px);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:clamp(13px,1rem,32px);height:48px;min-width:220px}:host.lg.icon-only{--kirby-icon-font-size: 24px;width:48px;min-width:unset}:host.lg.icon-left,:host.lg.icon-right{--kirby-icon-font-size: 24px}: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,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}: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(a){text-decoration:none}: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:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:clamp(12px,.875rem,28px);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:clamp(13px,1rem,32px);height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{--kirby-icon-font-size: 24px;width:48px;min-width:unset}:host-context(kirby-empty-state .content).icon-left,:host-context(kirby-empty-state .content).icon-right{--kirby-icon-font-size: 24px}: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-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: ButtonComponent, isStandalone: true, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: { attentionLevel: "attentionLevel", noDecoration: "noDecoration", themeColor: "themeColor", expand: "expand", isFloating: "isFloating", size: "size", showIconOnly: "showIconOnly" }, host: { properties: { "class.no-decoration": "this.noDecoration", "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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}: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{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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:0;border-radius:inherit;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{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:clamp(12px,.875rem,28px);height:40px;min-width:88px;padding:0;margin:4px;outline:none;border:none}: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{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{--kirby-icon-font-size: 16px;font-size:clamp(11px,.75rem,24px);height:max(24px,1rem);min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{width:max(24px,1rem);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{min-width:44px}:host.sm{--kirby-icon-font-size: 16px;font-size:clamp(11px,.75rem,24px);height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{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{min-width:88px}:host.lg{font-size:clamp(13px,1rem,32px);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,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}: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(a){text-decoration:none}: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:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:clamp(12px,.875rem,28px);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:clamp(13px,1rem,32px);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-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'button[kirby-button],Button[kirby-button],a[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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}: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{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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:0;border-radius:inherit;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{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:clamp(12px,.875rem,28px);height:40px;min-width:88px;padding:0;margin:4px;outline:none;border:none}:host.no-margin{margin:0}:host.icon-left,:host.icon-right{--kirby-icon-font-size: 24px}: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{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;--kirby-icon-font-size: 24px;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{font-size:clamp(11px,.75rem,24px);height:max(24px,1rem);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:max(24px,1rem);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:clamp(11px,.75rem,24px);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:clamp(13px,1rem,32px);height:48px;min-width:220px}:host.lg.icon-only{--kirby-icon-font-size: 24px;width:48px;min-width:unset}:host.lg.icon-left,:host.lg.icon-right{--kirby-icon-font-size: 24px}: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,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}: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(a){text-decoration:none}: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:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:clamp(12px,.875rem,28px);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:clamp(13px,1rem,32px);height:48px;min-width:220px}:host-context(kirby-empty-state .content).icon-only{--kirby-icon-font-size: 24px;width:48px;min-width:unset}:host-context(kirby-empty-state .content).icon-left,:host-context(kirby-empty-state .content).icon-right{--kirby-icon-font-size: 24px}: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-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"] }]
+            args: [{ selector: 'button[kirby-button],Button[kirby-button],a[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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{--kirby-button-padding-left: 24px;--kirby-button-padding-right: 24px;flex-shrink:0}:host{position:relative}: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{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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:0;border-radius:inherit;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{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:clamp(12px,.875rem,28px);height:40px;min-width:88px;padding:0;margin:4px;outline:none;border:none}: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{--kirby-button-padding-left: 0;--kirby-button-padding-right: 0;width:40px;padding:0;min-width:unset}:host.icon-only .content-layer ::ng-deep>:not(kirby-icon){position:absolute;scale:0}:host.xs{position:relative}:host.xs:after{content:\"\";position:absolute;min-height:32px;min-width:32px;width:100%;height:100%;transform:translate(-50%,-50%);left:50%;top:50%}:host.xs{--kirby-icon-font-size: 16px;font-size:clamp(11px,.75rem,24px);height:max(24px,1rem);min-width:44px}:host.xs:not(.icon-only){--kirby-button-padding-left: 12px;--kirby-button-padding-right: 12px}:host.xs.icon-only{width:max(24px,1rem);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{min-width:44px}:host.sm{--kirby-icon-font-size: 16px;font-size:clamp(11px,.75rem,24px);height:32px;min-width:44px}:host.sm:not(.icon-only){--kirby-button-padding-left: 16px;--kirby-button-padding-right: 16px}:host.sm.icon-only{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{min-width:88px}:host.lg{font-size:clamp(13px,1rem,32px);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,:host[aria-disabled=true]{color:var(--kirby-semi-dark-shade);border-color:transparent;pointer-events:none}:host:disabled:not(.no-decoration),:host[aria-disabled=true]:not(.no-decoration){background-color:var(--kirby-semi-light)}: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(a){text-decoration:none}: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:16px 0}:host-context(kirby-dropdown){justify-content:space-between}:host-context(ion-toolbar ion-buttons.legacy-actions){font-size:clamp(12px,.875rem,28px);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:clamp(13px,1rem,32px);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-page-actions),:host-context(kirby-action-group),:host-context(.kirby-modal ion-header ion-toolbar ion-buttons){margin:0}:host-context(kirby-modal-footer){margin-top:0;margin-bottom:0}:host-context(kirby-modal-footer):first-child{margin-left:0}:host-context(kirby-modal-footer):last-child{margin-right:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { attentionLevel: [{
                 type: Input
             }], noDecoration: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../button/src/button.component.ts","../../button/src/button.component.html","../../button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\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';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit, OnDestroy, OnInit {\n @Input() attentionLevel: AttentionLevel;\n\n @HostBinding('class.no-decoration')\n @Input()\n noDecoration = false;\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 const attentionLevel = this.getAttentionLevelCssClass();\n return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);\n }\n\n private getAttentionLevelCssClass() {\n if (this.noDecoration) return;\n const attentionLevelDefault: AttentionLevel = '1';\n return `attention-level${this.attentionLevel \|\| attentionLevelDefault}`;\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 private disposeEventListeners: EventListenerDisposeFn[] = [];\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngOnInit(): void {\n this.setupEventListenerForAriaDisabledHandling();\n }\n\n setupEventListenerForAriaDisabledHandling() {\n // Prevent event bubbling for aria-disabled buttons using a native event listener.\n // HostListener cannot block event bubbling, see: https://github.com/angular/angular/issues/9587\n ['click', 'keydown.enter', 'keydown.space'].forEach((evt) => {\n const disposeEventListener = this.renderer.listen(\n this.elementRef.nativeElement,\n evt,\n this.blockEventIfAriaDisabled.bind(this),\n { capture: true }\n );\n this.disposeEventListeners.push(disposeEventListener);\n });\n }\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 // Ensure buttons with icon is always shown as icon only inside the toolbar:\n if (this.elementRef.nativeElement.closest('ion-toolbar')) {\n this._showIconOnly = true;\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 private blockEventIfAriaDisabled(event: Event) {\n if (this.elementRef.nativeElement.ariaDisabled === 'true') {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n ngOnDestroy() {\n this.disposeEventListeners.forEach((unlistenEvent) => unlistenEvent());\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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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-button.mjs","sources":["../../button/src/button.component.ts","../../button/src/button.component.html","../../button/src/kirbydesign-designsystem-button.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n ElementRef,\n HostBinding,\n Input,\n OnDestroy,\n OnInit,\n Renderer2,\n} from '@angular/core';\n\nimport { NotificationColor } from '@kirbydesign/core';\nimport { EventListenerDisposeFn } from '@kirbydesign/designsystem/types';\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';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[kirby-button],Button[kirby-button],a[kirby-button]',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ButtonComponent implements AfterContentInit, OnDestroy, OnInit {\n @Input() attentionLevel: AttentionLevel;\n\n @HostBinding('class.no-decoration')\n @Input()\n noDecoration = false;\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 const attentionLevel = this.getAttentionLevelCssClass();\n return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);\n }\n\n private getAttentionLevelCssClass() {\n if (this.noDecoration) return;\n const attentionLevelDefault: AttentionLevel = '1';\n return `attention-level${this.attentionLevel \|\| attentionLevelDefault}`;\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 private disposeEventListeners: EventListenerDisposeFn[] = [];\n\n constructor(\n private elementRef: ElementRef<HTMLElement>,\n private renderer: Renderer2\n ) {}\n\n ngOnInit(): void {\n this.setupEventListenerForAriaDisabledHandling();\n }\n\n setupEventListenerForAriaDisabledHandling() {\n // Prevent event bubbling for aria-disabled buttons using a native event listener.\n // HostListener cannot block event bubbling, see: https://github.com/angular/angular/issues/9587\n ['click', 'keydown.enter', 'keydown.space'].forEach((evt) => {\n const disposeEventListener = this.renderer.listen(\n this.elementRef.nativeElement,\n evt,\n this.blockEventIfAriaDisabled.bind(this),\n { capture: true }\n );\n this.disposeEventListeners.push(disposeEventListener);\n });\n }\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 // Ensure buttons with icon is always shown as icon only inside the toolbar:\n if (this.elementRef.nativeElement.closest('ion-toolbar')) {\n this._showIconOnly = true;\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 private blockEventIfAriaDisabled(event: Event) {\n if (this.elementRef.nativeElement.ariaDisabled === 'true') {\n event.preventDefault();\n event.stopImmediatePropagation();\n }\n }\n\n ngOnDestroy() {\n this.disposeEventListeners.forEach((unlistenEvent) => unlistenEvent());\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/fesm2022/kirbydesign-designsystem-card.mjs CHANGED Viewed

@@ -159,11 +159,11 @@ class CardComponent {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i1.ResizeObserverService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CardComponent, isStandalone: true, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", variant: "variant" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class": "this.variant" } }, 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}: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;--kirby-divider-color: var(--kirby-background-color)}: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-divider-color: var(--kirby-medium);--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{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);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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:0;border-radius:inherit;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[role=button]{outline:none}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CardComponent, isStandalone: true, selector: "kirby-card", inputs: { title: "title", subtitle: "subtitle", backgroundImageUrl: "backgroundImageUrl", hasPadding: "hasPadding", sizes: "sizes", variant: "variant" }, host: { properties: { "style.--kirby-card-background-image": "this._backgroundImage", "class": "this.variant" } }, 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}: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-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}: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-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--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-color-hover: 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{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);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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:0;border-radius:inherit;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[role=button]{outline:none}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--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: "21.2.7", 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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}: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;--kirby-divider-color: var(--kirby-background-color)}: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-divider-color: var(--kirby-medium);--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{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);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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:0;border-radius:inherit;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[role=button]{outline:none}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}: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-color-hover: var(--kirby-semi-dark);--kirby-inputs-elevation: none;--kirby-divider-color: var(--kirby-background-color)}: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-color-hover: var(--kirby-semi-dark);--kirby-divider-color: var(--kirby-medium);--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-color-hover: 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{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);border:var(--kirby-card-border, none);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;width:var(--kirby-card-width, auto)}:host.flat{box-shadow:none}:host.outlined{background-color:transparent;border:var(--kirby-card-border, 1px solid var(--kirby-medium));box-shadow:none}:host.outlined:has(kirby-card-header.flagged){border:none}:host.outlined:has(kirby-card-header.flagged) .content-wrapper{border-block-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-start:var(--kirby-card-border, 1px solid var(--kirby-medium));border-inline-end:var(--kirby-card-border, 1px solid var(--kirby-medium));border-bottom-left-radius:16px;border-bottom-right-radius:16px}:host[role=button]{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative}: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:0;border-radius:inherit;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[role=button]{outline:none}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, 16px);padding-bottom:var(--kirby-card-padding-bottom, 16px);padding-inline:16px}.content-layer{height:100%}:host(.primary):not(.outlined){--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(.secondary):not(.outlined){--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(.tertiary):not(.outlined){--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(.success):not(.outlined){--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(.warning):not(.outlined){--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(.danger):not(.outlined){--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(.white-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(.light):not(.outlined){--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(.medium):not(.outlined){--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(.dark):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(.dark-overlay):not(.outlined){--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.ResizeObserverService }, { type: i0.Renderer2 }], propDecorators: { title: [{
                 type: Input
             }], subtitle: [{

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../card/src/card-footer/card-footer.component.ts","../../card/src/card-footer/card-footer.component.html","../../card/src/card-header/card-header.component.ts","../../card/src/card-header/card-header.component.html","../../card/src/card-as-button/card-as-button.directive.ts","../../card/src/card.component.ts","../../card/src/card.component.html","../../card/src/card.module.ts","../../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 @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n\n @HostBinding('class')\n get _cssClass() {\n return [this.flagged, this.flagged ? 'flagged' : null];\n }\n}\n","@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n","import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n @HostBinding('class.interaction-state-active') _pressed = false;\n\n constructor(private clickableElement: ElementRef) {}\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n if (event.currentTarget !== event.target) return; // Do not handle keydown events for nested elements - let event bubbling take place as normal\n\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 {\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')\n @Input()\n variant: 'elevated' \| 'flat' \| 'outlined' = 'elevated';\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 { 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 imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective, ...imports],\n exports: [...imports, ThemeColorDirective],\n})\nexport class CardModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-card.mjs","sources":["../../card/src/card-footer/card-footer.component.ts","../../card/src/card-footer/card-footer.component.html","../../card/src/card-header/card-header.component.ts","../../card/src/card-header/card-header.component.html","../../card/src/card-as-button/card-as-button.directive.ts","../../card/src/card.component.ts","../../card/src/card.component.html","../../card/src/card.module.ts","../../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 @Input()\n flagged: CardFlagLevel = null;\n @HostBinding('class.has-padding')\n @Input()\n hasPadding: boolean = true;\n\n @HostBinding('class')\n get _cssClass() {\n return [this.flagged, this.flagged ? 'flagged' : null];\n }\n}\n","@if (title) {\n <p class=\"title\" [class.bold]=\"isTitleBold\">{{ title }}</p>\n}\n@if (subtitle) {\n <p class=\"subtitle\">{{ subtitle }}</p>\n}\n<ng-content></ng-content>\n","import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';\n\n@Directive({\n // eslint-disable-next-line @angular-eslint/directive-selector\n selector: 'kirby-card[click]',\n})\nexport class CardAsButtonDirective {\n @HostBinding('attr.role') role: string = 'button';\n @HostBinding('attr.tabindex') tabindex: number = 0;\n @HostBinding('class.interaction-state-active') _pressed = false;\n\n constructor(private clickableElement: ElementRef) {}\n\n @HostListener('keydown.space', ['$event'])\n @HostListener('keydown.enter', ['$event'])\n _onKeydownHandler(event: KeyboardEvent) {\n if (event.currentTarget !== event.target) return; // Do not handle keydown events for nested elements - let event bubbling take place as normal\n\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 {\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')\n @Input()\n variant: 'elevated' \| 'flat' \| 'outlined' = 'elevated';\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 { 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 imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];\n@NgModule({\n imports: [CommonModule, ThemeColorDirective, ...imports],\n exports: [...imports, ThemeColorDirective],\n})\nexport class CardModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -7,6 +7,7 @@ import { ItemComponent, ItemModule } from '@kirbydesign/designsystem/item';
 import { ListItemTemplateDirective, ListModule } from '@kirbydesign/designsystem/list';
 import { HorizontalDirection, PopoverComponent } from '@kirbydesign/designsystem/popover';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
+import { FORM_FIELD_CONTROL } from '@kirbydesign/designsystem/types';
 import * as i2 from '@kirbydesign/designsystem/shared';
 import { forwardAttributes } from '@kirbydesign/designsystem/shared';
 import { IconComponent, IconModule } from '@kirbydesign/designsystem/icon';
@@ -143,6 +144,9 @@ class DropdownComponent {
     get isOpen() {
         return this.state === OpenState.open;
     }
+    get interactiveElement() {
+        return this.buttonElement.nativeElement;
+    }
     forwardAriaLabelToDropdownButton() {
         forwardAttributes(this.elementRef.nativeElement, this._attributesToForward, this.renderer, this.buttonElement.nativeElement);
     }
@@ -559,6 +563,7 @@ class DropdownComponent {
                 useExisting: forwardRef((() => DropdownComponent)),
                 multi: true,
             },
+            { provide: FORM_FIELD_CONTROL, useExisting: forwardRef((() => DropdownComponent)) },
         ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ListItemTemplateDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "slottedItems", predicate: ListItemTemplateDirective, read: ElementRef }, { propertyName: "kirbyItemsSlotted", predicate: ItemComponent, read: ElementRef }], viewQueries: [{ propertyName: "cardElement", first: true, predicate: CardComponent, descendants: true, read: ElementRef }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "buttonElement", first: true, predicate: ButtonComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "kirbyItemsDefault", predicate: ItemComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  kirby-button\n  type=\"button\"\n  [attr.id]=\"_comboboxId\"\n  role=\"combobox\"\n  aria-haspopup=\"listbox\"\n  [attr.aria-controls]=\"_listboxId\"\n  [attr.aria-expanded]=\"isOpen\"\n  [attr.aria-activedescendant]=\"isOpen ? _listboxId + '-item-' + focusedIndex : null\"\n  [attr.aria-invalid]=\"hasError\"\n  [size]=\"size\"\n  [attentionLevel]=\"attentionLevel\"\n  (click)=\"onToggle($event)\"\n  [disabled]=\"disabled\"\n  [tabindex]=\"_tabindex\"\n>\n  <span class=\"text\">{{ selectedText || placeholder }}</span>\n  <kirby-icon [name]=\"isOpen ? 'arrow-up' : 'arrow-down'\"></kirby-icon>\n</button>\n\n<kirby-popover\n  [target]=\"buttonElement\"\n  [popout]=\"popout\"\n  (click)=\"_onPopoverClick()\"\n  (willHide)=\"_onPopoverWillHide()\"\n>\n  <kirby-card role=\"listbox\" [attr.id]=\"_listboxId\" [attr.aria-labelledby]=\"_comboboxId\">\n    @for (item of items; track item; let i = $index) {\n      <ng-container\n        *ngTemplateOutlet=\"\n          itemTemplate || defaultItemTemplate;\n          context: {\n            $implicit: item,\n            selected: i === selectedIndex,\n            focused: i === focusedIndex,\n            index: i,\n          }\n        \"\n      ></ng-container>\n    }\n  </kirby-card>\n</kirby-popover>\n\n<ng-template\n  #defaultItemTemplate\n  let-item\n  let-selected=\"selected\"\n  let-index=\"index\"\n  let-focused=\"focused\"\n>\n  <kirby-item\n    [selectable]=\"true\"\n    [selected]=\"selected\"\n    (click)=\"onItemSelect(index)\"\n    [class.focused]=\"focused\"\n    role=\"option\"\n    [attr.id]=\"_listboxId + '-item-' + index\"\n    [attr.aria-selected]=\"selected\"\n  >\n    <p class=\"kirby-item-title\">{{ getTextFromItem(item) }}</p>\n    @if (selected) {\n      <kirby-icon name=\"checkmark-selected\" slot=\"end\"></kirby-icon>\n    }\n  </kirby-item>\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}@media(hover:hover)and (pointer:fine){:host{outline:none;border-radius:999px}:host:focus{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{display:inline-block;position:relative;max-width:calc(100vw - 32px)}:host.clicked{box-shadow:none}:host.expand{display:block}:host.expand kirby-card{width:100%;min-width:initial;max-width:initial}:host.error>button,:host.ng-touched.ng-invalid>button{outline-color:var(--kirby-danger)}:host>button{position:relative;margin:0;width:100%;min-width:0;outline:1px solid transparent}:host>button .text{overflow:hidden;text-overflow:ellipsis}:host.is-open>button{box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26}kirby-popover{--max-height: 352px}kirby-card{max-height:352px;overflow-y:auto;box-shadow:0 0 5px #1c1c1c0a,0 10px 15px -10px #1c1c1c26;max-width:calc(100vw - 32px);min-width:288px}@media(min-width:321px){kirby-card{min-width:343px}}@media(hover:hover){:host-context(kirby-calendar)>button:hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer}}:host-context(kirby-calendar)>button:active,:host-context(kirby-calendar)>button.interaction-state-active{--state-layer-opacity: .16;--state-layer-background-color: var(--kirby-black)}:host-context(kirby-calendar)>button{border-color:transparent;font-weight:700;font-size:initial}:host-context(kirby-calendar).is-open>button{box-shadow:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kirby-button],Button[kirby-button],a[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "kirby-popover", inputs: ["popout", "target"], outputs: ["willHide"] }, { kind: "component", type: CardComponent, selector: "kirby-card", inputs: ["title", "subtitle", "backgroundImageUrl", "hasPadding", "sizes", "variant"] }, { kind: "component", type: ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "href", "rotateIcon"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DropdownComponent, decorators: [{
@@ -569,6 +574,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                             useExisting: forwardRef((() => DropdownComponent)),
                             multi: true,
                         },
+                        { provide: FORM_FIELD_CONTROL, useExisting: forwardRef((() => DropdownComponent)) },
                     ], imports: [
                         ButtonComponent,
                         NgTemplateOutlet,