@kirbydesign/designsystem 11.11.3 → 12.0.0-dev-67d5287

package/fesm2022/kirbydesign-designsystem-card.mjs

@@ -1,206 +1,440 @@
-import * as i0 from '@angular/core';
-import { HostBinding, Input, ChangeDetectionStrategy, Component, HostListener, Directive, NgModule } from '@angular/core';
-import * as i1 from '@kirbydesign/designsystem/shared';
-import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
-import { CommonModule } from '@angular/common';
-
-class CardFooterComponent {
-    constructor() {
-        this.hasPadding = true;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", type: CardFooterComponent, isStandalone: true, selector: "kirby-card-footer", inputs: { hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding" } }, ngImport: i0, template: "<footer>\n  <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:var(--kirby-spacing-s);padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:var(--kirby-spacing-s)}footer{display:inherit;flex:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardFooterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-card-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer>\n  <ng-content></ng-content>\n</footer>\n", styles: [":host{display:block;padding:var(--kirby-spacing-s);padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:var(--kirby-spacing-s)}footer{display:inherit;flex:inherit}\n"] }]
-        }], propDecorators: { hasPadding: [{
-                type: HostBinding,
-                args: ['class.has-padding']
-            }, {
-                type: Input
-            }] } });
-
-class CardHeaderComponent {
-    constructor() {
-        this.flagged = null;
-        this.hasPadding = true;
-    }
-    get _cssClass() {
-        return [this.flagged, this.flagged ? 'flagged' : null];
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: CardHeaderComponent, isStandalone: true, selector: "kirby-card-header", inputs: { title: "title", subtitle: "subtitle", isTitleBold: "isTitleBold", flagged: "flagged", hasPadding: "hasPadding" }, host: { properties: { "class.has-padding": "this.hasPadding", "class": "this._cssClass" } }, ngImport: i0, template: "@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", styles: [":host{display:block;border-top-left-radius:var(--kirby-border-radius-n);border-top-right-radius:var(--kirby-border-radius-n);text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color);line-height:normal}:host.has-padding{padding:var(--kirby-internal-card-header-padding, var(--kirby-spacing-s))}:host.success{--kirby-card-header-background-color: var(--kirby-success-tint)}:host.warning{--kirby-card-header-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-card-header-background-color: var(--kirby-danger-tint)}:host.info{--kirby-card-header-background-color: var(--kirby-semi-light)}:host{--kirby-card-header-color: var(--kirby-black)}.title{margin-bottom:var(--kirby-internal-card-header-margin-bottom, var(--kirby-spacing-s));line-height:var(--kirby-internal-card-header-line-height)}.title.bold{font-weight:var(--kirby-font-weight-bold)}.subtitle{font-size:var(--kirby-font-size-s);margin-bottom:0}:host:has(.subtitle) .title{margin-top:var(--kirby-spacing-xxxs)}:host(.flagged){--kirby-internal-card-header-padding: var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs)}:host(.flagged) p{--kirby-internal-card-header-line-height: var(--kirby-line-height-n);--kirby-internal-card-header-margin-bottom: 0px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "@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", styles: [":host{display:block;border-top-left-radius:var(--kirby-border-radius-n);border-top-right-radius:var(--kirby-border-radius-n);text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color);line-height:normal}:host.has-padding{padding:var(--kirby-internal-card-header-padding, var(--kirby-spacing-s))}:host.success{--kirby-card-header-background-color: var(--kirby-success-tint)}:host.warning{--kirby-card-header-background-color: var(--kirby-warning-tint)}:host.danger{--kirby-card-header-background-color: var(--kirby-danger-tint)}:host.info{--kirby-card-header-background-color: var(--kirby-semi-light)}:host{--kirby-card-header-color: var(--kirby-black)}.title{margin-bottom:var(--kirby-internal-card-header-margin-bottom, var(--kirby-spacing-s));line-height:var(--kirby-internal-card-header-line-height)}.title.bold{font-weight:var(--kirby-font-weight-bold)}.subtitle{font-size:var(--kirby-font-size-s);margin-bottom:0}:host:has(.subtitle) .title{margin-top:var(--kirby-spacing-xxxs)}:host(.flagged){--kirby-internal-card-header-padding: var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs)}:host(.flagged) p{--kirby-internal-card-header-line-height: var(--kirby-line-height-n);--kirby-internal-card-header-margin-bottom: 0px}\n"] }]
-        }], propDecorators: { title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], isTitleBold: [{
-                type: Input
-            }], flagged: [{
-                type: Input
-            }], hasPadding: [{
-                type: HostBinding,
-                args: ['class.has-padding']
-            }, {
-                type: Input
-            }], _cssClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class CardAsButtonDirective {
-    constructor(clickableElement) {
-        this.clickableElement = clickableElement;
-        this.role = 'button';
-        this.tabindex = 0;
-        this._pressed = false;
-    }
-    _onKeydownHandler(event) {
-        if (event.currentTarget !== event.target)
-            return; // Do not handle keydown events for nested elements - let event bubbling take place as normal
-        this._pressed = true;
-        this.clickableElement.nativeElement.click(event);
-        /*
-         * Prevent default event from firing so the UA wont
-         * catch this event and e.g. scroll the page on space,
-         * which is the default behavior in major browsers
-         */
-        event.preventDefault();
-    }
-    _onInactiveHandler() {
-        this._pressed = false;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardAsButtonDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.23", type: CardAsButtonDirective, isStandalone: true, selector: "kirby-card[click]", host: { listeners: { "keydown.space": "_onKeydownHandler($event)", "keydown.enter": "_onKeydownHandler($event)", "keyup.space": "_onInactiveHandler()", "keyup.enter": "_onInactiveHandler()", "blur": "_onInactiveHandler()" }, properties: { "attr.role": "this.role", "attr.tabindex": "this.tabindex", "class.interaction-state-active": "this._pressed" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardAsButtonDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kirby-card[click]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], tabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], _pressed: [{
-                type: HostBinding,
-                args: ['class.interaction-state-active']
-            }], _onKeydownHandler: [{
-                type: HostListener,
-                args: ['keydown.space', ['$event']]
-            }, {
-                type: HostListener,
-                args: ['keydown.enter', ['$event']]
-            }], _onInactiveHandler: [{
-                type: HostListener,
-                args: ['keyup.space']
-            }, {
-                type: HostListener,
-                args: ['keyup.enter']
-            }, {
-                type: HostListener,
-                args: ['blur']
-            }] } });
-
-class CardComponent {
-    set backgroundImageUrl(value) {
-        this._backgroundImage = `url('${value}')`;
-    }
-    set sizes(value) {
-        if (typeof value === 'string') {
-            console.error('Sizes property cannot be a string. Please ensure the size property is bound as an expression:\n[sizes]="{...}"');
-        }
-        this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);
-    }
-    constructor(elementRef, resizeObserverService, renderer) {
-        this.elementRef = elementRef;
-        this.resizeObserverService = resizeObserverService;
-        this.renderer = renderer;
-        this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint({
-            small: 360,
-            medium: 720,
-            large: 1024,
-        });
-        this.variant = 'elevated';
-    }
-    ngOnInit() {
-        this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));
-    }
-    ngOnDestroy() {
-        this.resizeObserverService.unobserve(this.elementRef);
-    }
-    sortSizesByBreakpoint(sizes) {
-        return Object.entries(sizes).sort(this.compareSizesByBreakpoint);
-    }
-    compareSizesByBreakpoint(a, b) {
-        return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;
-    }
-    handleResize(entry) {
-        const sizeAttributeName = 'size';
-        const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];
-        const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];
-        if (entry.contentRect.width < smallestBreakpointWidth) {
-            this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);
-        }
-        else {
-            this.sizesSortedByBreakpoint.forEach(([size, width]) => {
-                if (entry.contentRect.width >= width) {
-                    this.renderer.setAttribute(entry.target, sizeAttributeName, size);
-                }
-            });
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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.23", 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:var(--kirby-border-radius-n);box-shadow:var(--kirby-elevation-2);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:var(--kirby-z-index-default);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:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}: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, var(--kirby-z-index-default))}:host[role=button] .state-layer{position:absolute;inset:-0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:calc(var(--kirby-z-index-default) + 1)}: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)}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}:host[role=button]{outline:none}.content-wrapper ::ng-deep>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: var(--kirby-border-radius-n)}.content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: var(--kirby-border-radius-n)}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, var(--kirby-spacing-s));padding-bottom:var(--kirby-card-padding-bottom, var(--kirby-spacing-s));padding-inline:var(--kirby-spacing-s)}:host:has(kirby-card-header) .content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: 0}:host:has(kirby-card-footer) .content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: 0}.content-layer{height:100%}:host(:not(.outlined)).primary{--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(:not(.outlined)).secondary{--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(:not(.outlined)).tertiary{--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(:not(.outlined)).success{--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(:not(.outlined)).warning{--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(:not(.outlined)).danger{--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(:not(.outlined)).white-overlay{--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(:not(.outlined)).light{--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(:not(.outlined)).medium{--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(:not(.outlined)).dark{--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(:not(.outlined)).dark-overlay{--kirby-card-main-background-color: var(--kirby-dark-overlay);--kirby-card-main-color: var(--kirby-dark-overlay-contrast)}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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-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:var(--kirby-border-radius-n);box-shadow:var(--kirby-elevation-2);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:var(--kirby-z-index-default);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:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}: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, var(--kirby-z-index-default))}:host[role=button] .state-layer{position:absolute;inset:-0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:calc(var(--kirby-z-index-default) + 1)}: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)}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}:host[role=button]{outline:none}.content-wrapper ::ng-deep>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: var(--kirby-border-radius-n)}.content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: var(--kirby-border-radius-n)}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, var(--kirby-spacing-s));padding-bottom:var(--kirby-card-padding-bottom, var(--kirby-spacing-s));padding-inline:var(--kirby-spacing-s)}:host:has(kirby-card-header) .content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: 0}:host:has(kirby-card-footer) .content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: 0}.content-layer{height:100%}:host(:not(.outlined)).primary{--kirby-card-main-background-color: var(--kirby-primary);--kirby-card-main-color: var(--kirby-primary-contrast)}:host(:not(.outlined)).secondary{--kirby-card-main-background-color: var(--kirby-secondary);--kirby-card-main-color: var(--kirby-secondary-contrast)}:host(:not(.outlined)).tertiary{--kirby-card-main-background-color: var(--kirby-tertiary);--kirby-card-main-color: var(--kirby-tertiary-contrast)}:host(:not(.outlined)).success{--kirby-card-main-background-color: var(--kirby-success);--kirby-card-main-color: var(--kirby-success-contrast)}:host(:not(.outlined)).warning{--kirby-card-main-background-color: var(--kirby-warning);--kirby-card-main-color: var(--kirby-warning-contrast)}:host(:not(.outlined)).danger{--kirby-card-main-background-color: var(--kirby-danger);--kirby-card-main-color: var(--kirby-danger-contrast)}:host(:not(.outlined)).white-overlay{--kirby-card-main-background-color: var(--kirby-white-overlay);--kirby-card-main-color: var(--kirby-white-overlay-contrast)}:host(:not(.outlined)).light{--kirby-card-main-background-color: var(--kirby-light);--kirby-card-main-color: var(--kirby-light-contrast)}:host(:not(.outlined)).medium{--kirby-card-main-background-color: var(--kirby-medium);--kirby-card-main-color: var(--kirby-medium-contrast)}:host(:not(.outlined)).dark{--kirby-card-main-background-color: var(--kirby-dark);--kirby-card-main-color: var(--kirby-dark-contrast)}:host(:not(.outlined)).dark-overlay{--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: [{
-                type: Input
-            }], _backgroundImage: [{
-                type: HostBinding,
-                args: ['style.--kirby-card-background-image']
-            }], backgroundImageUrl: [{
-                type: Input
-            }], hasPadding: [{
-                type: Input
-            }], sizes: [{
-                type: Input
-            }], variant: [{
-                type: HostBinding,
-                args: ['class']
-            }, {
-                type: Input
-            }] } });
-
-const imports = [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective];
-class CardModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", ngImport: i0, type: CardModule, imports: [CommonModule, ThemeColorDirective, CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective], exports: [CardComponent, CardFooterComponent, CardHeaderComponent, CardAsButtonDirective, ThemeColorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: CardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, ThemeColorDirective, ...imports],
-                    exports: [...imports, ThemeColorDirective],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, HostBinding, HostListener, Input, NgModule, inject } from "@angular/core";
+import * as i1 from "@kirbydesign/designsystem/shared";
+import { ThemeColorDirective } from "@kirbydesign/designsystem/shared";
+import { CommonModule } from "@angular/common";
+var CardFooterComponent = class CardFooterComponent {
+	constructor() {
+		this.hasPadding = true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CardFooterComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: CardFooterComponent,
+			isStandalone: true,
+			selector: "kirby-card-footer",
+			inputs: { hasPadding: "hasPadding" },
+			host: { properties: { "class.has-padding": "this.hasPadding" } },
+			ngImport: i0,
+			template: "<footer>\n  <ng-content></ng-content>\n</footer>\n",
+			styles: [":host{display:block;padding:var(--kirby-spacing-s);padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:var(--kirby-spacing-s)}footer{display:inherit;flex:inherit}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CardFooterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-card-footer",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<footer>\n  <ng-content></ng-content>\n</footer>\n",
+			styles: [":host{display:block;padding:var(--kirby-spacing-s);padding:0;border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden;backface-visibility:hidden;transform:translateZ(0)}:host.has-padding{padding:var(--kirby-spacing-s)}footer{display:inherit;flex:inherit}\n"]
+		}]
+	}],
+	propDecorators: { hasPadding: [{
+		type: HostBinding,
+		args: ["class.has-padding"]
+	}, { type: Input }] }
+});
+var CardHeaderComponent = class CardHeaderComponent {
+	constructor() {
+		this.flagged = null;
+		this.hasPadding = true;
+	}
+	get _cssClass() {
+		return [this.flagged, this.flagged ? "flagged" : null];
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CardHeaderComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: CardHeaderComponent,
+			isStandalone: true,
+			selector: "kirby-card-header",
+			inputs: {
+				title: "title",
+				subtitle: "subtitle",
+				isTitleBold: "isTitleBold",
+				flagged: "flagged",
+				hasPadding: "hasPadding"
+			},
+			host: { properties: {
+				"class.has-padding": "this.hasPadding",
+				"class": "this._cssClass"
+			} },
+			ngImport: i0,
+			template: "@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",
+			styles: [":host{display:block;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color);line-height:normal}:host.has-padding{padding:var(--kirby-internal-card-header-padding, var(--kirby-spacing-s))}:host.success{--kirby-card-header-background-color: var(--kirby-color-fill-success-quiet);--kirby-card-header-color: var(--kirby-color-content-success-quiet)}:host.warning{--kirby-card-header-background-color: var(--kirby-color-fill-warning-quiet);--kirby-card-header-color: var(--kirby-color-content-warning-quiet)}:host.danger{--kirby-card-header-background-color: var(--kirby-color-fill-danger-quiet);--kirby-card-header-color: var(--kirby-color-content-danger-quiet)}:host.info{--kirby-card-header-background-color: var(--kirby-color-fill-neutral);--kirby-card-header-color: var(--kirby-color-content-neutral)}.title{margin-bottom:var(--kirby-internal-card-header-margin-bottom, var(--kirby-spacing-s));line-height:var(--kirby-internal-card-header-line-height)}.title.bold{font-weight:var(--kirby-font-weight-bold)}.subtitle{font-size:var(--kirby-font-size-s);margin-bottom:0}:host:has(.subtitle) .title{margin-top:var(--kirby-spacing-xxxs)}:host(.flagged){--kirby-internal-card-header-padding: var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs)}:host(.flagged) p{--kirby-internal-card-header-line-height: var(--kirby-line-height-n);--kirby-internal-card-header-margin-bottom: 0px}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CardHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-card-header",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@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",
+			styles: [":host{display:block;text-align:center;padding:0;color:var(--kirby-card-header-color);background-color:var(--kirby-card-header-background-color);line-height:normal}:host.has-padding{padding:var(--kirby-internal-card-header-padding, var(--kirby-spacing-s))}:host.success{--kirby-card-header-background-color: var(--kirby-color-fill-success-quiet);--kirby-card-header-color: var(--kirby-color-content-success-quiet)}:host.warning{--kirby-card-header-background-color: var(--kirby-color-fill-warning-quiet);--kirby-card-header-color: var(--kirby-color-content-warning-quiet)}:host.danger{--kirby-card-header-background-color: var(--kirby-color-fill-danger-quiet);--kirby-card-header-color: var(--kirby-color-content-danger-quiet)}:host.info{--kirby-card-header-background-color: var(--kirby-color-fill-neutral);--kirby-card-header-color: var(--kirby-color-content-neutral)}.title{margin-bottom:var(--kirby-internal-card-header-margin-bottom, var(--kirby-spacing-s));line-height:var(--kirby-internal-card-header-line-height)}.title.bold{font-weight:var(--kirby-font-weight-bold)}.subtitle{font-size:var(--kirby-font-size-s);margin-bottom:0}:host:has(.subtitle) .title{margin-top:var(--kirby-spacing-xxxs)}:host(.flagged){--kirby-internal-card-header-padding: var(--kirby-spacing-xxxxs) var(--kirby-spacing-xxs)}:host(.flagged) p{--kirby-internal-card-header-line-height: var(--kirby-line-height-n);--kirby-internal-card-header-margin-bottom: 0px}\n"]
+		}]
+	}],
+	propDecorators: {
+		title: [{ type: Input }],
+		subtitle: [{ type: Input }],
+		isTitleBold: [{ type: Input }],
+		flagged: [{ type: Input }],
+		hasPadding: [{
+			type: HostBinding,
+			args: ["class.has-padding"]
+		}, { type: Input }],
+		_cssClass: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
+var CardAsButtonDirective = class CardAsButtonDirective {
+	constructor(clickableElement) {
+		this.clickableElement = clickableElement;
+		this.role = "button";
+		this.tabindex = 0;
+		this._pressed = false;
+	}
+	_onKeydownHandler(event) {
+		if (event.currentTarget !== event.target) return;
+		this._pressed = true;
+		this.clickableElement.nativeElement.click(event);
+		event.preventDefault();
+	}
+	_onInactiveHandler() {
+		this._pressed = false;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CardAsButtonDirective,
+			deps: [{ token: i0.ElementRef }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: CardAsButtonDirective,
+			isStandalone: true,
+			selector: "kirby-card[click]",
+			host: {
+				listeners: {
+					"keydown.space": "_onKeydownHandler($event)",
+					"keydown.enter": "_onKeydownHandler($event)",
+					"keyup.space": "_onInactiveHandler()",
+					"keyup.enter": "_onInactiveHandler()",
+					"blur": "_onInactiveHandler()"
+				},
+				properties: {
+					"attr.role": "this.role",
+					"attr.tabindex": "this.tabindex",
+					"class.interaction-state-active": "this._pressed"
+				}
+			},
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CardAsButtonDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "kirby-card[click]" }]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }],
+	propDecorators: {
+		role: [{
+			type: HostBinding,
+			args: ["attr.role"]
+		}],
+		tabindex: [{
+			type: HostBinding,
+			args: ["attr.tabindex"]
+		}],
+		_pressed: [{
+			type: HostBinding,
+			args: ["class.interaction-state-active"]
+		}],
+		_onKeydownHandler: [{
+			type: HostListener,
+			args: ["keydown.space", ["$event"]]
+		}, {
+			type: HostListener,
+			args: ["keydown.enter", ["$event"]]
+		}],
+		_onInactiveHandler: [
+			{
+				type: HostListener,
+				args: ["keyup.space"]
+			},
+			{
+				type: HostListener,
+				args: ["keyup.enter"]
+			},
+			{
+				type: HostListener,
+				args: ["blur"]
+			}
+		]
+	}
+});
+const variantSurfaces = {
+	elevated: "raised",
+	flat: "raised",
+	outlined: "base",
+	base: "base",
+	raised: "raised",
+	brand: "brand"
+};
+var CardComponent = class CardComponent {
+	set backgroundImageUrl(value) {
+		this._backgroundImage = `url('${value}')`;
+	}
+	set sizes(value) {
+		if (typeof value === "string") console.error("Sizes property cannot be a string. Please ensure the size property is bound as an expression:\n[sizes]=\"{...}\"");
+		this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint(value);
+	}
+	get hostClasses() {
+		const surface = this.surface;
+		return surface ? `${this.variant} kirby-surface-${surface}` : this.variant;
+	}
+	get surface() {
+		const theme = this.themeColor;
+		if (!theme || theme.isDefault) return variantSurfaces[this.variant];
+		if (theme.isLight) return "base";
+		if (theme.isWhite) return "raised";
+		if (theme.isPrimary || theme.isSecondary || theme.isTertiary || theme.isDark) return "brand";
+		return null;
+	}
+	constructor(elementRef, resizeObserverService, renderer) {
+		this.elementRef = elementRef;
+		this.resizeObserverService = resizeObserverService;
+		this.renderer = renderer;
+		this.themeColor = inject(ThemeColorDirective, {
+			optional: true,
+			self: true
+		});
+		this.sizesSortedByBreakpoint = this.sortSizesByBreakpoint({
+			small: 360,
+			medium: 720,
+			large: 1024
+		});
+		this.variant = "raised";
+	}
+	ngOnInit() {
+		this.resizeObserverService.observe(this.elementRef, (entry) => this.handleResize(entry));
+	}
+	ngOnDestroy() {
+		this.resizeObserverService.unobserve(this.elementRef);
+	}
+	sortSizesByBreakpoint(sizes) {
+		return Object.entries(sizes).sort(this.compareSizesByBreakpoint);
+	}
+	compareSizesByBreakpoint(a, b) {
+		return a[1] > b[1] ? 1 : b[1] > a[1] ? -1 : 0;
+	}
+	handleResize(entry) {
+		const sizeAttributeName = "size";
+		const smallestBreakpointName = this.sizesSortedByBreakpoint[0][0];
+		const smallestBreakpointWidth = this.sizesSortedByBreakpoint[0][1];
+		if (entry.contentRect.width < smallestBreakpointWidth) this.renderer.setAttribute(entry.target, sizeAttributeName, `<${smallestBreakpointName}`);
+		else this.sizesSortedByBreakpoint.forEach(([size, width]) => {
+			if (entry.contentRect.width >= width) this.renderer.setAttribute(entry.target, sizeAttributeName, size);
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CardComponent,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: i1.ResizeObserverService },
+				{ token: i0.Renderer2 }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "16.1.0",
+			version: "22.2.2",
+			type: CardComponent,
+			isStandalone: true,
+			selector: "kirby-card",
+			inputs: {
+				title: "title",
+				subtitle: "subtitle",
+				backgroundImageUrl: "backgroundImageUrl",
+				hasPadding: "hasPadding",
+				sizes: "sizes",
+				variant: [
+					"variant",
+					"variant",
+					(value) => value ?? "raised"
+				]
+			},
+			host: { properties: {
+				"style.--kirby-card-background-image": "this._backgroundImage",
+				"class": "this.hostClasses"
+			} },
+			ngImport: i0,
+			template: "<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",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{--kirby-card-main-background-color: var(--kirby-color-fill-base);--kirby-card-main-color: var(--kirby-color-content-base);--kirby-card-main-border-color: var(--kirby-color-border-base-quiet);--kirby-card-border-width: 1px;--kirby-card-footer-background-color: var(--kirby-color-fill-base);--kirby-card-footer-color: var(--kirby-color-content-base);--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}:host{border-radius:var(--kirby-border-radius-n);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, var(--kirby-card-border-width) solid var(--kirby-card-main-border-color));box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:var(--kirby-z-index-default);width:var(--kirby-card-width, auto)}:host.outlined{--kirby-card-main-background-color: transparent}: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, var(--kirby-card-border-width) solid var(--kirby-card-main-border-color));border-inline-start:var(--kirby-card-border, var(--kirby-card-border-width) solid var(--kirby-card-main-border-color));border-inline-end:var(--kirby-card-border, var(--kirby-card-border-width) solid var(--kirby-card-main-border-color));border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}:host[role=button]{cursor:pointer;outline:none}@media(hover:hover){:host[role=button]:hover{--kirby-card-main-background-color: var(--kirby-color-fill-base-hover);--kirby-card-main-color: var(--kirby-color-content-base-hover);--kirby-card-main-border-color: var(--kirby-color-border-base-quiet-hover)}}:host[role=button]:active,:host[role=button].interaction-state-active{--kirby-card-main-background-color: var(--kirby-color-fill-base-active);--kirby-card-main-color: var(--kirby-color-content-base-active);--kirby-card-main-border-color: var(--kirby-color-border-base-quiet-active)}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-combined-inset);--kirby-card-border: var(--kirby-card-border-width) solid var(--kirby-color-border-focus)}.content-wrapper ::ng-deep>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: calc( var(--kirby-border-radius-n) - var(--kirby-card-border-width) )}.content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: calc( var(--kirby-border-radius-n) - var(--kirby-card-border-width) )}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, var(--kirby-spacing-s));padding-bottom:var(--kirby-card-padding-bottom, var(--kirby-spacing-s));padding-inline:var(--kirby-spacing-s)}:host:has(kirby-card-header) .content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: 0}:host:has(kirby-card-footer) .content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: 0}:host(.success:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-success);--kirby-card-main-color: var(--kirby-color-content-success);--kirby-card-main-border-color: var(--kirby-color-border-success)}@media(hover:hover){:host(.success:not(.outlined))[role=button]:hover{--kirby-card-main-background-color: var(--kirby-color-fill-success-hover);--kirby-card-main-color: var(--kirby-color-content-success-hover);--kirby-card-main-border-color: var(--kirby-color-border-success-hover)}}:host(.success:not(.outlined))[role=button]:active,:host(.success:not(.outlined))[role=button].interaction-state-active{--kirby-card-main-background-color: var(--kirby-color-fill-success-active);--kirby-card-main-color: var(--kirby-color-content-success-active);--kirby-card-main-border-color: var(--kirby-color-border-success-active)}:host(.warning:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-warning);--kirby-card-main-color: var(--kirby-color-content-warning);--kirby-card-main-border-color: var(--kirby-color-border-warning)}@media(hover:hover){:host(.warning:not(.outlined))[role=button]:hover{--kirby-card-main-background-color: var(--kirby-color-fill-warning-hover);--kirby-card-main-color: var(--kirby-color-content-warning-hover);--kirby-card-main-border-color: var(--kirby-color-border-warning-hover)}}:host(.warning:not(.outlined))[role=button]:active,:host(.warning:not(.outlined))[role=button].interaction-state-active{--kirby-card-main-background-color: var(--kirby-color-fill-warning-active);--kirby-card-main-color: var(--kirby-color-content-warning-active);--kirby-card-main-border-color: var(--kirby-color-border-warning-active)}:host(.danger:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-danger);--kirby-card-main-color: var(--kirby-color-content-danger);--kirby-card-main-border-color: var(--kirby-color-border-danger)}@media(hover:hover){:host(.danger:not(.outlined))[role=button]:hover{--kirby-card-main-background-color: var(--kirby-color-fill-danger-hover);--kirby-card-main-color: var(--kirby-color-content-danger-hover);--kirby-card-main-border-color: var(--kirby-color-border-danger-hover)}}:host(.danger:not(.outlined))[role=button]:active,:host(.danger:not(.outlined))[role=button].interaction-state-active{--kirby-card-main-background-color: var(--kirby-color-fill-danger-active);--kirby-card-main-color: var(--kirby-color-content-danger-active);--kirby-card-main-border-color: var(--kirby-color-border-danger-active)}:host(.medium:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-neutral);--kirby-card-main-color: var(--kirby-color-content-neutral);--kirby-card-main-border-color: var(--kirby-color-border-neutral)}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-card",
+			changeDetection: ChangeDetectionStrategy.Eager,
+			template: "<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",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}ion-item-option.success{background-color:var(--kirby-color-fill-success);color:var(--kirby-color-content-success)}@media(hover:hover){ion-item-option.success:hover{background-color:var(--kirby-color-fill-success-hover);color:var(--kirby-color-content-success-hover)}}ion-item-option.success:active{background-color:var(--kirby-color-fill-success-active);color:var(--kirby-color-content-success-active)}ion-item-option.warning{background-color:var(--kirby-color-fill-warning);color:var(--kirby-color-content-warning)}@media(hover:hover){ion-item-option.warning:hover{background-color:var(--kirby-color-fill-warning-hover);color:var(--kirby-color-content-warning-hover)}}ion-item-option.warning:active{background-color:var(--kirby-color-fill-warning-active);color:var(--kirby-color-content-warning-active)}ion-item-option.danger{background-color:var(--kirby-color-fill-danger);color:var(--kirby-color-content-danger)}@media(hover:hover){ion-item-option.danger:hover{background-color:var(--kirby-color-fill-danger-hover);color:var(--kirby-color-content-danger-hover)}}ion-item-option.danger:active{background-color:var(--kirby-color-fill-danger-active);color:var(--kirby-color-content-danger-active)}:host{--kirby-card-main-background-color: var(--kirby-color-fill-base);--kirby-card-main-color: var(--kirby-color-content-base);--kirby-card-main-border-color: var(--kirby-color-border-base-quiet);--kirby-card-border-width: 1px;--kirby-card-footer-background-color: var(--kirby-color-fill-base);--kirby-card-footer-color: var(--kirby-color-content-base);--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}:host{border-radius:var(--kirby-border-radius-n);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, var(--kirby-card-border-width) solid var(--kirby-card-main-border-color));box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:var(--kirby-z-index-default);width:var(--kirby-card-width, auto)}:host.outlined{--kirby-card-main-background-color: transparent}: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, var(--kirby-card-border-width) solid var(--kirby-card-main-border-color));border-inline-start:var(--kirby-card-border, var(--kirby-card-border-width) solid var(--kirby-card-main-border-color));border-inline-end:var(--kirby-card-border, var(--kirby-card-border-width) solid var(--kirby-card-main-border-color));border-bottom-left-radius:var(--kirby-border-radius-n);border-bottom-right-radius:var(--kirby-border-radius-n)}:host[role=button]{cursor:pointer;outline:none}@media(hover:hover){:host[role=button]:hover{--kirby-card-main-background-color: var(--kirby-color-fill-base-hover);--kirby-card-main-color: var(--kirby-color-content-base-hover);--kirby-card-main-border-color: var(--kirby-color-border-base-quiet-hover)}}:host[role=button]:active,:host[role=button].interaction-state-active{--kirby-card-main-background-color: var(--kirby-color-fill-base-active);--kirby-card-main-color: var(--kirby-color-content-base-active);--kirby-card-main-border-color: var(--kirby-color-border-base-quiet-active)}:host[role=button]:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-focus-ring-md-combined-inset);--kirby-card-border: var(--kirby-card-border-width) solid var(--kirby-color-border-focus)}.content-wrapper ::ng-deep>*{--kirby-content-border-top-radius: 0;--kirby-content-border-bottom-radius: 0}.content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: calc( var(--kirby-border-radius-n) - var(--kirby-card-border-width) )}.content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: calc( var(--kirby-border-radius-n) - var(--kirby-card-border-width) )}.content-wrapper.padding{padding-top:var(--kirby-card-padding-top, var(--kirby-spacing-s));padding-bottom:var(--kirby-card-padding-bottom, var(--kirby-spacing-s));padding-inline:var(--kirby-spacing-s)}:host:has(kirby-card-header) .content-wrapper ::ng-deep>:first-child{--kirby-content-border-top-radius: 0}:host:has(kirby-card-footer) .content-wrapper ::ng-deep>:last-child{--kirby-content-border-bottom-radius: 0}:host(.success:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-success);--kirby-card-main-color: var(--kirby-color-content-success);--kirby-card-main-border-color: var(--kirby-color-border-success)}@media(hover:hover){:host(.success:not(.outlined))[role=button]:hover{--kirby-card-main-background-color: var(--kirby-color-fill-success-hover);--kirby-card-main-color: var(--kirby-color-content-success-hover);--kirby-card-main-border-color: var(--kirby-color-border-success-hover)}}:host(.success:not(.outlined))[role=button]:active,:host(.success:not(.outlined))[role=button].interaction-state-active{--kirby-card-main-background-color: var(--kirby-color-fill-success-active);--kirby-card-main-color: var(--kirby-color-content-success-active);--kirby-card-main-border-color: var(--kirby-color-border-success-active)}:host(.warning:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-warning);--kirby-card-main-color: var(--kirby-color-content-warning);--kirby-card-main-border-color: var(--kirby-color-border-warning)}@media(hover:hover){:host(.warning:not(.outlined))[role=button]:hover{--kirby-card-main-background-color: var(--kirby-color-fill-warning-hover);--kirby-card-main-color: var(--kirby-color-content-warning-hover);--kirby-card-main-border-color: var(--kirby-color-border-warning-hover)}}:host(.warning:not(.outlined))[role=button]:active,:host(.warning:not(.outlined))[role=button].interaction-state-active{--kirby-card-main-background-color: var(--kirby-color-fill-warning-active);--kirby-card-main-color: var(--kirby-color-content-warning-active);--kirby-card-main-border-color: var(--kirby-color-border-warning-active)}:host(.danger:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-danger);--kirby-card-main-color: var(--kirby-color-content-danger);--kirby-card-main-border-color: var(--kirby-color-border-danger)}@media(hover:hover){:host(.danger:not(.outlined))[role=button]:hover{--kirby-card-main-background-color: var(--kirby-color-fill-danger-hover);--kirby-card-main-color: var(--kirby-color-content-danger-hover);--kirby-card-main-border-color: var(--kirby-color-border-danger-hover)}}:host(.danger:not(.outlined))[role=button]:active,:host(.danger:not(.outlined))[role=button].interaction-state-active{--kirby-card-main-background-color: var(--kirby-color-fill-danger-active);--kirby-card-main-color: var(--kirby-color-content-danger-active);--kirby-card-main-border-color: var(--kirby-color-border-danger-active)}:host(.medium:not(.outlined)){--kirby-card-main-background-color: var(--kirby-color-fill-neutral);--kirby-card-main-color: var(--kirby-color-content-neutral);--kirby-card-main-border-color: var(--kirby-color-border-neutral)}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i1.ResizeObserverService },
+		{ type: i0.Renderer2 }
+	],
+	propDecorators: {
+		title: [{ type: Input }],
+		subtitle: [{ type: Input }],
+		_backgroundImage: [{
+			type: HostBinding,
+			args: ["style.--kirby-card-background-image"]
+		}],
+		backgroundImageUrl: [{ type: Input }],
+		hasPadding: [{ type: Input }],
+		sizes: [{ type: Input }],
+		variant: [{
+			type: Input,
+			args: [{ transform: (value) => value ?? "raised" }]
+		}],
+		hostClasses: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
+const imports = [
+	CardComponent,
+	CardFooterComponent,
+	CardHeaderComponent,
+	CardAsButtonDirective
+];
+var CardModule = class CardModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CardModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CardModule,
+			imports: [
+				CommonModule,
+				ThemeColorDirective,
+				CardComponent,
+				CardFooterComponent,
+				CardHeaderComponent,
+				CardAsButtonDirective
+			],
+			exports: [
+				CardComponent,
+				CardFooterComponent,
+				CardHeaderComponent,
+				CardAsButtonDirective,
+				ThemeColorDirective
+			]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: CardModule,
+			imports: [CommonModule]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CardModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				ThemeColorDirective,
+				...imports
+			],
+			exports: [...imports, ThemeColorDirective]
+		}]
+	}]
+});
 export { CardAsButtonDirective, CardComponent, CardFooterComponent, CardHeaderComponent, CardModule };
-//# sourceMappingURL=kirbydesign-designsystem-card.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-card.mjs.map