@kirbydesign/designsystem 8.2.0-rc.2 → 8.2.0

package/fesm2015/kirbydesign-designsystem-toggle-button.mjs

@@ -47,4 +47,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ToggleButtonComponent, ToggleButtonModule };
 //# sourceMappingURL=kirbydesign-designsystem-toggle-button.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-toggle-button.mjs.map

package/fesm2015/kirbydesign-designsystem-toggle.mjs

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

package/fesm2015/kirbydesign-designsystem-types.mjs

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

package/fesm2015/kirbydesign-designsystem.mjs

@@ -750,4 +750,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { KirbyBadge as BadgeComponent, KeyHandlerDirective, KirbyBadgeModule, KirbyExperimentalModule, KirbyModule, ModalRouterLinkDirective, PageLocalNavigationComponent, SegmentedControlComponent, SegmentedControlMode };
 //# sourceMappingURL=kirbydesign-designsystem.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem.mjs.map

package/fesm2020/kirbydesign-designsystem-accordion.mjs

@@ -92,4 +92,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { AccordionDirective, AccordionItemComponent, AccordionModule };
 //# sourceMappingURL=kirbydesign-designsystem-accordion.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-accordion.mjs.map

package/fesm2020/kirbydesign-designsystem-action-group.mjs

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, ElementRef, Component, ChangeDetectionStrategy, Optional, Inject, Input, HostBinding, ContentChildren, ViewChild } from '@angular/core';
+import { InjectionToken, ElementRef, Component, ChangeDetectionStrategy, Optional, Inject, Input, ContentChildren, ViewChild, HostBinding } from '@angular/core';
 import { ButtonComponent } from '@kirbydesign/designsystem/button';
 import * as i1 from '@kirbydesign/designsystem/dropdown';
 import { DropdownComponent, DropdownModule } from '@kirbydesign/designsystem/dropdown';
@@ -10,10 +10,12 @@ class ActionGroupComponent {
     constructor(renderer, config) {
         this.renderer = renderer;
         this.config = config;
-        this.placement = 'right';
+        this.align = 'end';
         this._collapsedActions = [];
         this._isResizeable = false;
-        this._nonCollapsibleVisibleActions = 2;
+    }
+    get _align() {
+        return 'align-' + this.align;
     }
     ngAfterContentInit() {
         if (this.config) {
@@ -27,22 +29,19 @@ class ActionGroupComponent {
             this.initializeCollapsing();
         }
     }
-    onDropdownActionSelect() {
-        const selectedIndex = this.dropdown.selectedIndex;
-        const selectedAction = this.hiddenButtons[selectedIndex];
+    onActionSelect(action) {
         // Dropdown should not persist selected item, we want it to be re-selectable
         this.dropdown.selectedIndex = -1;
-        if (selectedAction) {
-            const event = new PointerEvent('click', {
-                bubbles: true,
-                cancelable: true,
-                view: window,
-            });
-            selectedAction.dispatchEvent(event);
-        }
+        const event = new PointerEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+        });
+        action.button.dispatchEvent(event);
     }
     initializeCollapsing() {
-        if (this.buttonElements.length <= this._nonCollapsibleVisibleActions)
+        const collapseThreshold = 2;
+        if (this.buttonElements.length <= collapseThreshold)
             return;
         this.moveButtons();
         this.populateDropdown();
@@ -59,21 +58,18 @@ class ActionGroupComponent {
         this._isCollapsed = hasHiddenButtons;
     }
     populateDropdown() {
-        /*
-         * This function extracts the button text of all hidden buttons
-         * and updates the array used to populate the dropdown with items.
-         * It also maps the extracted text to the actual button element, for use when
-         * firing the matching buttons click-event in onDropdownActionSelect
-         */
-        this.hiddenButtons = Array.from(this.hiddenLayer.nativeElement.children);
-        this._collapsedActions = this.hiddenButtons.map((button) => button.textContent.trim());
+        const hiddenButtons = Array.from(this.hiddenLayer.nativeElement.children);
+        this._collapsedActions = hiddenButtons.map((button) => ({
+            button,
+            text: button.textContent.trim(),
+        }));
     }
 }
 /** @nocollapse */ ActionGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ActionGroupComponent, deps: [{ token: i0.Renderer2 }, { token: ACTIONGROUP_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ActionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", emphasizeActions: "emphasizeActions", placement: "placement" }, host: { properties: { "class": "this.placement", "class.is-collapsed": "this._isCollapsed", "class.is-resizeable": "this._isResizeable" } }, 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: "dropdown", first: true, predicate: DropdownComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n  [items]=\"_collapsedActions\"\n  [usePopover]=\"true\"\n  [_isMoreMenu]=\"true\"\n  popout=\"left\"\n  (change)=\"onDropdownActionSelect()\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;overflow:hidden}:host(.right){justify-content:flex-end}:host(.right) .hidden-layer{order:-1}:host(.is-collapsed) kirby-dropdown{display:inline-block}.hidden-layer{display:none;visibility:hidden}:host(.is-resizeable) .hidden-layer{display:flex;flex-direction:row;justify-content:flex-end}kirby-dropdown{margin:4px;display:none;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i1.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover", "_isMoreMenu"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ActionGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ActionGroupComponent, isStandalone: true, selector: "kirby-action-group", inputs: { visibleActions: "visibleActions", emphasizeActions: "emphasizeActions", align: "align" }, host: { properties: { "class.is-collapsed": "this._isCollapsed", "class.is-resizeable": "this._isResizeable", "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: "dropdown", first: true, predicate: DropdownComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n  [items]=\"_collapsedActions\"\n  [usePopover]=\"true\"\n  [_isMoreMenu]=\"true\"\n  popout=\"left\"\n  (change)=\"onActionSelect($event)\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;overflow:hidden}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}:host(.is-resizeable) .hidden-layer{display:flex;flex-direction:row;justify-content:flex-end}kirby-dropdown{margin:4px;display:none;z-index:1}:host(.is-collapsed) kirby-dropdown{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i1.DropdownComponent, selector: "kirby-dropdown", inputs: ["items", "selectedIndex", "focusedIndex", "itemTextProperty", "placeholder", "popout", "attentionLevel", "expand", "disabled", "hasError", "size", "tabindex", "usePopover", "_isMoreMenu"], outputs: ["change"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ActionGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-action-group', standalone: true, imports: [CommonModule, ButtonComponent, DropdownModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n  [items]=\"_collapsedActions\"\n  [usePopover]=\"true\"\n  [_isMoreMenu]=\"true\"\n  popout=\"left\"\n  (change)=\"onDropdownActionSelect()\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;overflow:hidden}:host(.right){justify-content:flex-end}:host(.right) .hidden-layer{order:-1}:host(.is-collapsed) kirby-dropdown{display:inline-block}.hidden-layer{display:none;visibility:hidden}:host(.is-resizeable) .hidden-layer{display:flex;flex-direction:row;justify-content:flex-end}kirby-dropdown{margin:4px;display:none;z-index:1}\n"] }]
+            args: [{ selector: 'kirby-action-group', standalone: true, imports: [CommonModule, ButtonComponent, DropdownModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n  [items]=\"_collapsedActions\"\n  [usePopover]=\"true\"\n  [_isMoreMenu]=\"true\"\n  popout=\"left\"\n  (change)=\"onActionSelect($event)\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n", styles: [":host{display:flex;position:relative;overflow:hidden}:host(.align-end){justify-content:flex-end}:host(.align-end) .hidden-layer{order:-1}.hidden-layer{display:none;visibility:hidden}:host(.is-resizeable) .hidden-layer{display:flex;flex-direction:row;justify-content:flex-end}kirby-dropdown{margin:4px;display:none;z-index:1}:host(.is-collapsed) kirby-dropdown{display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -83,10 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }], emphasizeActions: [{
                 type: Input
-            }], placement: [{
-                type: HostBinding,
-                args: ['class']
-            }, {
+            }], align: [{
                 type: Input
             }], buttonElements: [{
                 type: ContentChildren,
@@ -106,6 +99,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
             }], _isResizeable: [{
                 type: HostBinding,
                 args: ['class.is-resizeable']
+            }], _align: [{
+                type: HostBinding,
+                args: ['class']
             }] } });
 
 /**
@@ -114,4 +110,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ACTIONGROUP_CONFIG, ActionGroupComponent };
 //# sourceMappingURL=kirbydesign-designsystem-action-group.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-action-group.mjs.map

package/fesm2020/kirbydesign-designsystem-action-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../../../libs/designsystem/action-group/src/action-group.component.ts","../../../../libs/designsystem/action-group/src/action-group.component.html","../../../../libs/designsystem/action-group/src/kirbydesign-designsystem-action-group.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  HostBinding,\n  Inject,\n  InjectionToken,\n  Input,\n  Optional,\n  QueryList,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { DropdownComponent, DropdownModule } from '@kirbydesign/designsystem/dropdown';\n\nexport type ActionGroupConfig = {\n  isResizable?: boolean;\n  isCondensed?: boolean;\n  visibleActions?: number;\n};\nexport const ACTIONGROUP_CONFIG = new InjectionToken<ActionGroupConfig>('action-group.config');\n\n@Component({\n  selector: 'kirby-action-group',\n  standalone: true,\n  imports: [CommonModule, ButtonComponent, DropdownModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './action-group.component.html',\n  styleUrls: ['./action-group.component.scss'],\n})\nexport class ActionGroupComponent implements AfterContentInit {\n  @Input() visibleActions?: number;\n\n  @Input() emphasizeActions?: boolean;\n\n  @HostBinding('class')\n  @Input()\n  placement: 'left' | 'right' = 'right';\n\n  @ContentChildren(ButtonComponent, { read: ElementRef }) private buttonElements?: QueryList<\n    ElementRef<HTMLButtonElement>\n  >;\n  @ContentChildren(ButtonComponent) private buttons?: QueryList<ButtonComponent>;\n  @ViewChild('hiddenLayer', { read: ElementRef, static: true })\n  private hiddenLayer!: ElementRef<HTMLElement>;\n  /*\n   * TEMPORARY MORE-MENU\n   * dropdown ViewChild is only used for temporary more-menu\n   */\n  @ViewChild(DropdownComponent) private dropdown!: DropdownComponent;\n\n  @HostBinding('class.is-collapsed')\n  _isCollapsed: boolean;\n  _collapsedActions: string[] = [];\n\n  @HostBinding('class.is-resizeable')\n  _isResizeable = false;\n\n  private _nonCollapsibleVisibleActions: number = 2;\n\n  private hiddenButtons: HTMLButtonElement[];\n\n  constructor(\n    private renderer: Renderer2,\n    @Optional() @Inject(ACTIONGROUP_CONFIG) private config: ActionGroupConfig\n  ) {}\n\n  ngAfterContentInit(): void {\n    if (this.config) {\n      this._isResizeable = this.config.isResizable;\n      this.visibleActions = this.config.visibleActions;\n      if (this.config.isCondensed) {\n        this.buttons?.forEach((button) => (button.showIconOnly = true));\n      }\n    }\n\n    if (this.visibleActions) {\n      this.initializeCollapsing();\n    }\n  }\n\n  onDropdownActionSelect() {\n    const selectedIndex = this.dropdown.selectedIndex;\n    const selectedAction = this.hiddenButtons[selectedIndex];\n\n    // Dropdown should not persist selected item, we want it to be re-selectable\n    this.dropdown.selectedIndex = -1;\n\n    if (selectedAction) {\n      const event = new PointerEvent('click', {\n        bubbles: true,\n        cancelable: true,\n        view: window,\n      });\n\n      selectedAction.dispatchEvent(event);\n    }\n  }\n\n  private initializeCollapsing() {\n    if (this.buttonElements.length <= this._nonCollapsibleVisibleActions) return;\n    this.moveButtons();\n    this.populateDropdown();\n    this.toggleDropdown();\n  }\n\n  private moveButtons() {\n    const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);\n    buttonsToHide.forEach((button) => {\n      this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);\n    });\n  }\n\n  private toggleDropdown() {\n    const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;\n    this._isCollapsed = hasHiddenButtons;\n  }\n\n  private populateDropdown() {\n    /*\n     * This function extracts the button text of all hidden buttons\n     * and updates the array used to populate the dropdown with items.\n     * It also maps the extracted text to the actual button element, for use when\n     * firing the matching buttons click-event in onDropdownActionSelect\n     */\n\n    this.hiddenButtons = Array.from(this.hiddenLayer.nativeElement.children) as HTMLButtonElement[];\n    this._collapsedActions = this.hiddenButtons.map((button) => button.textContent.trim());\n  }\n}\n","<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n  [items]=\"_collapsedActions\"\n  [usePopover]=\"true\"\n  [_isMoreMenu]=\"true\"\n  popout=\"left\"\n  (change)=\"onDropdownActionSelect()\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-action-group.mjs","sources":["../../../../libs/designsystem/action-group/src/action-group.component.ts","../../../../libs/designsystem/action-group/src/action-group.component.html","../../../../libs/designsystem/action-group/src/kirbydesign-designsystem-action-group.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChildren,\n  ElementRef,\n  HostBinding,\n  Inject,\n  InjectionToken,\n  Input,\n  Optional,\n  QueryList,\n  Renderer2,\n  ViewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@kirbydesign/designsystem/button';\nimport { DropdownComponent, DropdownModule } from '@kirbydesign/designsystem/dropdown';\n\nexport type ActionGroupConfig = {\n  isResizable?: boolean;\n  isCondensed?: boolean;\n  visibleActions?: number;\n};\nexport const ACTIONGROUP_CONFIG = new InjectionToken<ActionGroupConfig>('action-group.config');\n\ntype CollapsedAction = { button: HTMLButtonElement; text: string };\n\n@Component({\n  selector: 'kirby-action-group',\n  standalone: true,\n  imports: [CommonModule, ButtonComponent, DropdownModule],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './action-group.component.html',\n  styleUrls: ['./action-group.component.scss'],\n})\nexport class ActionGroupComponent implements AfterContentInit {\n  @Input() visibleActions?: number;\n\n  @Input() emphasizeActions?: boolean;\n\n  @Input()\n  align: 'start' | 'end' = 'end';\n\n  @ContentChildren(ButtonComponent, { read: ElementRef }) private buttonElements?: QueryList<\n    ElementRef<HTMLButtonElement>\n  >;\n  @ContentChildren(ButtonComponent) private buttons?: QueryList<ButtonComponent>;\n  @ViewChild('hiddenLayer', { read: ElementRef, static: true })\n  private hiddenLayer!: ElementRef<HTMLElement>;\n  /*\n   * TEMPORARY MORE-MENU\n   * dropdown ViewChild is only used for temporary more-menu\n   */\n  @ViewChild(DropdownComponent) private dropdown!: DropdownComponent;\n\n  @HostBinding('class.is-collapsed')\n  _isCollapsed: boolean;\n  _collapsedActions: CollapsedAction[] = [];\n\n  @HostBinding('class.is-resizeable')\n  _isResizeable = false;\n\n  @HostBinding('class')\n  get _align() {\n    return 'align-' + this.align;\n  }\n\n  constructor(\n    private renderer: Renderer2,\n    @Optional() @Inject(ACTIONGROUP_CONFIG) private config: ActionGroupConfig\n  ) {}\n\n  ngAfterContentInit(): void {\n    if (this.config) {\n      this._isResizeable = this.config.isResizable;\n      this.visibleActions = this.config.visibleActions;\n      if (this.config.isCondensed) {\n        this.buttons?.forEach((button) => (button.showIconOnly = true));\n      }\n    }\n\n    if (this.visibleActions) {\n      this.initializeCollapsing();\n    }\n  }\n\n  onActionSelect(action: CollapsedAction) {\n    // Dropdown should not persist selected item, we want it to be re-selectable\n    this.dropdown.selectedIndex = -1;\n\n    const event = new PointerEvent('click', {\n      bubbles: true,\n      cancelable: true,\n      view: window,\n    });\n\n    action.button.dispatchEvent(event);\n  }\n\n  private initializeCollapsing() {\n    const collapseThreshold = 2;\n    if (this.buttonElements.length <= collapseThreshold) return;\n\n    this.moveButtons();\n    this.populateDropdown();\n    this.toggleDropdown();\n  }\n\n  private moveButtons() {\n    const buttonsToHide = [...this.buttonElements].slice(this.visibleActions);\n    buttonsToHide.forEach((button) => {\n      this.renderer.appendChild(this.hiddenLayer.nativeElement, button.nativeElement);\n    });\n  }\n\n  private toggleDropdown() {\n    const hasHiddenButtons = this.hiddenLayer.nativeElement.childElementCount > 0;\n    this._isCollapsed = hasHiddenButtons;\n  }\n\n  private populateDropdown() {\n    const hiddenButtons = Array.from(\n      this.hiddenLayer.nativeElement.children\n    ) as HTMLButtonElement[];\n\n    this._collapsedActions = hiddenButtons.map((button) => ({\n      button,\n      text: button.textContent.trim(),\n    }));\n  }\n}\n","<ng-content select=\"button[kirby-button]\"></ng-content>\n\n<kirby-dropdown\n  [items]=\"_collapsedActions\"\n  [usePopover]=\"true\"\n  [_isMoreMenu]=\"true\"\n  popout=\"left\"\n  (change)=\"onActionSelect($event)\"\n></kirby-dropdown>\n\n<div class=\"hidden-layer\" #hiddenLayer></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/kirbydesign-designsystem-alert-experimental.mjs

@@ -155,4 +155,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { AlertExperimentalComponent, AlertExperimentalController, AlertExperimentalModule };
 //# sourceMappingURL=kirbydesign-designsystem-alert-experimental.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-alert-experimental.mjs.map

package/fesm2020/kirbydesign-designsystem-avatar.mjs

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

package/fesm2020/kirbydesign-designsystem-button.mjs

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

package/fesm2020/kirbydesign-designsystem-calendar.mjs

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

package/fesm2020/kirbydesign-designsystem-card.mjs

@@ -220,4 +220,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { CardAsButtonDirective, CardComponent, CardFooterComponent, CardHeaderComponent, CardModule };
 //# sourceMappingURL=kirbydesign-designsystem-card.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-card.mjs.map

package/fesm2020/kirbydesign-designsystem-chart.mjs

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

package/fesm2020/kirbydesign-designsystem-checkbox.mjs

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

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

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

package/fesm2020/kirbydesign-designsystem-divider.mjs

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

package/fesm2020/kirbydesign-designsystem-dropdown.mjs

@@ -707,4 +707,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { DropdownComponent, DropdownModule, KeyboardHandlerService, OpenState, VerticalDirection };
 //# sourceMappingURL=kirbydesign-designsystem-dropdown.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-dropdown.mjs.map

package/fesm2020/kirbydesign-designsystem-empty-state.mjs

@@ -69,4 +69,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { EmptyStateComponent, EmptyStateModule };
 //# sourceMappingURL=kirbydesign-designsystem-empty-state.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-empty-state.mjs.map

package/fesm2020/kirbydesign-designsystem-fab-sheet.mjs

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

package/fesm2020/kirbydesign-designsystem-flag.mjs

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

package/fesm2020/kirbydesign-designsystem-form-field.mjs

@@ -571,4 +571,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { AffixDirective, DateInputDirective, DecimalMaskDirective, FormFieldComponent, FormFieldMessageComponent, FormFieldModule, InputComponent, InputCounterComponent, InputSize, TextareaComponent };
 //# sourceMappingURL=kirbydesign-designsystem-form-field.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-form-field.mjs.map

package/fesm2020/kirbydesign-designsystem-grid.mjs

@@ -135,4 +135,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { BreakpointHelperService, GridCardConfiguration, GridComponent };
 //# sourceMappingURL=kirbydesign-designsystem-grid.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-grid.mjs.map

package/fesm2020/kirbydesign-designsystem-header.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Injector, TemplateRef, ElementRef, Component, ChangeDetectionStrategy, Optional, Inject, HostBinding, Input, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { Directive, Injector, TemplateRef, ElementRef, Component, ChangeDetectionStrategy, HostBinding, Input, ContentChild, ViewChild, NgModule } from '@angular/core';
 import { ACTIONGROUP_CONFIG } from '@kirbydesign/designsystem/action-group';
 import { AvatarComponent } from '@kirbydesign/designsystem/avatar';
 import { FlagComponent } from '@kirbydesign/designsystem/flag';
@@ -8,7 +8,6 @@ import { CommonModule } from '@angular/common';
 import * as i2 from '@kirbydesign/designsystem/shared';
 import { FitHeadingDirective } from '@kirbydesign/designsystem/shared';
 
-const HEADER_CONFIG = new InjectionToken('header.config');
 class HeaderActionsDirective {
 }
 /** @nocollapse */ HeaderActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -30,9 +29,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }] });
 class HeaderComponent {
-    constructor(injector, config) {
+    constructor(injector) {
         this.injector = injector;
-        this.config = config;
         this.emphasizeActions = false;
         this.title = null;
         this.value = null;
@@ -41,11 +39,6 @@ class HeaderComponent {
         this.subtitle2 = null;
     }
     ngOnInit() {
-        if (this.config) {
-            this.fitHeadingConfig = {
-                maxLines: this.config.titleMaxLines,
-            };
-        }
         this.actionGroupConfig = {
             isResizable: this.emphasizeActions,
             visibleActions: this.emphasizeActions ? undefined : 1,
@@ -59,6 +52,11 @@ class HeaderComponent {
             ],
             parent: this.injector,
         });
+        if (this.titleMaxLines > 0) {
+            this.fitHeadingConfig = {
+                maxLines: this.titleMaxLines,
+            };
+        }
     }
     ngAfterContentInit() {
         // If an avatar is present we default to centered layout - unless configured otherwise:
@@ -69,25 +67,13 @@ class HeaderComponent {
             this.actionGroupConfig.isCondensed = true;
         }
     }
-    ngOnChanges(changes) {
-        if (changes.titleMaxLines) {
-            this.fitHeadingConfig = {
-                maxLines: changes.titleMaxLines.currentValue,
-            };
-        }
-    }
 }
-/** @nocollapse */ HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }, { token: HEADER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2" }, host: { properties: { "class.centered": "this.centered" } }, queries: [{ propertyName: "avatar", first: true, predicate: AvatarComponent, descendants: true }, { propertyName: "flag", first: true, predicate: FlagComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: HeaderActionsDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customSectionTemplate", first: true, predicate: HeaderCustomSectionDirective, descendants: true, read: (TemplateRef) }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", first: true, predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!avatar\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value: -->\n    <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\">\n      {{ title }}\n    </h1>\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n    <!-- HACK: Render hidden title so actions get pushed down to align with value heading: -->  \n      <h1 *ngIf=\"!!title && !!value\" class=\"title hidden kirby-text-medium\" aria-hidden=\"true\">\n        {{ title }}\n      </h1>\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (min-width: 721px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;overflow:hidden}@media (min-width: 721px){.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}}:host(.centered){align-items:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 721px){:host(.centered) .container{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-self:stretch}:host(.centered) .title-container{grid-column-start:2}}.actions{margin:0 4px}@media (max-width: 720px){.actions{margin-top:24px}.actions:not(.emphasize){display:none}}.avatar,.flag,.title-container{padding:0 16px}.title-container{display:flex;flex-direction:column;overflow:hidden}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.title{margin-bottom:2px}.title.hidden{visibility:hidden;white-space:nowrap;max-width:100%;overflow:hidden}@media (max-width: 720px){.title.hidden{display:none}}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%;line-height:1}.subtitle1,.subtitle2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2" }, host: { properties: { "class.centered": "this.centered" } }, queries: [{ propertyName: "avatar", first: true, predicate: AvatarComponent, descendants: true }, { propertyName: "flag", first: true, predicate: FlagComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: HeaderActionsDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customSectionTemplate", first: true, predicate: HeaderCustomSectionDirective, descendants: true, read: (TemplateRef) }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", first: true, predicate: ["actionsElement"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div *ngIf=\"!!avatar\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value: -->\n    <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\">\n      {{ title }}\n    </h1>\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n    <!-- HACK: Render hidden title so actions get pushed down to align with value heading: -->  \n      <h1 *ngIf=\"!!title && !!value\" class=\"title hidden kirby-text-medium\" aria-hidden=\"true\">\n        {{ title }}\n      </h1>\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (min-width: 721px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;overflow:hidden}@media (min-width: 721px){.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}}:host(.centered){align-items:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 721px){:host(.centered) .container{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-self:stretch}:host(.centered) .title-container{grid-column-start:2}}.actions{margin:0 4px}@media (max-width: 720px){.actions{margin-top:24px}.actions:not(.emphasize){display:none}}.avatar,.flag,.title-container{padding:0 16px}.title-container{display:flex;flex-direction:column;overflow:hidden}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.title{margin-bottom:2px}.title.hidden{visibility:hidden;white-space:nowrap;max-width:100%;overflow:hidden}@media (max-width: 720px){.title.hidden{display:none}}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle1,.subtitle2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!avatar\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value: -->\n    <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\">\n      {{ title }}\n    </h1>\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n    <!-- HACK: Render hidden title so actions get pushed down to align with value heading: -->  \n      <h1 *ngIf=\"!!title && !!value\" class=\"title hidden kirby-text-medium\" aria-hidden=\"true\">\n        {{ title }}\n      </h1>\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (min-width: 721px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;overflow:hidden}@media (min-width: 721px){.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}}:host(.centered){align-items:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 721px){:host(.centered) .container{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-self:stretch}:host(.centered) .title-container{grid-column-start:2}}.actions{margin:0 4px}@media (max-width: 720px){.actions{margin-top:24px}.actions:not(.emphasize){display:none}}.avatar,.flag,.title-container{padding:0 16px}.title-container{display:flex;flex-direction:column;overflow:hidden}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.title{margin-bottom:2px}.title.hidden{visibility:hidden;white-space:nowrap;max-width:100%;overflow:hidden}@media (max-width: 720px){.title.hidden{display:none}}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%;line-height:1}.subtitle1,.subtitle2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.custom-section{margin-top:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [HEADER_CONFIG]
-                }] }]; }, propDecorators: { centered: [{
+            args: [{ selector: 'kirby-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!avatar\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value: -->\n    <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\">\n      {{ title }}\n    </h1>\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n    <!-- HACK: Render hidden title so actions get pushed down to align with value heading: -->  \n      <h1 *ngIf=\"!!title && !!value\" class=\"title hidden kirby-text-medium\" aria-hidden=\"true\">\n        {{ title }}\n      </h1>\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (min-width: 721px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;overflow:hidden}@media (min-width: 721px){.container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}}:host(.centered){align-items:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 721px){:host(.centered) .container{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-self:stretch}:host(.centered) .title-container{grid-column-start:2}}.actions{margin:0 4px}@media (max-width: 720px){.actions{margin-top:24px}.actions:not(.emphasize){display:none}}.avatar,.flag,.title-container{padding:0 16px}.title-container{display:flex;flex-direction:column;overflow:hidden}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.title{margin-bottom:2px}.title.hidden{visibility:hidden;white-space:nowrap;max-width:100%;overflow:hidden}@media (max-width: 720px){.title.hidden{display:none}}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle1,.subtitle2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.custom-section{margin-top:8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { centered: [{
                 type: HostBinding,
                 args: ['class.centered']
             }, {
@@ -145,6 +131,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { HEADER_CONFIG, HeaderActionsDirective, HeaderComponent, HeaderCustomSectionDirective, HeaderModule };
-//# sourceMappingURL=kirbydesign-designsystem-header.mjs.map
+export { HeaderActionsDirective, HeaderComponent, HeaderCustomSectionDirective, HeaderModule };
 //# sourceMappingURL=kirbydesign-designsystem-header.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"kirbydesign-designsystem-header.mjs","sources":["../../../../libs/designsystem/header/src/header.component.ts","../../../../libs/designsystem/header/src/header.component.html","../../../../libs/designsystem/header/src/header.module.ts","../../../../libs/designsystem/header/src/kirbydesign-designsystem-header.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  Directive,\n  ElementRef,\n  HostBinding,\n  Inject,\n  InjectionToken,\n  Injector,\n  Input,\n  OnChanges,\n  OnInit,\n  Optional,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { ACTIONGROUP_CONFIG, ActionGroupConfig } from '@kirbydesign/designsystem/action-group';\nimport { AvatarComponent } from '@kirbydesign/designsystem/avatar';\nimport { FlagComponent } from '@kirbydesign/designsystem/flag';\nimport type { FitHeadingConfig } from '@kirbydesign/designsystem/shared';\n\nexport type HeaderConfig = { titleMaxLines?: number };\nexport const HEADER_CONFIG = new InjectionToken<HeaderConfig>('header.config');\n\n@Directive({\n  selector: '[kirbyHeaderActions]',\n})\nexport class HeaderActionsDirective {}\n\n@Directive({\n  selector: '[kirbyHeaderCustomSection]',\n})\nexport class HeaderCustomSectionDirective {}\n\n@Component({\n  selector: 'kirby-header',\n  templateUrl: './header.component.html',\n  styleUrls: ['./header.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderComponent implements AfterContentInit, OnChanges, OnInit {\n  @HostBinding('class.centered')\n  @Input()\n  centered: boolean;\n\n  @Input() titleMaxLines: number;\n  @Input() emphasizeActions = false;\n\n  fitHeadingConfig: FitHeadingConfig;\n\n  @ContentChild(AvatarComponent)\n  avatar: AvatarComponent;\n\n  @ContentChild(FlagComponent)\n  flag: FlagComponent;\n\n  @ViewChild('titleElement', { read: ElementRef })\n  titleElement?: ElementRef<HTMLHeadingElement>;\n\n  @ViewChild('actionsElement', { read: ElementRef })\n  actionsElement?: ElementRef<HTMLDivElement>;\n\n  @ContentChild(HeaderActionsDirective, { read: TemplateRef<HeaderActionsDirective> })\n  actionsTemplate?: TemplateRef<HeaderActionsDirective>;\n\n  @ContentChild(HeaderCustomSectionDirective, { read: TemplateRef<HeaderCustomSectionDirective> })\n  customSectionTemplate?: TemplateRef<HeaderCustomSectionDirective>;\n\n  @Input() title: string = null;\n  @Input() value: string = null;\n  @Input() valueUnit: string = null;\n  @Input() subtitle1: string = null;\n  @Input() subtitle2: string = null;\n\n  _actionGroupInjector: Injector;\n\n  private actionGroupConfig: ActionGroupConfig;\n\n  constructor(\n    private injector: Injector,\n    @Optional() @Inject(HEADER_CONFIG) private config?: HeaderConfig\n  ) {}\n\n  ngOnInit(): void {\n    if (this.config) {\n      this.fitHeadingConfig = {\n        maxLines: this.config.titleMaxLines,\n      };\n    }\n\n    this.actionGroupConfig = {\n      isResizable: this.emphasizeActions,\n      visibleActions: this.emphasizeActions ? undefined : 1,\n    };\n\n    this._actionGroupInjector = Injector.create({\n      providers: [\n        {\n          provide: ACTIONGROUP_CONFIG,\n          useValue: this.actionGroupConfig,\n        },\n      ],\n      parent: this.injector,\n    });\n  }\n\n  ngAfterContentInit(): void {\n    // If an avatar is present we default to centered layout - unless configured otherwise:\n    if (this.avatar && this.centered === undefined) {\n      this.centered = true;\n    }\n\n    if (this.centered) {\n      this.actionGroupConfig.isCondensed = true;\n    }\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.titleMaxLines) {\n      this.fitHeadingConfig = {\n        maxLines: changes.titleMaxLines.currentValue,\n      };\n    }\n  }\n}\n","<div *ngIf=\"!!avatar\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value: -->\n    <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\">\n      {{ title }}\n    </h1>\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n    <!-- HACK: Render hidden title so actions get pushed down to align with value heading: -->  \n      <h1 *ngIf=\"!!title && !!value\" class=\"title hidden kirby-text-medium\" aria-hidden=\"true\">\n        {{ title }}\n      </h1>\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FitHeadingDirective } from '@kirbydesign/designsystem/shared';\n\nimport {\n  HeaderActionsDirective,\n  HeaderComponent,\n  HeaderCustomSectionDirective,\n} from './header.component';\n\nconst declarations = [HeaderComponent, HeaderActionsDirective, HeaderCustomSectionDirective];\n\n@NgModule({\n  declarations: declarations,\n  imports: [CommonModule, FitHeadingDirective],\n  exports: declarations,\n})\nexport class HeaderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kirbydesign-designsystem-header.mjs","sources":["../../../../libs/designsystem/header/src/header.component.ts","../../../../libs/designsystem/header/src/header.component.html","../../../../libs/designsystem/header/src/header.module.ts","../../../../libs/designsystem/header/src/kirbydesign-designsystem-header.ts"],"sourcesContent":["import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  ContentChild,\n  Directive,\n  ElementRef,\n  HostBinding,\n  Injector,\n  Input,\n  OnInit,\n  TemplateRef,\n  ViewChild,\n} from '@angular/core';\nimport { ACTIONGROUP_CONFIG, ActionGroupConfig } from '@kirbydesign/designsystem/action-group';\nimport { AvatarComponent } from '@kirbydesign/designsystem/avatar';\nimport { FlagComponent } from '@kirbydesign/designsystem/flag';\nimport type { FitHeadingConfig } from '@kirbydesign/designsystem/shared';\n\n@Directive({\n  selector: '[kirbyHeaderActions]',\n})\nexport class HeaderActionsDirective {}\n\n@Directive({\n  selector: '[kirbyHeaderCustomSection]',\n})\nexport class HeaderCustomSectionDirective {}\n\n@Component({\n  selector: 'kirby-header',\n  templateUrl: './header.component.html',\n  styleUrls: ['./header.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderComponent implements AfterContentInit, OnInit {\n  @HostBinding('class.centered')\n  @Input()\n  centered?: boolean;\n\n  @Input() titleMaxLines: number;\n  @Input() emphasizeActions = false;\n\n  fitHeadingConfig: FitHeadingConfig;\n\n  @ContentChild(AvatarComponent)\n  avatar: AvatarComponent;\n\n  @ContentChild(FlagComponent)\n  flag: FlagComponent;\n\n  @ViewChild('titleElement', { read: ElementRef })\n  titleElement?: ElementRef<HTMLHeadingElement>;\n\n  @ViewChild('actionsElement', { read: ElementRef })\n  actionsElement?: ElementRef<HTMLDivElement>;\n\n  @ContentChild(HeaderActionsDirective, { read: TemplateRef<HeaderActionsDirective> })\n  actionsTemplate?: TemplateRef<HeaderActionsDirective>;\n\n  @ContentChild(HeaderCustomSectionDirective, { read: TemplateRef<HeaderCustomSectionDirective> })\n  customSectionTemplate?: TemplateRef<HeaderCustomSectionDirective>;\n\n  @Input() title: string = null;\n  @Input() value: string = null;\n  @Input() valueUnit: string = null;\n  @Input() subtitle1: string = null;\n  @Input() subtitle2: string = null;\n\n  _actionGroupInjector: Injector;\n\n  private actionGroupConfig: ActionGroupConfig;\n\n  constructor(private injector: Injector) {}\n\n  ngOnInit(): void {\n    this.actionGroupConfig = {\n      isResizable: this.emphasizeActions,\n      visibleActions: this.emphasizeActions ? undefined : 1,\n    };\n\n    this._actionGroupInjector = Injector.create({\n      providers: [\n        {\n          provide: ACTIONGROUP_CONFIG,\n          useValue: this.actionGroupConfig,\n        },\n      ],\n      parent: this.injector,\n    });\n\n    if (this.titleMaxLines > 0) {\n      this.fitHeadingConfig = {\n        maxLines: this.titleMaxLines,\n      };\n    }\n  }\n\n  ngAfterContentInit(): void {\n    // If an avatar is present we default to centered layout - unless configured otherwise:\n    if (this.avatar && this.centered === undefined) {\n      this.centered = true;\n    }\n\n    if (this.centered) {\n      this.actionGroupConfig.isCondensed = true;\n    }\n  }\n}\n","<div *ngIf=\"!!avatar\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value: -->\n    <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\">\n      {{ title }}\n    </h1>\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n    <!-- HACK: Render hidden title so actions get pushed down to align with value heading: -->  \n      <h1 *ngIf=\"!!title && !!value\" class=\"title hidden kirby-text-medium\" aria-hidden=\"true\">\n        {{ title }}\n      </h1>\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FitHeadingDirective } from '@kirbydesign/designsystem/shared';\n\nimport {\n  HeaderActionsDirective,\n  HeaderComponent,\n  HeaderCustomSectionDirective,\n} from './header.component';\n\nconst declarations = [HeaderComponent, HeaderActionsDirective, HeaderCustomSectionDirective];\n\n@NgModule({\n  declarations: declarations,\n  imports: [CommonModule, FitHeadingDirective],\n  exports: declarations,\n})\nexport class HeaderModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2020/kirbydesign-designsystem-helpers-scss.mjs

@@ -13,4 +13,3 @@ ScssHelper.BREAKPOINT_CARD_L = 820;
 
 export { ScssHelper };
 //# sourceMappingURL=kirbydesign-designsystem-helpers-scss.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-helpers-scss.mjs.map

package/fesm2020/kirbydesign-designsystem-helpers.mjs

@@ -221,4 +221,3 @@ var KirbyAnimation;
 
 export { KirbyAnimation, LineClampHelper, PlatformService, UniqueIdGenerator, chartConfigHasType, deepCopy, elementHasAncestor, mergeDeep, mergeDeepAll };
 //# sourceMappingURL=kirbydesign-designsystem-helpers.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-helpers.mjs.map

package/fesm2020/kirbydesign-designsystem-icon.mjs

@@ -223,4 +223,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { IconComponent, IconModule, IconRegistryService, IconSize, defaultIcons, kirbyIconSettings };
 //# sourceMappingURL=kirbydesign-designsystem-icon.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-icon.mjs.map

package/fesm2020/kirbydesign-designsystem-item-group.mjs

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

package/fesm2020/kirbydesign-designsystem-item-sliding.mjs

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

package/fesm2020/kirbydesign-designsystem-item.mjs

@@ -97,4 +97,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ItemComponent, ItemModule, ItemSize, LabelComponent };
 //# sourceMappingURL=kirbydesign-designsystem-item.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-item.mjs.map

package/fesm2020/kirbydesign-designsystem-kirby-app.mjs

@@ -52,4 +52,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { AppComponent, KirbyAppModule };
 //# sourceMappingURL=kirbydesign-designsystem-kirby-app.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-kirby-app.mjs.map

package/fesm2020/kirbydesign-designsystem-kirby-ionic-module.mjs

@@ -34,4 +34,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { KirbyIonicModule };
 //# sourceMappingURL=kirbydesign-designsystem-kirby-ionic-module.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-kirby-ionic-module.mjs.map

package/fesm2020/kirbydesign-designsystem-list.mjs

@@ -665,4 +665,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { INFINITE_SCROLL_DEBOUNCE, InfiniteScrollDirective, ListComponent, ListExperimentalComponent, ListFooterDirective, ListHeaderComponent, ListHeaderDirective, ListHelper, ListItemColorDirective, ListItemComponent, ListItemTemplateDirective, ListModule, ListSectionHeaderComponent, ListSectionHeaderDirective };
 //# sourceMappingURL=kirbydesign-designsystem-list.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-list.mjs.map

package/fesm2020/kirbydesign-designsystem-loading-overlay.mjs

@@ -76,4 +76,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { LoadingOverlayComponent, LoadingOverlayService };
 //# sourceMappingURL=kirbydesign-designsystem-loading-overlay.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-loading-overlay.mjs.map

package/fesm2020/kirbydesign-designsystem-modal-v2.mjs

@@ -255,4 +255,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { KirbyModalModule, ModalV2Component, ModalV2Controller, ModalV2FooterComponent, ModalV2RoutingComponent, ModalV2WrapperComponent };
 //# sourceMappingURL=kirbydesign-designsystem-modal-v2.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-modal-v2.mjs.map

package/fesm2020/kirbydesign-designsystem-modal.mjs

@@ -1607,4 +1607,3 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 
 export { ActionSheetComponent, ActionSheetHelper, AlertComponent, AlertHelper, COMPONENT_PROPS, DrawerSupplementaryAction, Modal, ModalCompactWrapperComponent, ModalController, ModalElementComponent, ModalElementType, ModalElementsAdvertiser, ModalFooterComponent, ModalHelper, ModalNavigationService, ModalWrapperComponent };
 //# sourceMappingURL=kirbydesign-designsystem-modal.mjs.map
-//# sourceMappingURL=kirbydesign-designsystem-modal.mjs.map