@kirbydesign/designsystem 10.0.0-rc.0 → 10.0.0

package/README.md

@@ -0,0 +1,7 @@
+# designsystem
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test designsystem` to execute the unit tests.

package/accordion/accordion-item.component.d.ts

@@ -5,6 +5,7 @@ export declare class AccordionItemComponent implements OnChanges {
     isExpanded: boolean;
     isDisabled: boolean;
     disabledTitle: string;
+    hasPadding: boolean;
     toggle: EventEmitter<boolean>;
     ngOnChanges(): void;
     getTitle(): string;
@@ -12,5 +13,5 @@ export declare class AccordionItemComponent implements OnChanges {
     _titleId: string;
     _contentId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "kirby-accordion-item", never, { "title": { "alias": "title"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "disabledTitle": { "alias": "disabledTitle"; "required": false; }; }, { "toggle": "toggle"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "kirby-accordion-item", never, { "title": { "alias": "title"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "disabledTitle": { "alias": "disabledTitle"; "required": false; }; "hasPadding": { "alias": "hasPadding"; "required": false; }; }, { "toggle": "toggle"; }, never, ["*"], false, never>;
 }

package/avatar/avatar.component.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '@angular/core';
 import { BrandColor, NotificationColor } from '@kirbydesign/core';
 import * as i0 from "@angular/core";
 export declare enum AvatarSize {
@@ -14,7 +15,9 @@ export declare class AvatarComponent {
     overlay: boolean;
     size: AvatarSize | `${AvatarSize}`;
     themeColor: NotificationColor | BrandColor | 'medium' | 'white' | 'dark' | 'light' | 'semi-light';
+    imageError: EventEmitter<ErrorEvent>;
     get _cssClass(): ("xs" | "sm" | "md" | "lg" | AvatarSize | "success" | "warning" | "danger" | "primary" | "secondary" | "tertiary" | "medium" | "white" | "dark" | "light" | "semi-light")[];
+    onImageError($event: ErrorEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "kirby-avatar", never, { "imageSrc": { "alias": "imageSrc"; "required": false; }; "altText": { "alias": "altText"; "required": false; }; "stroke": { "alias": "stroke"; "required": false; }; "text": { "alias": "text"; "required": false; }; "overlay": { "alias": "overlay"; "required": false; }; "size": { "alias": "size"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; }, {}, never, ["kirby-icon", "kirby-badge"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "kirby-avatar", never, { "imageSrc": { "alias": "imageSrc"; "required": false; }; "altText": { "alias": "altText"; "required": false; }; "stroke": { "alias": "stroke"; "required": false; }; "text": { "alias": "text"; "required": false; }; "overlay": { "alias": "overlay"; "required": false; }; "size": { "alias": "size"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; }, { "imageError": "imageError"; }, never, ["kirby-icon", "kirby-badge"], true, never>;
 }

package/button/button.component.d.ts

@@ -33,5 +33,5 @@ export declare class ButtonComponent implements AfterContentInit {
     private wrapTextNode;
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kirby-button],Button[kirby-button]", never, { "attentionLevel": { "alias": "attentionLevel"; "required": false; }; "noDecoration": { "alias": "noDecoration"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "expand": { "alias": "expand"; "required": false; }; "isFloating": { "alias": "isFloating"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showIconOnly": { "alias": "showIconOnly"; "required": false; }; }, {}, ["iconElementRef"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "button[kirby-button],Button[kirby-button],a[kirby-button]", never, { "attentionLevel": { "alias": "attentionLevel"; "required": false; }; "noDecoration": { "alias": "noDecoration"; "required": false; }; "themeColor": { "alias": "themeColor"; "required": false; }; "expand": { "alias": "expand"; "required": false; }; "isFloating": { "alias": "isFloating"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showIconOnly": { "alias": "showIconOnly"; "required": false; }; }, {}, ["iconElementRef"], ["*"], true, never>;
 }

package/card/card-as-button/card-as-button.directive.d.ts

@@ -1,14 +1,13 @@
-import { ElementRef, OnInit } from '@angular/core';
+import { ElementRef } from '@angular/core';
 import { CardComponent } from '../card.component';
 import * as i0 from "@angular/core";
-export declare class CardAsButtonDirective implements OnInit {
+export declare class CardAsButtonDirective {
     private card;
     private clickableElement;
     role: string;
     tabindex: number;
     _pressed: boolean;
     constructor(card: CardComponent, clickableElement: ElementRef);
-    ngOnInit(): void;
     _onKeydownHandler(event: KeyboardEvent): void;
     _onInactiveHandler(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardAsButtonDirective, [{ optional: true; }, null]>;

package/card/card.component.d.ts

@@ -14,7 +14,7 @@ export declare class CardComponent implements OnInit, OnDestroy {
     set sizes(value: {
         [size: string]: number;
     });
-    flat: boolean;
+    variant: 'elevated' | 'flat' | 'outlined';
     constructor(elementRef: ElementRef, resizeObserverService: ResizeObserverService, renderer: Renderer2);
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -22,5 +22,5 @@ export declare class CardComponent implements OnInit, OnDestroy {
     private compareSizesByBreakpoint;
     private handleResize;
     static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "kirby-card", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "backgroundImageUrl": { "alias": "backgroundImageUrl"; "required": false; }; "hasPadding": { "alias": "hasPadding"; "required": false; }; "sizes": { "alias": "sizes"; "required": false; }; "flat": { "alias": "flat"; "required": false; }; }, {}, never, ["kirby-card-header", "*", "kirby-card-footer"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "kirby-card", never, { "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "backgroundImageUrl": { "alias": "backgroundImageUrl"; "required": false; }; "hasPadding": { "alias": "hasPadding"; "required": false; }; "sizes": { "alias": "sizes"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["kirby-card-header", "*", "kirby-card-footer"], false, never>;
 }

package/chart/chart-config/chart-stock-config/chart-stock-config.d.ts

@@ -16,5 +16,5 @@ export declare class StockChartConfig extends ChartBaseConfig {
     static tooltipPlugin: Partial<TooltipOptions<'line'>>;
     static dataLabelsPluginConfig: Partial<import("chartjs-plugin-datalabels/types/options").Options>;
     static verticalLinePluginConfig: import("./vertical-line-plugin/vertical-line-plugin.model").VerticalLinePlugin;
-    static getDataLabelPosition: (data: import("chart.js").ScatterDataPoint[], dataIndex: number) => import("chartjs-plugin-datalabels/types/options").Align;
+    static getDataLabelPosition: (data: import("chart.js").ScatterDataPoint[], dataIndex: number) => import("chartjs-plugin-datalabels/types/options").Align | null;
 }

package/chart/shared/chart-config-service/configs/interaction-functions-extensions.config.d.ts

@@ -1,4 +1,4 @@
 import { ActiveElement, Chart, ChartEvent, ChartOptions } from 'chart.js';
 export declare const CHART_INTERACTION_FUNCTIONS_EXTENSIONS: {
-    onHover: (_event: ChartEvent, activeElements: ActiveElement[], _chart: Chart, callback: ChartOptions['onHover']) => void;
+    onHover: (_event: ChartEvent, activeElements: ActiveElement[], _chart: Chart, callback: ChartOptions["onHover"]) => void;
 };

package/checkbox/checkbox.component.d.ts

@@ -1,8 +1,9 @@
-import { AfterViewInit, EventEmitter } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, OnInit } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { IonicElementPartHelper } from '@kirbydesign/designsystem/helpers';
 import * as i0 from "@angular/core";
-export declare class CheckboxComponent implements AfterViewInit, ControlValueAccessor {
+export declare class CheckboxComponent implements AfterViewInit, ControlValueAccessor, OnInit {
+    private element;
     private ionicElementPartHelper;
     private ionCheckboxElement?;
     checked: boolean;
@@ -15,7 +16,10 @@ export declare class CheckboxComponent implements AfterViewInit, ControlValueAcc
     get isAttentionLevel1(): boolean;
     get isAttentionLevel2(): boolean;
     checkedChange: EventEmitter<boolean>;
-    constructor(ionicElementPartHelper: IonicElementPartHelper);
+    _justify: 'start' | 'end' | 'space-between';
+    _labelPlacement: 'end' | 'fixed' | 'stacked' | 'start';
+    constructor(element: ElementRef<HTMLElement>, ionicElementPartHelper: IonicElementPartHelper);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     onChecked(checked: boolean): void;
     onBlur(): void;
@@ -52,5 +56,5 @@ export declare class CheckboxComponent implements AfterViewInit, ControlValueAcc
      */
     setDisabledState?(isDisabled: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "kirby-checkbox", never, { "checked": { "alias": "checked"; "required": false; }; "attentionLevel": { "alias": "attentionLevel"; "required": false; }; "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "kirby-checkbox", never, { "checked": { "alias": "checked"; "required": false; }; "attentionLevel": { "alias": "attentionLevel"; "required": false; }; "text": { "alias": "text"; "required": false; }; "size": { "alias": "size"; "required": false; }; "hasError": { "alias": "hasError"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, ["*"], true, never>;
 }

package/data-table/data-table.module.d.ts

@@ -1,11 +1,12 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./table/table.component";
-import * as i2 from "./table-row/table-row.component";
-import * as i3 from "./sortable/sortable.component";
-import * as i4 from "@angular/common";
-import * as i5 from "@kirbydesign/designsystem/icon";
+import * as i1 from "./sortable/sortable.component";
+/**
+ * @deprecated 'DataTableModule' has been deprecated in favor of the standalone 'TableSortableComponent'.
+ * Please import 'TableSortableComponent' instead. 'DataTableModule' will be removed in Kirby v11.
+ */
 export declare class DataTableModule {
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<DataTableModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DataTableModule, [typeof i1.TableComponent, typeof i2.TableRowComponent, typeof i3.TableSortableComponent], [typeof i4.CommonModule, typeof i5.IconModule], [typeof i1.TableComponent, typeof i2.TableRowComponent, typeof i3.TableSortableComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DataTableModule, never, [typeof i1.TableSortableComponent], [typeof i1.TableSortableComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DataTableModule>;
 }

package/data-table/public_api.d.ts

@@ -1,4 +1,2 @@
 export * from './data-table.module';
 export * from './sortable/sortable.component';
-export * from './table-row/table-row.component';
-export * from './table/table.component';

package/data-table/sortable/sortable.component.d.ts

@@ -13,5 +13,5 @@ export declare class TableSortableComponent implements AfterViewInit {
     spanElement: ElementRef;
     ngAfterViewInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableSortableComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableSortableComponent, "th[sortable]", never, { "sortable": { "alias": "sortable"; "required": false; }; "active": { "alias": "active"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "iconAlignment": { "alias": "iconAlignment"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableSortableComponent, "th[sortable]", never, { "sortable": { "alias": "sortable"; "required": false; }; "active": { "alias": "active"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "iconAlignment": { "alias": "iconAlignment"; "required": false; }; "alignment": { "alias": "alignment"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/empty-state/empty-state.component.d.ts

@@ -2,7 +2,6 @@ import { AfterContentInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class EmptyStateComponent implements AfterContentInit {
     iconName: string;
-    set customIconName(customName: string);
     title: string;
     subtitle: string;
     private slottedButtons;
@@ -13,5 +12,5 @@ export declare class EmptyStateComponent implements AfterContentInit {
      */
     private enforceAttentionLevelRules;
     static ɵfac: i0.ɵɵFactoryDeclaration<EmptyStateComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "kirby-empty-state", never, { "iconName": { "alias": "iconName"; "required": false; }; "customIconName": { "alias": "customIconName"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; }, {}, ["slottedButtons"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EmptyStateComponent, "kirby-empty-state", never, { "iconName": { "alias": "iconName"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; }, {}, ["slottedButtons"], ["*"], false, never>;
 }

package/esm2022/accordion/accordion-item.component.mjs

@@ -8,6 +8,7 @@ export class AccordionItemComponent {
     constructor() {
         this.isExpanded = false;
         this.isDisabled = false;
+        this.hasPadding = true;
         this.toggle = new EventEmitter();
         // IDs used for a11y labelling
         this._titleId = `kirby-accordion-item-title-${++uniqueId}`;
@@ -33,8 +34,8 @@ export class AccordionItemComponent {
         this.isExpanded = !this.isExpanded && !this.isDisabled;
         this.toggle.emit(this.isExpanded);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle" }, outputs: { toggle: "toggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }], animations: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AccordionItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: AccordionItemComponent, selector: "kirby-accordion-item", inputs: { title: "title", isExpanded: "isExpanded", isDisabled: "isDisabled", disabledTitle: "disabledTitle", hasPadding: "hasPadding" }, outputs: { toggle: "toggle" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], animations: [
             trigger('isExpanded', [
                 state('true', style({ height: '*', visibility: 'visible' })),
                 state('false', style({ height: '0px', visibility: 'hidden' })),
@@ -42,7 +43,7 @@ export class AccordionItemComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
                         trigger('isExpanded', [
@@ -50,7 +51,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                             state('false', style({ height: '0px', visibility: 'hidden' })),
                             transition('true <=> false', animate('0.2s')),
                         ]),
-                    ], template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"] }]
+                    ], template: "<div class=\"content-layer\">\n  <div\n    (click)=\"_onToggleExpanded($event)\"\n    (keydown.ENTER)=\"_onToggleExpanded($event)\"\n    (keydown.space)=\"_onToggleExpanded($event)\"\n    class=\"header\"\n    role=\"button\"\n    [class.disabled]=\"isDisabled\"\n    [tabindex]=\"isDisabled ? -1 : 0\"\n    [class.expanded]=\"isExpanded\"\n    [attr.aria-disabled]=\"isDisabled ? true : undefined\"\n    [attr.aria-expanded]=\"isExpanded\"\n    [attr.aria-controls]=\"_contentId\"\n    [id]=\"_titleId\"\n  >\n    <span class=\"state-layer\" aria-hidden=\"true\"></span>\n    <div class=\"title\">{{ getTitle() }}</div>\n    <kirby-icon name=\"arrow-down\"></kirby-icon>\n  </div>\n  <div\n    class=\"content\"\n    role=\"region\"\n    [attr.aria-labelledby]=\"_titleId\"\n    [id]=\"_contentId\"\n    [@isExpanded]=\"!!isExpanded\"\n  >\n    <div class=\"content-body\" [class.padding]=\"hasPadding\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{--state-layer-opacity: 0;--state-layer-background-color: var(--kirby-black);position:relative;display:block;border-top:1px solid var(--kirby-medium);border-bottom:1px solid var(--kirby-medium)}:host .content-layer{position:relative;z-index:var(--content-layer-z-index, 1)}:host .state-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;z-index:2}:host .state-layer:before{transition:all 80ms linear 0ms;content:\"\";position:absolute;pointer-events:none;inset:-50%;opacity:var(--state-layer-opacity, 0);background-color:var(--state-layer-background-color, var(--kirby-black))}.header{display:flex;align-items:center;height:56px;padding-left:16px;padding-right:16px;-webkit-user-select:none;user-select:none}@media (hover: hover) and (pointer: fine){.header{outline:0}.header:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){.header:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);cursor:pointer}}.header:active,.header.interaction-state-active{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black)}.title{flex-grow:2}.kirby-icon{transition:transform .2s}.content{overflow:hidden;cursor:default}.content-body.padding{padding:0 16px 16px}.disabled{pointer-events:none}.disabled .kirby-icon{color:var(--kirby-semi-dark)}.disabled .title{color:var(--kirby-text-color-semi-dark)}.expanded .title{font-weight:700}.expanded .kirby-icon{transform:rotate(180deg)}:host-context(kirby-accordion):not(:first-child){border-top:none}:host-context(kirby-card){border-color:var(--kirby-background-color)}:host-context(kirby-card):first-child{border-top:none}:host-context(kirby-card):last-child{border-bottom:none}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], isExpanded: [{
@@ -59,7 +60,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], disabledTitle: [{
                 type: Input
+            }], hasPadding: [{
+                type: Input
             }], toggle: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vYWNjb3JkaW9uL3NyYy9hY2NvcmRpb24taXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9hY2NvcmRpb24vc3JjL2FjY29yZGlvbi1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDakYsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7OztBQUV2Qiw0Q0FBNEM7QUFDNUMsSUFBSSxRQUFRLEdBQUcsQ0FBQyxDQUFDO0FBZWpCLE1BQU0sT0FBTyxzQkFBc0I7SUFibkM7UUFlVyxlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzVCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFM0IsV0FBTSxHQUEwQixJQUFJLFlBQVksRUFBVyxDQUFDO1FBd0J0RSw4QkFBOEI7UUFDOUIsYUFBUSxHQUFHLDhCQUE4QixFQUFFLFFBQVEsRUFBRSxDQUFDO1FBQ3RELGVBQVUsR0FBRyxnQ0FBZ0MsUUFBUSxFQUFFLENBQUM7S0FDekQ7SUF6QkMsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1FBQzFCLENBQUM7SUFDSCxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksSUFBSSxDQUFDLFVBQVUsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1lBQzVDLE9BQU8sSUFBSSxDQUFDLGFBQWEsQ0FBQztRQUM1QixDQUFDO2FBQU0sQ0FBQztZQUNOLE9BQU8sSUFBSSxDQUFDLEtBQUssQ0FBQztRQUNwQixDQUFDO0lBQ0gsQ0FBQztJQUVELGlCQUFpQixDQUFDLEtBQWM7UUFDOUIsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3ZCLElBQUksSUFBSSxDQUFDLFVBQVU7WUFBRSxPQUFPO1FBRTVCLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQyxJQUFJLENBQUMsVUFBVSxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQztRQUN2RCxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDcEMsQ0FBQztpSUEzQlUsc0JBQXNCO3FIQUF0QixzQkFBc0IsZ09DMUJuQyw2NkJBK0JBLDg0RERiYztZQUNWLE9BQU8sQ0FBQyxZQUFZLEVBQUU7Z0JBQ3BCLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQztnQkFDNUQsS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO2dCQUM5RCxVQUFVLENBQUMsZ0JBQWdCLEVBQUUsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO2FBQzlDLENBQUM7U0FDSDs7MkZBRVUsc0JBQXNCO2tCQWJsQyxTQUFTOytCQUNFLHNCQUFzQixtQkFHZix1QkFBdUIsQ0FBQyxNQUFNLGNBQ25DO3dCQUNWLE9BQU8sQ0FBQyxZQUFZLEVBQUU7NEJBQ3BCLEtBQUssQ0FBQyxNQUFNLEVBQUUsS0FBSyxDQUFDLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLENBQUMsQ0FBQzs0QkFDNUQsS0FBSyxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLFVBQVUsRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDOzRCQUM5RCxVQUFVLENBQUMsZ0JBQWdCLEVBQUUsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO3lCQUM5QyxDQUFDO3FCQUNIOzhCQUdRLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBhbmltYXRlLCBzdGF0ZSwgc3R5bGUsIHRyYW5zaXRpb24sIHRyaWdnZXIgfSBmcm9tICdAYW5ndWxhci9hbmltYXRpb25zJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE9uQ2hhbmdlcyxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuLy8gQ291bnRlciBmb3IgZ2VuZXJhdGluZyB1bmlxdWUgZWxlbWVudCBpZHNcbmxldCB1bmlxdWVJZCA9IDA7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2tpcmJ5LWFjY29yZGlvbi1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2FjY29yZGlvbi1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKCdpc0V4cGFuZGVkJywgW1xuICAgICAgc3RhdGUoJ3RydWUnLCBzdHlsZSh7IGhlaWdodDogJyonLCB2aXNpYmlsaXR5OiAndmlzaWJsZScgfSkpLFxuICAgICAgc3RhdGUoJ2ZhbHNlJywgc3R5bGUoeyBoZWlnaHQ6ICcwcHgnLCB2aXNpYmlsaXR5OiAnaGlkZGVuJyB9KSksXG4gICAgICB0cmFuc2l0aW9uKCd0cnVlIDw9PiBmYWxzZScsIGFuaW1hdGUoJzAuMnMnKSksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEFjY29yZGlvbkl0ZW1Db21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSB0aXRsZTogc3RyaW5nO1xuICBASW5wdXQoKSBpc0V4cGFuZGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGlzRGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgZGlzYWJsZWRUaXRsZTogc3RyaW5nO1xuICBAT3V0cHV0KCkgdG9nZ2xlOiBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4gPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgbmdPbkNoYW5nZXMoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXNEaXNhYmxlZCkge1xuICAgICAgdGhpcy5pc0V4cGFuZGVkID0gZmFsc2U7XG4gICAgfVxuICB9XG5cbiAgZ2V0VGl0bGUoKSB7XG4gICAgaWYgKHRoaXMuaXNEaXNhYmxlZCAmJiAhIXRoaXMuZGlzYWJsZWRUaXRsZSkge1xuICAgICAgcmV0dXJuIHRoaXMuZGlzYWJsZWRUaXRsZTtcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIHRoaXMudGl0bGU7XG4gICAgfVxuICB9XG5cbiAgX29uVG9nZ2xlRXhwYW5kZWQoZXZlbnQ6IFVJRXZlbnQpIHtcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgIGlmICh0aGlzLmlzRGlzYWJsZWQpIHJldHVybjtcblxuICAgIHRoaXMuaXNFeHBhbmRlZCA9ICF0aGlzLmlzRXhwYW5kZWQgJiYgIXRoaXMuaXNEaXNhYmxlZDtcbiAgICB0aGlzLnRvZ2dsZS5lbWl0KHRoaXMuaXNFeHBhbmRlZCk7XG4gIH1cblxuICAvLyBJRHMgdXNlZCBmb3IgYTExeSBsYWJlbGxpbmdcbiAgX3RpdGxlSWQgPSBga2lyYnktYWNjb3JkaW9uLWl0ZW0tdGl0bGUtJHsrK3VuaXF1ZUlkfWA7XG4gIF9jb250ZW50SWQgPSBga2lyYnktYWNjb3JkaW9uLWl0ZW0tY29udGVudC0ke3VuaXF1ZUlkfWA7XG59XG4iLCI8ZGl2IGNsYXNzPVwiY29udGVudC1sYXllclwiPlxuICA8ZGl2XG4gICAgKGNsaWNrKT1cIl9vblRvZ2dsZUV4cGFuZGVkKCRldmVudClcIlxuICAgIChrZXlkb3duLkVOVEVSKT1cIl9vblRvZ2dsZUV4cGFuZGVkKCRldmVudClcIlxuICAgIChrZXlkb3duLnNwYWNlKT1cIl9vblRvZ2dsZUV4cGFuZGVkKCRldmVudClcIlxuICAgIGNsYXNzPVwiaGVhZGVyXCJcbiAgICByb2xlPVwiYnV0dG9uXCJcbiAgICBbY2xhc3MuZGlzYWJsZWRdPVwiaXNEaXNhYmxlZFwiXG4gICAgW3RhYmluZGV4XT1cImlzRGlzYWJsZWQgPyAtMSA6IDBcIlxuICAgIFtjbGFzcy5leHBhbmRlZF09XCJpc0V4cGFuZGVkXCJcbiAgICBbYXR0ci5hcmlhLWRpc2FibGVkXT1cImlzRGlzYWJsZWQgPyB0cnVlIDogdW5kZWZpbmVkXCJcbiAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cImlzRXhwYW5kZWRcIlxuICAgIFthdHRyLmFyaWEtY29udHJvbHNdPVwiX2NvbnRlbnRJZFwiXG4gICAgW2lkXT1cIl90aXRsZUlkXCJcbiAgPlxuICAgIDxzcGFuIGNsYXNzPVwic3RhdGUtbGF5ZXJcIiBhcmlhLWhpZGRlbj1cInRydWVcIj48L3NwYW4+XG4gICAgPGRpdiBjbGFzcz1cInRpdGxlXCI+e3sgZ2V0VGl0bGUoKSB9fTwvZGl2PlxuICAgIDxraXJieS1pY29uIG5hbWU9XCJhcnJvdy1kb3duXCI+PC9raXJieS1pY29uPlxuICA8L2Rpdj5cbiAgPGRpdlxuICAgIGNsYXNzPVwiY29udGVudFwiXG4gICAgcm9sZT1cInJlZ2lvblwiXG4gICAgW2F0dHIuYXJpYS1sYWJlbGxlZGJ5XT1cIl90aXRsZUlkXCJcbiAgICBbaWRdPVwiX2NvbnRlbnRJZFwiXG4gICAgW0Bpc0V4cGFuZGVkXT1cIiEhaXNFeHBhbmRlZFwiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwiY29udGVudC1ib2R5XCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vYWNjb3JkaW9uL3NyYy9hY2NvcmRpb24taXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi9hY2NvcmRpb24vc3JjL2FjY29yZGlvbi1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDakYsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLEtBQUssRUFFTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7OztBQUV2Qiw0Q0FBNEM7QUFDNUMsSUFBSSxRQUFRLEdBQUcsQ0FBQyxDQUFDO0FBZWpCLE1BQU0sT0FBTyxzQkFBc0I7SUFibkM7UUFlVyxlQUFVLEdBQVksS0FBSyxDQUFDO1FBQzVCLGVBQVUsR0FBWSxLQUFLLENBQUM7UUFFNUIsZUFBVSxHQUFZLElBQUksQ0FBQztRQUMxQixXQUFNLEdBQTBCLElBQUksWUFBWSxFQUFXLENBQUM7UUF3QnRFLDhCQUE4QjtRQUM5QixhQUFRLEdBQUcsOEJBQThCLEVBQUUsUUFBUSxFQUFFLENBQUM7UUFDdEQsZUFBVSxHQUFHLGdDQUFnQyxRQUFRLEVBQUUsQ0FBQztLQUN6RDtJQXpCQyxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDcEIsSUFBSSxDQUFDLFVBQVUsR0FBRyxLQUFLLENBQUM7UUFDMUIsQ0FBQztJQUNILENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsVUFBVSxJQUFJLENBQUMsQ0FBQyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7WUFDNUMsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQzVCLENBQUM7YUFBTSxDQUFDO1lBQ04sT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDO1FBQ3BCLENBQUM7SUFDSCxDQUFDO0lBRUQsaUJBQWlCLENBQUMsS0FBYztRQUM5QixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDdkIsSUFBSSxJQUFJLENBQUMsVUFBVTtZQUFFLE9BQU87UUFFNUIsSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDLElBQUksQ0FBQyxVQUFVLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDO1FBQ3ZELElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNwQyxDQUFDO2lJQTVCVSxzQkFBc0I7cUhBQXRCLHNCQUFzQiwwUEMxQm5DLDQ4QkErQkEsdzRERGJjO1lBQ1YsT0FBTyxDQUFDLFlBQVksRUFBRTtnQkFDcEIsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUFDO2dCQUM1RCxLQUFLLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUM7Z0JBQzlELFVBQVUsQ0FBQyxnQkFBZ0IsRUFBRSxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7YUFDOUMsQ0FBQztTQUNIOzsyRkFFVSxzQkFBc0I7a0JBYmxDLFNBQVM7K0JBQ0Usc0JBQXNCLG1CQUdmLHVCQUF1QixDQUFDLE1BQU0sY0FDbkM7d0JBQ1YsT0FBTyxDQUFDLFlBQVksRUFBRTs0QkFDcEIsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLFVBQVUsRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUFDOzRCQUM1RCxLQUFLLENBQUMsT0FBTyxFQUFFLEtBQUssQ0FBQyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUM7NEJBQzlELFVBQVUsQ0FBQyxnQkFBZ0IsRUFBRSxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7eUJBQzlDLENBQUM7cUJBQ0g7OEJBR1EsS0FBSztzQkFBYixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0ksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgYW5pbWF0ZSwgc3RhdGUsIHN0eWxlLCB0cmFuc2l0aW9uLCB0cmlnZ2VyIH0gZnJvbSAnQGFuZ3VsYXIvYW5pbWF0aW9ucyc7XG5pbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIElucHV0LFxuICBPbkNoYW5nZXMsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8vIENvdW50ZXIgZm9yIGdlbmVyYXRpbmcgdW5pcXVlIGVsZW1lbnQgaWRzXG5sZXQgdW5pcXVlSWQgPSAwO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdraXJieS1hY2NvcmRpb24taXRlbScsXG4gIHRlbXBsYXRlVXJsOiAnLi9hY2NvcmRpb24taXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FjY29yZGlvbi1pdGVtLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBhbmltYXRpb25zOiBbXG4gICAgdHJpZ2dlcignaXNFeHBhbmRlZCcsIFtcbiAgICAgIHN0YXRlKCd0cnVlJywgc3R5bGUoeyBoZWlnaHQ6ICcqJywgdmlzaWJpbGl0eTogJ3Zpc2libGUnIH0pKSxcbiAgICAgIHN0YXRlKCdmYWxzZScsIHN0eWxlKHsgaGVpZ2h0OiAnMHB4JywgdmlzaWJpbGl0eTogJ2hpZGRlbicgfSkpLFxuICAgICAgdHJhbnNpdGlvbigndHJ1ZSA8PT4gZmFsc2UnLCBhbmltYXRlKCcwLjJzJykpLFxuICAgIF0pLFxuICBdLFxufSlcbmV4cG9ydCBjbGFzcyBBY2NvcmRpb25JdGVtQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgQElucHV0KCkgdGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgaXNFeHBhbmRlZDogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBpc0Rpc2FibGVkOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIGRpc2FibGVkVGl0bGU6IHN0cmluZztcbiAgQElucHV0KCkgaGFzUGFkZGluZzogYm9vbGVhbiA9IHRydWU7XG4gIEBPdXRwdXQoKSB0b2dnbGU6IEV2ZW50RW1pdHRlcjxib29sZWFuPiA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5pc0Rpc2FibGVkKSB7XG4gICAgICB0aGlzLmlzRXhwYW5kZWQgPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBnZXRUaXRsZSgpIHtcbiAgICBpZiAodGhpcy5pc0Rpc2FibGVkICYmICEhdGhpcy5kaXNhYmxlZFRpdGxlKSB7XG4gICAgICByZXR1cm4gdGhpcy5kaXNhYmxlZFRpdGxlO1xuICAgIH0gZWxzZSB7XG4gICAgICByZXR1cm4gdGhpcy50aXRsZTtcbiAgICB9XG4gIH1cblxuICBfb25Ub2dnbGVFeHBhbmRlZChldmVudDogVUlFdmVudCkge1xuICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgaWYgKHRoaXMuaXNEaXNhYmxlZCkgcmV0dXJuO1xuXG4gICAgdGhpcy5pc0V4cGFuZGVkID0gIXRoaXMuaXNFeHBhbmRlZCAmJiAhdGhpcy5pc0Rpc2FibGVkO1xuICAgIHRoaXMudG9nZ2xlLmVtaXQodGhpcy5pc0V4cGFuZGVkKTtcbiAgfVxuXG4gIC8vIElEcyB1c2VkIGZvciBhMTF5IGxhYmVsbGluZ1xuICBfdGl0bGVJZCA9IGBraXJieS1hY2NvcmRpb24taXRlbS10aXRsZS0keysrdW5pcXVlSWR9YDtcbiAgX2NvbnRlbnRJZCA9IGBraXJieS1hY2NvcmRpb24taXRlbS1jb250ZW50LSR7dW5pcXVlSWR9YDtcbn1cbiIsIjxkaXYgY2xhc3M9XCJjb250ZW50LWxheWVyXCI+XG4gIDxkaXZcbiAgICAoY2xpY2spPVwiX29uVG9nZ2xlRXhwYW5kZWQoJGV2ZW50KVwiXG4gICAgKGtleWRvd24uRU5URVIpPVwiX29uVG9nZ2xlRXhwYW5kZWQoJGV2ZW50KVwiXG4gICAgKGtleWRvd24uc3BhY2UpPVwiX29uVG9nZ2xlRXhwYW5kZWQoJGV2ZW50KVwiXG4gICAgY2xhc3M9XCJoZWFkZXJcIlxuICAgIHJvbGU9XCJidXR0b25cIlxuICAgIFtjbGFzcy5kaXNhYmxlZF09XCJpc0Rpc2FibGVkXCJcbiAgICBbdGFiaW5kZXhdPVwiaXNEaXNhYmxlZCA/IC0xIDogMFwiXG4gICAgW2NsYXNzLmV4cGFuZGVkXT1cImlzRXhwYW5kZWRcIlxuICAgIFthdHRyLmFyaWEtZGlzYWJsZWRdPVwiaXNEaXNhYmxlZCA/IHRydWUgOiB1bmRlZmluZWRcIlxuICAgIFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiaXNFeHBhbmRlZFwiXG4gICAgW2F0dHIuYXJpYS1jb250cm9sc109XCJfY29udGVudElkXCJcbiAgICBbaWRdPVwiX3RpdGxlSWRcIlxuICA+XG4gICAgPHNwYW4gY2xhc3M9XCJzdGF0ZS1sYXllclwiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjwvc3Bhbj5cbiAgICA8ZGl2IGNsYXNzPVwidGl0bGVcIj57eyBnZXRUaXRsZSgpIH19PC9kaXY+XG4gICAgPGtpcmJ5LWljb24gbmFtZT1cImFycm93LWRvd25cIj48L2tpcmJ5LWljb24+XG4gIDwvZGl2PlxuICA8ZGl2XG4gICAgY2xhc3M9XCJjb250ZW50XCJcbiAgICByb2xlPVwicmVnaW9uXCJcbiAgICBbYXR0ci5hcmlhLWxhYmVsbGVkYnldPVwiX3RpdGxlSWRcIlxuICAgIFtpZF09XCJfY29udGVudElkXCJcbiAgICBbQGlzRXhwYW5kZWRdPVwiISFpc0V4cGFuZGVkXCJcbiAgPlxuICAgIDxkaXYgY2xhc3M9XCJjb250ZW50LWJvZHlcIiBbY2xhc3MucGFkZGluZ109XCJoYXNQYWRkaW5nXCI+XG4gICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=

package/esm2022/accordion/accordion.directive.mjs

@@ -1,10 +1,10 @@
 import { Directive } from '@angular/core';
 import * as i0 from "@angular/core";
 export class AccordionDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.3", type: AccordionDirective, selector: "[kirbyAccordion], kirby-accordion", exportAs: ["kirby-accordion"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AccordionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: AccordionDirective, selector: "[kirbyAccordion], kirby-accordion", exportAs: ["kirby-accordion"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AccordionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyAccordion], kirby-accordion',

package/esm2022/accordion/accordion.module.mjs

@@ -5,11 +5,11 @@ import { AccordionDirective } from './accordion.directive';
 import * as i0 from "@angular/core";
 const declarations = [AccordionDirective, AccordionItemComponent];
 export class AccordionModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.3", ngImport: i0, type: AccordionModule, declarations: [AccordionDirective, AccordionItemComponent], imports: [IconModule], exports: [AccordionDirective, AccordionItemComponent] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionModule, imports: [IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AccordionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: AccordionModule, declarations: [AccordionDirective, AccordionItemComponent], imports: [IconModule], exports: [AccordionDirective, AccordionItemComponent] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AccordionModule, imports: [IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AccordionModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AccordionModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [...declarations],

package/esm2022/action-group/action-group.component.mjs

@@ -94,10 +94,10 @@ export class ActionGroupComponent {
             text: button.textContent.trim(),
         }));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ItemModule }, { kind: "component", type: i2.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class": "this._align" } }, queries: [{ propertyName: "buttonElements", predicate: ButtonComponent, read: ElementRef }, { propertyName: "buttons", predicate: ButtonComponent }], viewQueries: [{ propertyName: "hiddenLayer", first: true, predicate: ["hiddenLayer"], descendants: true, read: ElementRef, static: true }, { propertyName: "menuElement", first: true, predicate: MenuComponent, descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: ItemModule }, { kind: "component", type: i2.ItemComponent, selector: "kirby-item", inputs: ["disabled", "selected", "disclosure", "selectable", "reorderable", "size", "rotateIcon"] }, { kind: "component", type: MenuComponent, selector: "kirby-menu", inputs: ["isDisabled", "buttonSize", "placement", "attentionLevel", "triggers", "DOMPortalOutlet", "portalOutletConfig", "autoPlacement", "closeOnSelect", "closeOnEscapeKey", "closeOnBackdrop", "shift", "minWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: ActionGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: ActionGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-action-group', standalone: true, imports: [CommonModule, ButtonComponent, ItemModule, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-menu [placement]=\"'bottom-end'\">\n  <kirby-item\n    *ngFor=\"let action of _collapsedActions\"\n    [selectable]=\"true\"\n    (click)=\"onActionSelect(action)\"\n  >\n    {{ action.text }}\n  </kirby-item>\n</kirby-menu>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;gap:8px}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}kirby-menu{display:none;z-index:1}:host(.is-collapsed) kirby-menu{display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{

package/esm2022/avatar/avatar.component.mjs

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output, } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 export var AvatarSize;
@@ -12,16 +12,20 @@ export var AvatarSize;
 export class AvatarComponent {
     constructor() {
         this.size = AvatarSize.SM;
+        this.imageError = new EventEmitter();
     }
     get _cssClass() {
         return [this.themeColor, this.size].filter((cssClass) => !!cssClass);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    onImageError($event) {
+        this.imageError.emit($event);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: AvatarComponent, isStandalone: true, selector: "kirby-avatar", inputs: { imageSrc: "imageSrc", altText: "altText", stroke: "stroke", text: "text", overlay: "overlay", size: "size", themeColor: "themeColor" }, outputs: { imageError: "imageError" }, host: { properties: { "class": "this._cssClass" } }, ngImport: i0, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" (error)=\"onImageError($event)\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: AvatarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], selector: 'kirby-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"avatar\" [ngClass]=\"{ overlay: overlay, stroke: stroke }\">\n  <img *ngIf=\"imageSrc\" [src]=\"imageSrc\" [attr.alt]=\"altText\" (error)=\"onImageError($event)\" />\n  <ng-content *ngIf=\"!text\" select=\"kirby-icon\"></ng-content>\n  <span class=\"avatar-text\" *ngIf=\"text\">{{ text }}</span>\n</div>\n<ng-content select=\"kirby-badge\"></ng-content>\n", styles: [":host{--kirby-badge-position: absolute;--kirby-badge-right: -2px;--kirby-badge-top: -2px;--kirby-badge-z-index: 2;position:relative}.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;position:relative;z-index:1;display:flex;justify-content:center;align-items:center;background-color:var(--kirby-white);color:var(--kirby-light-contrast);--kirby-icon-font-size: 24px}.avatar.stroke{border:1px solid var(--kirby-semi-light)}.avatar.overlay:before{content:\"\";background-color:var(--kirby-black);opacity:.05;width:100%;height:100%;position:absolute;top:0;left:0}.avatar img{object-fit:cover;max-width:100%;height:100%;width:100%}:host(.xs) .avatar{width:32px;height:32px;border-radius:8px}:host(.xs) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.sm) .avatar,:host(.sm) .avatar{width:40px;height:40px}:host-context(kirby-progress-circle.sm) .avatar .avatar-text,:host(.sm) .avatar .avatar-text{font-size:14px}:host-context(kirby-progress-circle.md),:host(.md){--kirby-badge-right: 0px;--kirby-badge-top: 0px}:host-context(kirby-progress-circle.md) .avatar,:host(.md) .avatar{width:56px;height:56px;--kirby-icon-font-size: 32px}:host-context(kirby-progress-circle.md) .avatar .avatar-text,:host(.md) .avatar .avatar-text{font-size:18px}:host-context(kirby-progress-circle.lg),:host(.lg){--kirby-badge-right: 6px;--kirby-badge-top: 6px}:host-context(kirby-progress-circle.lg) .avatar,:host(.lg) .avatar{width:96px;height:96px;--kirby-icon-font-size: 56px}:host-context(kirby-progress-circle.lg) .avatar .avatar-text,:host(.lg) .avatar .avatar-text{font-size:32px}:host-context(kirby-item)[slot=start]{margin-inline-end:12px}:host-context(kirby-item)[slot=start].xs{margin-inline-end:16px}:host(.primary) .avatar{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}:host(.secondary) .avatar{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}:host(.tertiary) .avatar{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}:host(.success) .avatar{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}:host(.warning) .avatar{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}:host(.danger) .avatar{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}:host(.white-overlay) .avatar{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}:host(.light) .avatar{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}:host(.medium) .avatar{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}:host(.dark) .avatar{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}:host(.dark-overlay) .avatar{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}:host(.white) .avatar{background-color:var(--kirby-white);color:var(--kirby-white-contrast)}:host(.semi-light) .avatar{background-color:var(--kirby-semi-light);color:var(--kirby-semi-light-contrast)}\n"] }]
         }], propDecorators: { imageSrc: [{
                 type: Input
             }], altText: [{
@@ -36,8 +40,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImpor
                 type: Input
             }], themeColor: [{
                 type: Input
+            }], imageError: [{
+                type: Output
             }], _cssClass: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2F2YXRhci9zcmMvYXZhdGFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL2F2YXRhci9zcmMvYXZhdGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQUl2RixNQUFNLENBQU4sSUFBWSxVQUtYO0FBTEQsV0FBWSxVQUFVO0lBQ3BCLHVCQUFTLENBQUE7SUFDVCx1QkFBUyxDQUFBO0lBQ1QsdUJBQVMsQ0FBQTtJQUNULHVCQUFTLENBQUE7QUFDWCxDQUFDLEVBTFcsVUFBVSxLQUFWLFVBQVUsUUFLckI7QUFVRCxNQUFNLE9BQU8sZUFBZTtJQVI1QjtRQWNXLFNBQUksR0FBaUMsVUFBVSxDQUFDLEVBQUUsQ0FBQztLQVE3RDtJQUpDLElBQ0ksU0FBUztRQUNYLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUN2RSxDQUFDO2lJQWJVLGVBQWU7cUhBQWYsZUFBZSwrUUNwQjVCLGtWQU1BLHVnR0RRWSxZQUFZOzsyRkFNWCxlQUFlO2tCQVIzQixTQUFTO2lDQUNJLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQyxZQUNiLGNBQWMsbUJBR1AsdUJBQXVCLENBQUMsTUFBTTs4QkFHdEMsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUVOLFVBQVU7c0JBRFQsS0FBSztnQkFJRixTQUFTO3NCQURaLFdBQVc7dUJBQUMsT0FBTyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBIb3N0QmluZGluZywgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgQnJhbmRDb2xvciwgTm90aWZpY2F0aW9uQ29sb3IgfSBmcm9tICdAa2lyYnlkZXNpZ24vY29yZSc7XG5cbmV4cG9ydCBlbnVtIEF2YXRhclNpemUge1xuICBYUyA9ICd4cycsXG4gIFNNID0gJ3NtJyxcbiAgTUQgPSAnbWQnLFxuICBMRyA9ICdsZycsXG59XG5cbkBDb21wb25lbnQoe1xuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlXSxcbiAgc2VsZWN0b3I6ICdraXJieS1hdmF0YXInLFxuICB0ZW1wbGF0ZVVybDogJy4vYXZhdGFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYXZhdGFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBBdmF0YXJDb21wb25lbnQge1xuICBASW5wdXQoKSBpbWFnZVNyYzogc3RyaW5nO1xuICBASW5wdXQoKSBhbHRUZXh0OiBzdHJpbmc7XG4gIEBJbnB1dCgpIHN0cm9rZTogYm9vbGVhbjtcbiAgQElucHV0KCkgdGV4dDogc3RyaW5nO1xuICBASW5wdXQoKSBvdmVybGF5OiBib29sZWFuO1xuICBASW5wdXQoKSBzaXplOiBBdmF0YXJTaXplIHwgYCR7QXZhdGFyU2l6ZX1gID0gQXZhdGFyU2l6ZS5TTTtcbiAgQElucHV0KClcbiAgdGhlbWVDb2xvcjogTm90aWZpY2F0aW9uQ29sb3IgfCBCcmFuZENvbG9yIHwgJ21lZGl1bScgfCAnd2hpdGUnIHwgJ2RhcmsnIHwgJ2xpZ2h0JyB8ICdzZW1pLWxpZ2h0JztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IF9jc3NDbGFzcygpIHtcbiAgICByZXR1cm4gW3RoaXMudGhlbWVDb2xvciwgdGhpcy5zaXplXS5maWx0ZXIoKGNzc0NsYXNzKSA9PiAhIWNzc0NsYXNzKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImF2YXRhclwiIFtuZ0NsYXNzXT1cInsgb3ZlcmxheTogb3ZlcmxheSwgc3Ryb2tlOiBzdHJva2UgfVwiPlxuICA8aW1nICpuZ0lmPVwiaW1hZ2VTcmNcIiBbc3JjXT1cImltYWdlU3JjXCIgW2F0dHIuYWx0XT1cImFsdFRleHRcIiAvPlxuICA8bmctY29udGVudCAqbmdJZj1cIiF0ZXh0XCIgc2VsZWN0PVwia2lyYnktaWNvblwiPjwvbmctY29udGVudD5cbiAgPHNwYW4gY2xhc3M9XCJhdmF0YXItdGV4dFwiICpuZ0lmPVwidGV4dFwiPnt7IHRleHQgfX08L3NwYW4+XG48L2Rpdj5cbjxuZy1jb250ZW50IHNlbGVjdD1cImtpcmJ5LWJhZGdlXCI+PC9uZy1jb250ZW50PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2F2YXRhci9zcmMvYXZhdGFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uL2F2YXRhci9zcmMvYXZhdGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxZQUFZLEVBQ1osV0FBVyxFQUNYLEtBQUssRUFDTCxNQUFNLEdBQ1AsTUFBTSxlQUFlLENBQUM7OztBQUl2QixNQUFNLENBQU4sSUFBWSxVQUtYO0FBTEQsV0FBWSxVQUFVO0lBQ3BCLHVCQUFTLENBQUE7SUFDVCx1QkFBUyxDQUFBO0lBQ1QsdUJBQVMsQ0FBQTtJQUNULHVCQUFTLENBQUE7QUFDWCxDQUFDLEVBTFcsVUFBVSxLQUFWLFVBQVUsUUFLckI7QUFVRCxNQUFNLE9BQU8sZUFBZTtJQVI1QjtRQWNXLFNBQUksR0FBaUMsVUFBVSxDQUFDLEVBQUUsQ0FBQztRQUk1RCxlQUFVLEdBQTZCLElBQUksWUFBWSxFQUFFLENBQUM7S0FVM0Q7SUFSQyxJQUNJLFNBQVM7UUFDWCxPQUFPLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDdkUsQ0FBQztJQUVELFlBQVksQ0FBQyxNQUFrQjtRQUM3QixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUMvQixDQUFDO2lJQW5CVSxlQUFlO3FIQUFmLGVBQWUsc1RDM0I1QixtWEFNQSx1Z0dEZVksWUFBWTs7MkZBTVgsZUFBZTtrQkFSM0IsU0FBUztpQ0FDSSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUMsWUFDYixjQUFjLG1CQUdQLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFFTixVQUFVO3NCQURULEtBQUs7Z0JBR04sVUFBVTtzQkFEVCxNQUFNO2dCQUlILFNBQVM7c0JBRFosV0FBVzt1QkFBQyxPQUFPIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBCcmFuZENvbG9yLCBOb3RpZmljYXRpb25Db2xvciB9IGZyb20gJ0BraXJieWRlc2lnbi9jb3JlJztcblxuZXhwb3J0IGVudW0gQXZhdGFyU2l6ZSB7XG4gIFhTID0gJ3hzJyxcbiAgU00gPSAnc20nLFxuICBNRCA9ICdtZCcsXG4gIExHID0gJ2xnJyxcbn1cblxuQENvbXBvbmVudCh7XG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxuICBzZWxlY3RvcjogJ2tpcmJ5LWF2YXRhcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hdmF0YXIuY29tcG9uZW50LnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIEF2YXRhckNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIGltYWdlU3JjOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGFsdFRleHQ6IHN0cmluZztcbiAgQElucHV0KCkgc3Ryb2tlOiBib29sZWFuO1xuICBASW5wdXQoKSB0ZXh0OiBzdHJpbmc7XG4gIEBJbnB1dCgpIG92ZXJsYXk6IGJvb2xlYW47XG4gIEBJbnB1dCgpIHNpemU6IEF2YXRhclNpemUgfCBgJHtBdmF0YXJTaXplfWAgPSBBdmF0YXJTaXplLlNNO1xuICBASW5wdXQoKVxuICB0aGVtZUNvbG9yOiBOb3RpZmljYXRpb25Db2xvciB8IEJyYW5kQ29sb3IgfCAnbWVkaXVtJyB8ICd3aGl0ZScgfCAnZGFyaycgfCAnbGlnaHQnIHwgJ3NlbWktbGlnaHQnO1xuICBAT3V0cHV0KClcbiAgaW1hZ2VFcnJvcjogRXZlbnRFbWl0dGVyPEVycm9yRXZlbnQ+ID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MnKVxuICBnZXQgX2Nzc0NsYXNzKCkge1xuICAgIHJldHVybiBbdGhpcy50aGVtZUNvbG9yLCB0aGlzLnNpemVdLmZpbHRlcigoY3NzQ2xhc3MpID0+ICEhY3NzQ2xhc3MpO1xuICB9XG5cbiAgb25JbWFnZUVycm9yKCRldmVudDogRXJyb3JFdmVudCkge1xuICAgIHRoaXMuaW1hZ2VFcnJvci5lbWl0KCRldmVudCk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJhdmF0YXJcIiBbbmdDbGFzc109XCJ7IG92ZXJsYXk6IG92ZXJsYXksIHN0cm9rZTogc3Ryb2tlIH1cIj5cbiAgPGltZyAqbmdJZj1cImltYWdlU3JjXCIgW3NyY109XCJpbWFnZVNyY1wiIFthdHRyLmFsdF09XCJhbHRUZXh0XCIgKGVycm9yKT1cIm9uSW1hZ2VFcnJvcigkZXZlbnQpXCIgLz5cbiAgPG5nLWNvbnRlbnQgKm5nSWY9XCIhdGV4dFwiIHNlbGVjdD1cImtpcmJ5LWljb25cIj48L25nLWNvbnRlbnQ+XG4gIDxzcGFuIGNsYXNzPVwiYXZhdGFyLXRleHRcIiAqbmdJZj1cInRleHRcIj57eyB0ZXh0IH19PC9zcGFuPlxuPC9kaXY+XG48bmctY29udGVudCBzZWxlY3Q9XCJraXJieS1iYWRnZVwiPjwvbmctY29udGVudD5cbiJdfQ==

package/esm2022/badge/badge.component.mjs

@@ -9,10 +9,10 @@ export class BadgeComponent {
     constructor() {
         this.size = 'md';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.3", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: BadgeComponent, isStandalone: true, selector: "kirby-badge", inputs: { text: "text", size: "size" }, host: { properties: { "class": "this.size" } }, hostDirectives: [{ directive: i1.ThemeColorDirective, inputs: ["themeColor", "themeColor"] }], ngImport: i0, template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonBadge, selector: "ion-badge", inputs: ["color", "mode"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.3", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-badge', standalone: true, imports: [CommonModule, IonBadge], hostDirectives: [{ directive: ThemeColorDirective, inputs: ['themeColor'] }], template: "<ion-badge>\n  <span *ngIf=\"size === 'sm'\"></span>\n  <ng-content *ngIf=\"!text && size === 'md'\"></ng-content>\n  <ng-container *ngIf=\"text && size === 'md'\">{{ text }}</ng-container>\n</ion-badge>\n", styles: [":host{position:var(--kirby-badge-position, relative);left:var(--kirby-badge-left, auto);right:var(--kirby-badge-right, auto);top:var(--kirby-badge-top, auto);z-index:var(--kirby-badge-z-index, auto);font-size:10px;line-height:1}:host ion-badge{--background: var(--kirby-badge-background-color, var(--kirby-white));--color: var(--kirby-badge-color, var(--kirby-white-contrast));box-sizing:border-box;border-radius:8px;font-size:inherit;position:relative;box-shadow:var(--kirby-badge-elevation, none)}:host ion-badge ::ng-deep>kirby-icon{--kirby-icon-font-size: 16px;position:absolute;top:0;left:0}:host(.sm) ion-badge{padding:initial;min-height:initial;min-width:initial;height:8px;width:8px}:host(.md) ion-badge{--padding-top: 3px;--padding-end: 5px;--padding-bottom: 3px;--padding-start: 5px;min-width:16px;min-height:16px}:host(.success) ion-badge{--background: var(--kirby-success);--color: var(--kirby-badge-color, var(--kirby-success-contrast))}:host(.warning) ion-badge{--background: var(--kirby-warning);--color: var(--kirby-badge-color, var(--kirby-warning-contrast))}:host(.danger) ion-badge{--background: var(--kirby-danger);--color: var(--kirby-badge-color, var(--kirby-text-color-white))}:host(.default) ion-badge,:host(.white) ion-badge{--kirby-badge-elevation: 0 20px 30px -15px rgb(28 28 28 / 30%), 0 0 5px 0 rgb(28 28 28 / 12%)}\n"] }]
         }], propDecorators: { text: [{