@kirbydesign/designsystem 11.11.2 → 12.0.0

package/fesm2022/kirbydesign-designsystem-header.mjs

@@ -1,185 +1,425 @@
-import * as i0 from '@angular/core';
-import { Directive, EventEmitter, Injector, ElementRef, TemplateRef, Output, Input, ContentChild, ViewChild, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { Subject } from 'rxjs';
-import { ACTIONGROUP_CONFIG } from '@kirbydesign/designsystem/action-group';
-import { AvatarComponent } from '@kirbydesign/designsystem/avatar';
-import { FlagComponent } from '@kirbydesign/designsystem/flag';
-import { ProgressCircleComponent } from '@kirbydesign/designsystem/progress-circle';
-import { NgTemplateOutlet, CommonModule } from '@angular/common';
-import { FitHeadingDirective } from '@kirbydesign/designsystem/shared';
-
-class HeaderActionsDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: HeaderActionsDirective, isStandalone: true, selector: "[kirbyHeaderActions]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderActionsDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyHeaderActions]' }]
-        }] });
-class HeaderCustomSectionDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderCustomSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: HeaderCustomSectionDirective, isStandalone: true, selector: "[kirbyHeaderCustomSection]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderCustomSectionDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyHeaderCustomSection]' }]
-        }] });
-class HeaderTitleActionIconDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderTitleActionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: HeaderTitleActionIconDirective, isStandalone: true, selector: "[kirbyHeaderTitleActionIcon]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderTitleActionIconDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyHeaderTitleActionIcon]' }]
-        }] });
-class HeaderCustomFlagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderCustomFlagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.18", type: HeaderCustomFlagDirective, isStandalone: true, selector: "[kirbyHeaderCustomFlag]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderCustomFlagDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[kirbyHeaderCustomFlag]' }]
-        }] });
-class HeaderComponent {
-    get _subtitles1() {
-        return Array.isArray(this.subtitle1) ? this.subtitle1 : [this.subtitle1];
-    }
-    get _subtitles2() {
-        return Array.isArray(this.subtitle2) ? this.subtitle2 : [this.subtitle2];
-    }
-    onTitleClick(event) {
-        this.titleClick.emit(event);
-    }
-    constructor(injector) {
-        this.injector = injector;
-        this.emphasizeActions = false;
-        this.titleClick = new EventEmitter();
-        this.title$ = new Subject();
-    }
-    ngOnInit() {
-        this.actionGroupConfig = {
-            defaultVisibleActions: this.emphasizeActions ? undefined : 1,
-        };
-        this._actionGroupInjector = Injector.create({
-            providers: [
-                {
-                    provide: ACTIONGROUP_CONFIG,
-                    useValue: this.actionGroupConfig,
-                },
-            ],
-            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:
-        if (this.avatar && this.centered === undefined) {
-            this.centered = true;
-        }
-        if (this.centered) {
-            this.actionGroupConfig.isCondensed = true;
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.title) {
-            this.title$.next(changes.title.currentValue);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: HeaderComponent, isStandalone: true, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2", hasInteractiveTitle: "hasInteractiveTitle" }, outputs: { titleClick: "titleClick" }, host: { properties: { "class.centered": "this.centered" } }, queries: [{ propertyName: "avatar", first: true, predicate: AvatarComponent, descendants: true }, { propertyName: "progressCircle", first: true, predicate: ProgressCircleComponent, 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) }, { propertyName: "customFlagTemplate", first: true, predicate: HeaderCustomFlagDirective, descendants: true, read: (TemplateRef) }, { propertyName: "titleActionIconTemplate", first: true, predicate: HeaderTitleActionIconDirective, 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: "@if (!!avatar || !!progressCircle) {\n  <div class=\"avatar\">\n    <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n  </div>\n}\n\n@if (!!flag || !!customFlagTemplate) {\n  <div class=\"flag\">\n    @if (!!flag) {\n      <ng-content select=\"kirby-flag\"></ng-content>\n    }\n    <!-- Custom Content in Flag section: -->\n    @if (!!customFlagTemplate) {\n      <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"container\">\n  <!-- Title and value - title: -->\n  @if (!!title && !!value) {\n    <span\n      #titleElement\n      class=\"title kirby-text-medium\"\n      [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\"\n      [class.has-icon]=\"!!titleActionIconTemplate\"\n      (click)=\"onTitleClick($event)\"\n    >\n      {{ title }}\n      <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n    </span>\n  }\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    @if (!!title && !value) {\n      <span #titleElement class=\"title kirby-text-xlarge\" [kirbyFitHeading]=\"fitHeadingConfig\">\n        {{ title }}\n      </span>\n    }\n\n    <!-- Title and value - value: -->\n    @if (!!value) {\n      <span class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">\n        {{ value }}\n        @if (!!valueUnit) {\n          <span class=\"value-unit semi-dark-text\">{{ valueUnit }}</span>\n        }\n      </span>\n    }\n\n    <!-- Subtitles: -->\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    @if (!!customSectionTemplate) {\n      <div class=\"custom-section\">\n        <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n  <!-- Actions: -->\n  @if (!!actionsTemplate) {\n    <div #actionsElement class=\"actions\" [class.emphasize]=\"emphasizeActions\">\n      <ng-container\n        *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"\n      ></ng-container>\n    </div>\n  }\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  @if (!!subtitles) {\n    <div class=\"subtitle kirby-text-small\">\n      @for (subtitle of subtitles; track subtitle) {\n        <span>{{ subtitle }}</span>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media(max-width:767px){:host:has(>.avatar::ng-deep){margin-top:8px}}@media(min-width:768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>span.title{margin-bottom:0}@media(min-width:768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:24px}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-self:stretch;align-items:center}:host(.centered) .container>span.title{text-align:center}:host(.centered) .container>span.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media(min-width:768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>span.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:24px;margin-inline:8px}@media(max-width:767px){.actions:not(.emphasize){display:none}}@media(min-width:768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>span.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;width:100%;max-width:calc(100% - 32px)}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.flag .custom-flag{margin-block:4px}.title{margin-bottom:2px}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.title.kirby-text-xlarge{overflow-wrap:break-word}.value{display:flex;align-items:baseline;max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kirby-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, FitHeadingDirective], template: "@if (!!avatar || !!progressCircle) {\n  <div class=\"avatar\">\n    <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n  </div>\n}\n\n@if (!!flag || !!customFlagTemplate) {\n  <div class=\"flag\">\n    @if (!!flag) {\n      <ng-content select=\"kirby-flag\"></ng-content>\n    }\n    <!-- Custom Content in Flag section: -->\n    @if (!!customFlagTemplate) {\n      <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"container\">\n  <!-- Title and value - title: -->\n  @if (!!title && !!value) {\n    <span\n      #titleElement\n      class=\"title kirby-text-medium\"\n      [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\"\n      [class.has-icon]=\"!!titleActionIconTemplate\"\n      (click)=\"onTitleClick($event)\"\n    >\n      {{ title }}\n      <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n    </span>\n  }\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    @if (!!title && !value) {\n      <span #titleElement class=\"title kirby-text-xlarge\" [kirbyFitHeading]=\"fitHeadingConfig\">\n        {{ title }}\n      </span>\n    }\n\n    <!-- Title and value - value: -->\n    @if (!!value) {\n      <span class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">\n        {{ value }}\n        @if (!!valueUnit) {\n          <span class=\"value-unit semi-dark-text\">{{ valueUnit }}</span>\n        }\n      </span>\n    }\n\n    <!-- Subtitles: -->\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    @if (!!customSectionTemplate) {\n      <div class=\"custom-section\">\n        <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n  <!-- Actions: -->\n  @if (!!actionsTemplate) {\n    <div #actionsElement class=\"actions\" [class.emphasize]=\"emphasizeActions\">\n      <ng-container\n        *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"\n      ></ng-container>\n    </div>\n  }\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  @if (!!subtitles) {\n    <div class=\"subtitle kirby-text-small\">\n      @for (subtitle of subtitles; track subtitle) {\n        <span>{{ subtitle }}</span>\n      }\n    </div>\n  }\n</ng-template>\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media(max-width:767px){:host:has(>.avatar::ng-deep){margin-top:8px}}@media(min-width:768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>span.title{margin-bottom:0}@media(min-width:768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:24px}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-self:stretch;align-items:center}:host(.centered) .container>span.title{text-align:center}:host(.centered) .container>span.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media(min-width:768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>span.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:24px;margin-inline:8px}@media(max-width:767px){.actions:not(.emphasize){display:none}}@media(min-width:768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>span.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;width:100%;max-width:calc(100% - 32px)}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.flag .custom-flag{margin-block:4px}.title{margin-bottom:2px}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.title.kirby-text-xlarge{overflow-wrap:break-word}.value{display:flex;align-items:baseline;max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:8px}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { centered: [{
-                type: HostBinding,
-                args: ['class.centered']
-            }, {
-                type: Input
-            }], titleMaxLines: [{
-                type: Input
-            }], emphasizeActions: [{
-                type: Input
-            }], avatar: [{
-                type: ContentChild,
-                args: [AvatarComponent]
-            }], progressCircle: [{
-                type: ContentChild,
-                args: [ProgressCircleComponent]
-            }], flag: [{
-                type: ContentChild,
-                args: [FlagComponent]
-            }], titleElement: [{
-                type: ViewChild,
-                args: ['titleElement', { read: ElementRef }]
-            }], actionsElement: [{
-                type: ViewChild,
-                args: ['actionsElement', { read: ElementRef }]
-            }], actionsTemplate: [{
-                type: ContentChild,
-                args: [HeaderActionsDirective, { read: (TemplateRef) }]
-            }], customSectionTemplate: [{
-                type: ContentChild,
-                args: [HeaderCustomSectionDirective, { read: (TemplateRef) }]
-            }], customFlagTemplate: [{
-                type: ContentChild,
-                args: [HeaderCustomFlagDirective, {
-                        read: (TemplateRef),
-                    }]
-            }], titleActionIconTemplate: [{
-                type: ContentChild,
-                args: [HeaderTitleActionIconDirective, { read: TemplateRef }]
-            }], title: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], valueUnit: [{
-                type: Input
-            }], subtitle1: [{
-                type: Input
-            }], subtitle2: [{
-                type: Input
-            }], hasInteractiveTitle: [{
-                type: Input
-            }], titleClick: [{
-                type: Output
-            }] } });
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, Directive, ElementRef, EventEmitter, HostBinding, Injector, Input, NgModule, Output, TemplateRef, ViewChild } from "@angular/core";
+import { Subject } from "rxjs";
+import { ACTIONGROUP_CONFIG } from "@kirbydesign/designsystem/action-group";
+import { AvatarComponent } from "@kirbydesign/designsystem/avatar";
+import { FlagComponent } from "@kirbydesign/designsystem/flag";
+import { ProgressCircleComponent } from "@kirbydesign/designsystem/progress-circle";
+import { CommonModule, NgTemplateOutlet } from "@angular/common";
+import { FitHeadingDirective } from "@kirbydesign/designsystem/shared";
+var HeaderActionsDirective = class HeaderActionsDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HeaderActionsDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: HeaderActionsDirective,
+			isStandalone: true,
+			selector: "[kirbyHeaderActions]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeaderActionsDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyHeaderActions]" }]
+	}]
+});
+var HeaderCustomSectionDirective = class HeaderCustomSectionDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HeaderCustomSectionDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: HeaderCustomSectionDirective,
+			isStandalone: true,
+			selector: "[kirbyHeaderCustomSection]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeaderCustomSectionDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyHeaderCustomSection]" }]
+	}]
+});
+var HeaderTitleActionIconDirective = class HeaderTitleActionIconDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HeaderTitleActionIconDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: HeaderTitleActionIconDirective,
+			isStandalone: true,
+			selector: "[kirbyHeaderTitleActionIcon]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeaderTitleActionIconDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyHeaderTitleActionIcon]" }]
+	}]
+});
+var HeaderCustomFlagDirective = class HeaderCustomFlagDirective {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HeaderCustomFlagDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: HeaderCustomFlagDirective,
+			isStandalone: true,
+			selector: "[kirbyHeaderCustomFlag]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeaderCustomFlagDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirbyHeaderCustomFlag]" }]
+	}]
+});
+var HeaderComponent = class HeaderComponent {
+	get _subtitles1() {
+		return Array.isArray(this.subtitle1) ? this.subtitle1 : [this.subtitle1];
+	}
+	get _subtitles2() {
+		return Array.isArray(this.subtitle2) ? this.subtitle2 : [this.subtitle2];
+	}
+	onTitleClick(event) {
+		this.titleClick.emit(event);
+	}
+	constructor(injector) {
+		this.injector = injector;
+		this.emphasizeActions = false;
+		this.titleClick = new EventEmitter();
+		this.title$ = new Subject();
+	}
+	ngOnInit() {
+		this.actionGroupConfig = { defaultVisibleActions: this.emphasizeActions ? void 0 : 1 };
+		this._actionGroupInjector = Injector.create({
+			providers: [{
+				provide: ACTIONGROUP_CONFIG,
+				useValue: this.actionGroupConfig
+			}],
+			parent: this.injector
+		});
+		if (this.titleMaxLines > 0) this.fitHeadingConfig = { maxLines: this.titleMaxLines };
+	}
+	ngAfterContentInit() {
+		if (this.avatar && this.centered === void 0) this.centered = true;
+		if (this.centered) this.actionGroupConfig.isCondensed = true;
+	}
+	ngOnChanges(changes) {
+		if (changes.title) this.title$.next(changes.title.currentValue);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HeaderComponent,
+			deps: [{ token: i0.Injector }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: HeaderComponent,
+			isStandalone: true,
+			selector: "kirby-header",
+			inputs: {
+				centered: "centered",
+				titleMaxLines: "titleMaxLines",
+				emphasizeActions: "emphasizeActions",
+				title: "title",
+				value: "value",
+				valueUnit: "valueUnit",
+				subtitle1: "subtitle1",
+				subtitle2: "subtitle2",
+				hasInteractiveTitle: "hasInteractiveTitle"
+			},
+			outputs: { titleClick: "titleClick" },
+			host: { properties: { "class.centered": "this.centered" } },
+			queries: [
+				{
+					propertyName: "avatar",
+					first: true,
+					predicate: AvatarComponent,
+					descendants: true
+				},
+				{
+					propertyName: "progressCircle",
+					first: true,
+					predicate: ProgressCircleComponent,
+					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
+				},
+				{
+					propertyName: "customFlagTemplate",
+					first: true,
+					predicate: HeaderCustomFlagDirective,
+					descendants: true,
+					read: TemplateRef
+				},
+				{
+					propertyName: "titleActionIconTemplate",
+					first: true,
+					predicate: HeaderTitleActionIconDirective,
+					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: "@if (!!avatar || !!progressCircle) {\n  <div class=\"avatar\">\n    <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n  </div>\n}\n\n@if (!!flag || !!customFlagTemplate) {\n  <div class=\"flag\">\n    @if (!!flag) {\n      <ng-content select=\"kirby-flag\"></ng-content>\n    }\n    <!-- Custom Content in Flag section: -->\n    @if (!!customFlagTemplate) {\n      <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"container\">\n  <!-- Title and value - title: -->\n  @if (!!title && !!value) {\n    <span\n      #titleElement\n      class=\"title kirby-text-medium\"\n      [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\"\n      [class.has-icon]=\"!!titleActionIconTemplate\"\n      (click)=\"onTitleClick($event)\"\n    >\n      {{ title }}\n      <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n    </span>\n  }\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    @if (!!title && !value) {\n      <span #titleElement class=\"title kirby-text-xlarge\" [kirbyFitHeading]=\"fitHeadingConfig\">\n        {{ title }}\n      </span>\n    }\n\n    <!-- Title and value - value: -->\n    @if (!!value) {\n      <span class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">\n        {{ value }}\n        @if (!!valueUnit) {\n          <span class=\"value-unit semi-dark-text\">{{ valueUnit }}</span>\n        }\n      </span>\n    }\n\n    <!-- Subtitles: -->\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    @if (!!customSectionTemplate) {\n      <div class=\"custom-section\">\n        <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n  <!-- Actions: -->\n  @if (!!actionsTemplate) {\n    <div #actionsElement class=\"actions\" [class.emphasize]=\"emphasizeActions\">\n      <ng-container\n        *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"\n      ></ng-container>\n    </div>\n  }\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  @if (!!subtitles) {\n    <div class=\"subtitle kirby-text-small\">\n      @for (subtitle of subtitles; track subtitle) {\n        <span>{{ subtitle }}</span>\n      }\n    </div>\n  }\n</ng-template>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:column;margin-top:var(--kirby-spacing-s);margin-bottom:var(--kirby-spacing-l)}@media(max-width:767px){:host:has(>.avatar::ng-deep){margin-top:var(--kirby-spacing-xxs)}}@media(min-width:768px){:host{margin-top:var(--kirby-spacing-m)}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>span.title{margin-bottom:0}@media(min-width:768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:calc(var(--kirby-spacing-xxl) - var(--kirby-spacing-s) - var(--kirby-spacing-xxs))}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-self:stretch;align-items:center}:host(.centered) .container>span.title{text-align:center}:host(.centered) .container>span.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media(min-width:768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>span.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:var(--kirby-spacing-m);margin-inline:var(--kirby-spacing-xxs)}@media(max-width:767px){.actions:not(.emphasize){display:none}}@media(min-width:768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>span.title{margin-inline:var(--kirby-spacing-s)}.title-container{display:flex;flex-direction:column;overflow:hidden;width:100%;max-width:calc(100% - 2 * var(--kirby-spacing-s))}.avatar{margin-bottom:var(--kirby-spacing-s)}.flag{margin-bottom:var(--kirby-spacing-xxxs)}.flag .custom-flag{margin-block:var(--kirby-spacing-xxxs)}.title{margin-bottom:var(--kirby-spacing-xxxxs)}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.title.kirby-text-xlarge{overflow-wrap:break-word}.value{display:flex;align-items:baseline;max-width:100%;margin-bottom:var(--kirby-spacing-xxxs)}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:var(--kirby-spacing-xxxs);font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:var(--kirby-spacing-xxs)}\n"],
+			dependencies: [{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			}, {
+				kind: "directive",
+				type: FitHeadingDirective,
+				selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading],[kirbyFitHeading]",
+				inputs: ["kirbyFitHeading"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-header",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [NgTemplateOutlet, FitHeadingDirective],
+			template: "@if (!!avatar || !!progressCircle) {\n  <div class=\"avatar\">\n    <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n  </div>\n}\n\n@if (!!flag || !!customFlagTemplate) {\n  <div class=\"flag\">\n    @if (!!flag) {\n      <ng-content select=\"kirby-flag\"></ng-content>\n    }\n    <!-- Custom Content in Flag section: -->\n    @if (!!customFlagTemplate) {\n      <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n}\n\n<div class=\"container\">\n  <!-- Title and value - title: -->\n  @if (!!title && !!value) {\n    <span\n      #titleElement\n      class=\"title kirby-text-medium\"\n      [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\"\n      [class.has-icon]=\"!!titleActionIconTemplate\"\n      (click)=\"onTitleClick($event)\"\n    >\n      {{ title }}\n      <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n    </span>\n  }\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    @if (!!title && !value) {\n      <span #titleElement class=\"title kirby-text-xlarge\" [kirbyFitHeading]=\"fitHeadingConfig\">\n        {{ title }}\n      </span>\n    }\n\n    <!-- Title and value - value: -->\n    @if (!!value) {\n      <span class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">\n        {{ value }}\n        @if (!!valueUnit) {\n          <span class=\"value-unit semi-dark-text\">{{ valueUnit }}</span>\n        }\n      </span>\n    }\n\n    <!-- Subtitles: -->\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n    ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    @if (!!customSectionTemplate) {\n      <div class=\"custom-section\">\n        <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n      </div>\n    }\n  </div>\n  <!-- Actions: -->\n  @if (!!actionsTemplate) {\n    <div #actionsElement class=\"actions\" [class.emphasize]=\"emphasizeActions\">\n      <ng-container\n        *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"\n      ></ng-container>\n    </div>\n  }\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  @if (!!subtitles) {\n    <div class=\"subtitle kirby-text-small\">\n      @for (subtitle of subtitles; track subtitle) {\n        <span>{{ subtitle }}</span>\n      }\n    </div>\n  }\n</ng-template>\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:flex;flex-direction:column;margin-top:var(--kirby-spacing-s);margin-bottom:var(--kirby-spacing-l)}@media(max-width:767px){:host:has(>.avatar::ng-deep){margin-top:var(--kirby-spacing-xxs)}}@media(min-width:768px){:host{margin-top:var(--kirby-spacing-m)}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>span.title{margin-bottom:0}@media(min-width:768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:calc(var(--kirby-spacing-xxl) - var(--kirby-spacing-s) - var(--kirby-spacing-xxs))}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-self:stretch;align-items:center}:host(.centered) .container>span.title{text-align:center}:host(.centered) .container>span.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media(min-width:768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>span.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:var(--kirby-spacing-m);margin-inline:var(--kirby-spacing-xxs)}@media(max-width:767px){.actions:not(.emphasize){display:none}}@media(min-width:768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>span.title{margin-inline:var(--kirby-spacing-s)}.title-container{display:flex;flex-direction:column;overflow:hidden;width:100%;max-width:calc(100% - 2 * var(--kirby-spacing-s))}.avatar{margin-bottom:var(--kirby-spacing-s)}.flag{margin-bottom:var(--kirby-spacing-xxxs)}.flag .custom-flag{margin-block:var(--kirby-spacing-xxxs)}.title{margin-bottom:var(--kirby-spacing-xxxxs)}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.title.kirby-text-xlarge{overflow-wrap:break-word}.value{display:flex;align-items:baseline;max-width:100%;margin-bottom:var(--kirby-spacing-xxxs)}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:var(--kirby-spacing-xxxs);font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:var(--kirby-spacing-xxs)}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.Injector }],
+	propDecorators: {
+		centered: [{
+			type: HostBinding,
+			args: ["class.centered"]
+		}, { type: Input }],
+		titleMaxLines: [{ type: Input }],
+		emphasizeActions: [{ type: Input }],
+		avatar: [{
+			type: ContentChild,
+			args: [AvatarComponent]
+		}],
+		progressCircle: [{
+			type: ContentChild,
+			args: [ProgressCircleComponent]
+		}],
+		flag: [{
+			type: ContentChild,
+			args: [FlagComponent]
+		}],
+		titleElement: [{
+			type: ViewChild,
+			args: ["titleElement", { read: ElementRef }]
+		}],
+		actionsElement: [{
+			type: ViewChild,
+			args: ["actionsElement", { read: ElementRef }]
+		}],
+		actionsTemplate: [{
+			type: ContentChild,
+			args: [HeaderActionsDirective, { read: TemplateRef }]
+		}],
+		customSectionTemplate: [{
+			type: ContentChild,
+			args: [HeaderCustomSectionDirective, { read: TemplateRef }]
+		}],
+		customFlagTemplate: [{
+			type: ContentChild,
+			args: [HeaderCustomFlagDirective, { read: TemplateRef }]
+		}],
+		titleActionIconTemplate: [{
+			type: ContentChild,
+			args: [HeaderTitleActionIconDirective, { read: TemplateRef }]
+		}],
+		title: [{ type: Input }],
+		value: [{ type: Input }],
+		valueUnit: [{ type: Input }],
+		subtitle1: [{ type: Input }],
+		subtitle2: [{ type: Input }],
+		hasInteractiveTitle: [{ type: Input }],
+		titleClick: [{ type: Output }]
+	}
+});
 const imports = [
-    HeaderComponent,
-    HeaderActionsDirective,
-    HeaderCustomSectionDirective,
-    HeaderTitleActionIconDirective,
-    HeaderCustomFlagDirective,
+	HeaderComponent,
+	HeaderActionsDirective,
+	HeaderCustomSectionDirective,
+	HeaderTitleActionIconDirective,
+	HeaderCustomFlagDirective
 ];
-class HeaderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.18", ngImport: i0, type: HeaderModule, imports: [CommonModule, FitHeadingDirective, HeaderComponent,
-            HeaderActionsDirective,
-            HeaderCustomSectionDirective,
-            HeaderTitleActionIconDirective,
-            HeaderCustomFlagDirective], exports: [HeaderComponent,
-            HeaderActionsDirective,
-            HeaderCustomSectionDirective,
-            HeaderTitleActionIconDirective,
-            HeaderCustomFlagDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: HeaderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, FitHeadingDirective, ...imports],
-                    exports: imports,
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var HeaderModule = class HeaderModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HeaderModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HeaderModule,
+			imports: [
+				CommonModule,
+				FitHeadingDirective,
+				HeaderComponent,
+				HeaderActionsDirective,
+				HeaderCustomSectionDirective,
+				HeaderTitleActionIconDirective,
+				HeaderCustomFlagDirective
+			],
+			exports: [
+				HeaderComponent,
+				HeaderActionsDirective,
+				HeaderCustomSectionDirective,
+				HeaderTitleActionIconDirective,
+				HeaderCustomFlagDirective
+			]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: HeaderModule,
+			imports: [CommonModule]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeaderModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				FitHeadingDirective,
+				...imports
+			],
+			exports: imports
+		}]
+	}]
+});
 export { HeaderActionsDirective, HeaderComponent, HeaderCustomFlagDirective, HeaderCustomSectionDirective, HeaderModule, HeaderTitleActionIconDirective };
-//# sourceMappingURL=kirbydesign-designsystem-header.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-header.mjs.map