@kirbydesign/designsystem 9.7.1 → 9.7.2-sb

package/fesm2022/kirbydesign-designsystem-header.mjs

@@ -11,40 +11,40 @@ import * as i2 from '@kirbydesign/designsystem/shared';
 import { FitHeadingDirective } from '@kirbydesign/designsystem/shared';
 
 class HeaderActionsDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HeaderActionsDirective, selector: "[kirbyHeaderActions]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: HeaderActionsDirective, selector: "[kirbyHeaderActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderActions]',
                 }]
         }] });
 class HeaderCustomSectionDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCustomSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HeaderCustomSectionDirective, selector: "[kirbyHeaderCustomSection]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderCustomSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: HeaderCustomSectionDirective, selector: "[kirbyHeaderCustomSection]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCustomSectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderCustomSectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderCustomSection]',
                 }]
         }] });
 class HeaderTitleActionIconDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderTitleActionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HeaderTitleActionIconDirective, selector: "[kirbyHeaderTitleActionIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderTitleActionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: HeaderTitleActionIconDirective, selector: "[kirbyHeaderTitleActionIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderTitleActionIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderTitleActionIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderTitleActionIcon]',
                 }]
         }] });
 class HeaderCustomFlagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCustomFlagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: HeaderCustomFlagDirective, selector: "[kirbyHeaderCustomFlag]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderCustomFlagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.10", type: HeaderCustomFlagDirective, selector: "[kirbyHeaderCustomFlag]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderCustomFlagDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderCustomFlagDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderCustomFlag]',
@@ -99,10 +99,10 @@ class HeaderComponent {
             this.title$.next(changes.title.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: HeaderComponent, 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: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\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 - value: -->\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    <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    <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      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":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>h1.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-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.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)>h1.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>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;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}.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%}.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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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 */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: HeaderComponent, 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: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\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 - value: -->\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    <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    <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      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":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>h1.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-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.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)>h1.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>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;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}.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%}.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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "17.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\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 - value: -->\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    <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    <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      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":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>h1.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-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.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)>h1.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>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;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}.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%}.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: [{
@@ -167,8 +167,8 @@ const declarations = [
     HeaderCustomFlagDirective,
 ];
 class HeaderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent,
             HeaderActionsDirective,
             HeaderCustomSectionDirective,
             HeaderTitleActionIconDirective,
@@ -177,9 +177,9 @@ class HeaderModule {
             HeaderCustomSectionDirective,
             HeaderTitleActionIconDirective,
             HeaderCustomFlagDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: declarations,

package/fesm2022/kirbydesign-designsystem-helpers.mjs

@@ -41,10 +41,10 @@ class PlatformService {
         const query = `(min-width: ${DesignTokenHelper.breakpoints.medium})`;
         return this.windowRef.nativeWindow.matchMedia(query).matches;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlatformService, deps: [{ token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlatformService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PlatformService, deps: [{ token: i1.WindowRef }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PlatformService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PlatformService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: PlatformService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -192,10 +192,10 @@ class LineClampHelper {
         this.renderer.removeStyle(element, config.lineClamp);
         this.renderer.removeStyle(element, config.lineHeight);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineClampHelper, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineClampHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LineClampHelper, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LineClampHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LineClampHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: LineClampHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Renderer2 }] });
 
@@ -228,10 +228,10 @@ class IonicElementPartHelper {
             return;
         this.renderer.setAttribute(partElement, 'part', partName);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IonicElementPartHelper, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IonicElementPartHelper }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IonicElementPartHelper, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IonicElementPartHelper }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IonicElementPartHelper, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IonicElementPartHelper, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Renderer2 }] });
 

package/fesm2022/kirbydesign-designsystem-icon.mjs

@@ -7,125 +7,125 @@ import { ThemeColorDirective } from '@kirbydesign/designsystem/shared';
 /* eslint-disable */
 const kirbyIconSettings = {
     icons: [
-        { name: 'accounts-outline', svg: 'accounts-outline.svg' },
-        { name: 'accounts', svg: 'accounts.svg' },
-        { name: 'add', svg: 'add.svg' },
-        { name: 'remove', svg: 'remove.svg' },
-        { name: 'unsubscribe', svg: 'unsubscribe.svg' },
-        { name: 'arrow-back', svg: 'arrow-back.svg' },
-        { name: 'arrow-down', svg: 'arrow-down.svg' },
-        { name: 'arrow-more', svg: 'arrow-more.svg' },
-        { name: 'arrow-up', svg: 'arrow-up.svg' },
-        { name: 'attach', svg: 'attach.svg' },
-        { name: 'backspace', svg: 'backspace.svg' },
-        { name: 'calendar', svg: 'calendar.svg' },
-        { name: 'camera', svg: 'camera.svg' },
-        { name: 'car', svg: 'car.svg' },
-        { name: 'checkbox-outline', svg: 'checkbox-outline.svg' },
-        { name: 'checkbox', svg: 'checkbox.svg' },
-        { name: 'checkmark-selected', svg: 'checkmark-selected.svg' },
-        { name: 'close', svg: 'close.svg' },
-        { name: 'cog', svg: 'cog.svg' },
-        { name: 'coinstack', svg: 'coinstack.svg' },
-        { name: 'contact', svg: 'contact.svg' },
-        { name: 'copy', svg: 'copy.svg' },
-        { name: 'flag', svg: 'flag.svg' },
-        { name: 'edit', svg: 'edit.svg' },
-        { name: 'filter', svg: 'filter.svg' },
-        { name: 'flash-off', svg: 'flash-off.svg' },
-        { name: 'flash', svg: 'flash.svg' },
-        { name: 'moneybag', svg: 'moneybag.svg' },
-        { name: 'help', svg: 'help.svg' },
-        { name: 'home', svg: 'home.svg' },
-        { name: 'inbox', svg: 'inbox.svg' },
-        { name: 'inbox-outline', svg: 'inbox-outline.svg' },
-        { name: 'information', svg: 'information.svg' },
-        { name: 'insurance', svg: 'insurance.svg' },
-        { name: 'investment', svg: 'investment.svg' },
-        { name: 'kirby', svg: 'kirby.svg' },
-        { name: 'link', svg: 'link.svg' },
-        { name: 'log-out', svg: 'log-out.svg' },
-        { name: 'menu-outline', svg: 'menu-outline.svg' },
-        { name: 'menu', svg: 'menu.svg' },
-        { name: 'menu-no-decoration', svg: 'menu-no-decoration.svg' },
-        { name: 'misc', svg: 'misc.svg' },
-        { name: 'more', svg: 'more.svg' },
-        { name: 'move', svg: 'move.svg' },
-        { name: 'payment-card', svg: 'payment-card.svg' },
-        { name: 'pension', svg: 'pension.svg' },
-        { name: 'person-outline', svg: 'person-outline.svg' },
-        { name: 'person', svg: 'person.svg' },
-        { name: 'qr', svg: 'QR.svg' },
-        { name: 'recurring', svg: 'recurring.svg' },
-        { name: 'salary', svg: 'salary.svg' },
-        { name: 'search', svg: 'search.svg' },
-        { name: 'share', svg: 'share.svg' },
-        { name: 'sort', svg: 'sort.svg' },
-        { name: 'support', svg: 'support.svg' },
-        { name: 'swap', svg: 'swap.svg' },
-        { name: 'trash', svg: 'trash.svg' },
-        { name: 'foreign-payment', svg: 'foreign-payment.svg' },
-        { name: 'clock', svg: 'clock.svg' },
-        { name: 'verify', svg: 'verify.svg' },
-        { name: 'warning', svg: 'warning.svg' },
-        { name: 'write-message', svg: 'write-message.svg' },
-        { name: 'reorder', svg: 'reorder.svg' },
-        { name: 'accident', svg: 'accident.svg' },
-        { name: 'health', svg: 'health.svg' },
-        { name: 'illness', svg: 'illness.svg' },
-        { name: 'incapacity', svg: 'incapacity.svg' },
-        { name: 'life', svg: 'life.svg' },
-        { name: 'help-decoration', svg: 'help-decoration.svg' },
-        { name: 'information-decoration', svg: 'information-decoration.svg' },
-        { name: 'notification', svg: 'notification.svg' },
-        { name: 'transfer-ownership', svg: 'transfer-ownership.svg' },
-        { name: 'update', svg: 'update.svg' },
-        { name: 'user-blocked', svg: 'user-blocked.svg' },
-        { name: 'add-bank', svg: 'add-bank.svg' },
-        { name: 'participants', svg: 'participants.svg' },
-        { name: 'download', svg: 'download.svg' },
-        { name: 'globe-transfer', svg: 'globe-transfer.svg' },
-        { name: 'banknotes', svg: 'banknotes.svg' },
-        { name: 'air-balloon', svg: 'air-balloon.svg' },
-        { name: 'piggybank', svg: 'piggybank.svg' },
-        { name: 'business', svg: 'business.svg' },
-        { name: 'navigation', svg: 'navigation.svg' },
-        { name: 'phone-device', svg: 'phone-device.svg' },
-        { name: 'upload', svg: 'upload.svg' },
-        { name: 'document', svg: 'document.svg' },
-        { name: 'chat', svg: 'chat.svg' },
-        { name: 'feedback', svg: 'feedback.svg' },
-        { name: 'keyboard', svg: 'keyboard.svg' },
-        { name: 'lock', svg: 'lock.svg' },
-        { name: 'see', svg: 'see.svg' },
-        { name: 'overview', svg: 'overview.svg' },
-        { name: 'overview-outline', svg: 'overview-outline.svg' },
-        { name: 'arrow-down-fill', svg: 'arrow-down-fill.svg' },
-        { name: 'arrow-up-fill', svg: 'arrow-up-fill.svg' },
-        { name: 'calculator', svg: 'calculator.svg' },
-        { name: 'grid', svg: 'grid.svg' },
-        { name: 'list', svg: 'list.svg' },
-        { name: 'adjust', svg: 'adjust.svg' },
-        { name: 'bs-logo', svg: 'bs-logo.svg' },
-        { name: 'company', svg: 'company.svg' },
-        { name: 'budget', svg: 'budget.svg' },
-        { name: 'history', svg: 'history.svg' },
-        { name: 'dot', svg: 'dot.svg' },
-        { name: 'agreement', svg: 'agreement.svg' },
-        { name: 'sunshine', svg: 'sunshine.svg' },
-        { name: 'revert', svg: 'revert.svg' },
-        { name: 'fees', svg: 'fees.svg' },
-        { name: 'crossedeye', svg: 'crossedeye.svg' },
-        { name: 'common', svg: 'common.svg' },
-        { name: 'calendar-start', svg: 'calendar-start.svg' },
-        { name: 'calendar-end', svg: 'calendar-end.svg' },
-        { name: 'expand', svg: 'expand.svg' },
-        { name: 'contract', svg: 'contract.svg' },
-        { name: 'house', svg: 'house.svg' },
-        { name: 'tractor', svg: 'tractor.svg' },
-        { name: 'flower', svg: 'flower.svg' },
-        { name: 'basket', svg: 'basket.svg' },
-        { name: 'drag-drop', svg: 'drag-drop.svg' },
+        { name: 'accounts-outline', svg: 'assets/kirby/icons/svg/accounts-outline.svg' },
+        { name: 'accounts', svg: 'assets/kirby/icons/svg/accounts.svg' },
+        { name: 'add', svg: 'assets/kirby/icons/svg/add.svg' },
+        { name: 'remove', svg: 'assets/kirby/icons/svg/remove.svg' },
+        { name: 'unsubscribe', svg: 'assets/kirby/icons/svg/unsubscribe.svg' },
+        { name: 'arrow-back', svg: 'assets/kirby/icons/svg/arrow-back.svg' },
+        { name: 'arrow-down', svg: 'assets/kirby/icons/svg/arrow-down.svg' },
+        { name: 'arrow-more', svg: 'assets/kirby/icons/svg/arrow-more.svg' },
+        { name: 'arrow-up', svg: 'assets/kirby/icons/svg/arrow-up.svg' },
+        { name: 'attach', svg: 'assets/kirby/icons/svg/attach.svg' },
+        { name: 'backspace', svg: 'assets/kirby/icons/svg/backspace.svg' },
+        { name: 'calendar', svg: 'assets/kirby/icons/svg/calendar.svg' },
+        { name: 'camera', svg: 'assets/kirby/icons/svg/camera.svg' },
+        { name: 'car', svg: 'assets/kirby/icons/svg/car.svg' },
+        { name: 'checkbox-outline', svg: 'assets/kirby/icons/svg/checkbox-outline.svg' },
+        { name: 'checkbox', svg: 'assets/kirby/icons/svg/checkbox.svg' },
+        { name: 'checkmark-selected', svg: 'assets/kirby/icons/svg/checkmark-selected.svg' },
+        { name: 'close', svg: 'assets/kirby/icons/svg/close.svg' },
+        { name: 'cog', svg: 'assets/kirby/icons/svg/cog.svg' },
+        { name: 'coinstack', svg: 'assets/kirby/icons/svg/coinstack.svg' },
+        { name: 'contact', svg: 'assets/kirby/icons/svg/contact.svg' },
+        { name: 'copy', svg: 'assets/kirby/icons/svg/copy.svg' },
+        { name: 'flag', svg: 'assets/kirby/icons/svg/flag.svg' },
+        { name: 'edit', svg: 'assets/kirby/icons/svg/edit.svg' },
+        { name: 'filter', svg: 'assets/kirby/icons/svg/filter.svg' },
+        { name: 'flash-off', svg: 'assets/kirby/icons/svg/flash-off.svg' },
+        { name: 'flash', svg: 'assets/kirby/icons/svg/flash.svg' },
+        { name: 'moneybag', svg: 'assets/kirby/icons/svg/moneybag.svg' },
+        { name: 'help', svg: 'assets/kirby/icons/svg/help.svg' },
+        { name: 'home', svg: 'assets/kirby/icons/svg/home.svg' },
+        { name: 'inbox', svg: 'assets/kirby/icons/svg/inbox.svg' },
+        { name: 'inbox-outline', svg: 'assets/kirby/icons/svg/inbox-outline.svg' },
+        { name: 'information', svg: 'assets/kirby/icons/svg/information.svg' },
+        { name: 'insurance', svg: 'assets/kirby/icons/svg/insurance.svg' },
+        { name: 'investment', svg: 'assets/kirby/icons/svg/investment.svg' },
+        { name: 'kirby', svg: 'assets/kirby/icons/svg/kirby.svg' },
+        { name: 'link', svg: 'assets/kirby/icons/svg/link.svg' },
+        { name: 'log-out', svg: 'assets/kirby/icons/svg/log-out.svg' },
+        { name: 'menu-outline', svg: 'assets/kirby/icons/svg/menu-outline.svg' },
+        { name: 'menu', svg: 'assets/kirby/icons/svg/menu.svg' },
+        { name: 'menu-no-decoration', svg: 'assets/kirby/icons/svg/menu-no-decoration.svg' },
+        { name: 'misc', svg: 'assets/kirby/icons/svg/misc.svg' },
+        { name: 'more', svg: 'assets/kirby/icons/svg/more.svg' },
+        { name: 'move', svg: 'assets/kirby/icons/svg/move.svg' },
+        { name: 'payment-card', svg: 'assets/kirby/icons/svg/payment-card.svg' },
+        { name: 'pension', svg: 'assets/kirby/icons/svg/pension.svg' },
+        { name: 'person-outline', svg: 'assets/kirby/icons/svg/person-outline.svg' },
+        { name: 'person', svg: 'assets/kirby/icons/svg/person.svg' },
+        { name: 'qr', svg: 'assets/kirby/icons/svg/QR.svg' },
+        { name: 'recurring', svg: 'assets/kirby/icons/svg/recurring.svg' },
+        { name: 'salary', svg: 'assets/kirby/icons/svg/salary.svg' },
+        { name: 'search', svg: 'assets/kirby/icons/svg/search.svg' },
+        { name: 'share', svg: 'assets/kirby/icons/svg/share.svg' },
+        { name: 'sort', svg: 'assets/kirby/icons/svg/sort.svg' },
+        { name: 'support', svg: 'assets/kirby/icons/svg/support.svg' },
+        { name: 'swap', svg: 'assets/kirby/icons/svg/swap.svg' },
+        { name: 'trash', svg: 'assets/kirby/icons/svg/trash.svg' },
+        { name: 'foreign-payment', svg: 'assets/kirby/icons/svg/foreign-payment.svg' },
+        { name: 'clock', svg: 'assets/kirby/icons/svg/clock.svg' },
+        { name: 'verify', svg: 'assets/kirby/icons/svg/verify.svg' },
+        { name: 'warning', svg: 'assets/kirby/icons/svg/warning.svg' },
+        { name: 'write-message', svg: 'assets/kirby/icons/svg/write-message.svg' },
+        { name: 'reorder', svg: 'assets/kirby/icons/svg/reorder.svg' },
+        { name: 'accident', svg: 'assets/kirby/icons/svg/accident.svg' },
+        { name: 'health', svg: 'assets/kirby/icons/svg/health.svg' },
+        { name: 'illness', svg: 'assets/kirby/icons/svg/illness.svg' },
+        { name: 'incapacity', svg: 'assets/kirby/icons/svg/incapacity.svg' },
+        { name: 'life', svg: 'assets/kirby/icons/svg/life.svg' },
+        { name: 'help-decoration', svg: 'assets/kirby/icons/svg/help-decoration.svg' },
+        { name: 'information-decoration', svg: 'assets/kirby/icons/svg/information-decoration.svg' },
+        { name: 'notification', svg: 'assets/kirby/icons/svg/notification.svg' },
+        { name: 'transfer-ownership', svg: 'assets/kirby/icons/svg/transfer-ownership.svg' },
+        { name: 'update', svg: 'assets/kirby/icons/svg/update.svg' },
+        { name: 'user-blocked', svg: 'assets/kirby/icons/svg/user-blocked.svg' },
+        { name: 'add-bank', svg: 'assets/kirby/icons/svg/add-bank.svg' },
+        { name: 'participants', svg: 'assets/kirby/icons/svg/participants.svg' },
+        { name: 'download', svg: 'assets/kirby/icons/svg/download.svg' },
+        { name: 'globe-transfer', svg: 'assets/kirby/icons/svg/globe-transfer.svg' },
+        { name: 'banknotes', svg: 'assets/kirby/icons/svg/banknotes.svg' },
+        { name: 'air-balloon', svg: 'assets/kirby/icons/svg/air-balloon.svg' },
+        { name: 'piggybank', svg: 'assets/kirby/icons/svg/piggybank.svg' },
+        { name: 'business', svg: 'assets/kirby/icons/svg/business.svg' },
+        { name: 'navigation', svg: 'assets/kirby/icons/svg/navigation.svg' },
+        { name: 'phone-device', svg: 'assets/kirby/icons/svg/phone-device.svg' },
+        { name: 'upload', svg: 'assets/kirby/icons/svg/upload.svg' },
+        { name: 'document', svg: 'assets/kirby/icons/svg/document.svg' },
+        { name: 'chat', svg: 'assets/kirby/icons/svg/chat.svg' },
+        { name: 'feedback', svg: 'assets/kirby/icons/svg/feedback.svg' },
+        { name: 'keyboard', svg: 'assets/kirby/icons/svg/keyboard.svg' },
+        { name: 'lock', svg: 'assets/kirby/icons/svg/lock.svg' },
+        { name: 'see', svg: 'assets/kirby/icons/svg/see.svg' },
+        { name: 'overview', svg: 'assets/kirby/icons/svg/overview.svg' },
+        { name: 'overview-outline', svg: 'assets/kirby/icons/svg/overview-outline.svg' },
+        { name: 'arrow-down-fill', svg: 'assets/kirby/icons/svg/arrow-down-fill.svg' },
+        { name: 'arrow-up-fill', svg: 'assets/kirby/icons/svg/arrow-up-fill.svg' },
+        { name: 'calculator', svg: 'assets/kirby/icons/svg/calculator.svg' },
+        { name: 'grid', svg: 'assets/kirby/icons/svg/grid.svg' },
+        { name: 'list', svg: 'assets/kirby/icons/svg/list.svg' },
+        { name: 'adjust', svg: 'assets/kirby/icons/svg/adjust.svg' },
+        { name: 'bs-logo', svg: 'assets/kirby/icons/svg/bs-logo.svg' },
+        { name: 'company', svg: 'assets/kirby/icons/svg/company.svg' },
+        { name: 'budget', svg: 'assets/kirby/icons/svg/budget.svg' },
+        { name: 'history', svg: 'assets/kirby/icons/svg/history.svg' },
+        { name: 'dot', svg: 'assets/kirby/icons/svg/dot.svg' },
+        { name: 'agreement', svg: 'assets/kirby/icons/svg/agreement.svg' },
+        { name: 'sunshine', svg: 'assets/kirby/icons/svg/sunshine.svg' },
+        { name: 'revert', svg: 'assets/kirby/icons/svg/revert.svg' },
+        { name: 'fees', svg: 'assets/kirby/icons/svg/fees.svg' },
+        { name: 'crossedeye', svg: 'assets/kirby/icons/svg/crossedeye.svg' },
+        { name: 'common', svg: 'assets/kirby/icons/svg/common.svg' },
+        { name: 'calendar-start', svg: 'assets/kirby/icons/svg/calendar-start.svg' },
+        { name: 'calendar-end', svg: 'assets/kirby/icons/svg/calendar-end.svg' },
+        { name: 'expand', svg: 'assets/kirby/icons/svg/expand.svg' },
+        { name: 'contract', svg: 'assets/kirby/icons/svg/contract.svg' },
+        { name: 'house', svg: 'assets/kirby/icons/svg/house.svg' },
+        { name: 'tractor', svg: 'assets/kirby/icons/svg/tractor.svg' },
+        { name: 'flower', svg: 'assets/kirby/icons/svg/flower.svg' },
+        { name: 'basket', svg: 'assets/kirby/icons/svg/basket.svg' },
+        { name: 'drag-drop', svg: 'assets/kirby/icons/svg/drag-drop.svg' },
     ],
 };
 const defaultIcons = kirbyIconSettings.icons.map((icon) => icon.name);
@@ -162,10 +162,10 @@ class IconRegistryService {
         const svg = this.iconRegistry.get(name);
         return svg ? { name, svg } : undefined;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconRegistryService, providedIn: 'root' }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconRegistryService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconRegistryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconRegistryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -233,10 +233,10 @@ class IconComponent {
             this.icon = this.iconRegistryService.getIcon(changes.customName.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [{ token: IconRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: IconComponent, selector: "kirby-icon", inputs: { size: "size", name: "name", customName: "customName" }, host: { properties: { "class.kirby-icon": "true", "class": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, 24px);margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: 16px}:host(.sm){--kirby-icon-font-size: 24px}:host(.md){--kirby-icon-font-size: 32px}:host(.lg){--kirby-icon-font-size: 56px}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:8px}:host-context(kirby-item)[slot=end]{margin-inline-start:8px}:host-context(ion-tab-button){pointer-events:none}\n"], dependencies: [{ kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconComponent, deps: [{ token: IconRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.10", type: IconComponent, selector: "kirby-icon", inputs: { size: "size", name: "name", customName: "customName" }, host: { properties: { "class.kirby-icon": "true", "class": "this.size" } }, usesOnChanges: true, ngImport: i0, template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, 24px);margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: 16px}:host(.sm){--kirby-icon-font-size: 24px}:host(.md){--kirby-icon-font-size: 32px}:host(.lg){--kirby-icon-font-size: 56px}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:8px}:host-context(kirby-item)[slot=end]{margin-inline-start:8px}:host-context(ion-tab-button){pointer-events:none}\n"], dependencies: [{ kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-icon', host: { '[class.kirby-icon]': 'true' }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-icon [src]=\"icon?.svg\"></ion-icon>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;font-size:var(--kirby-icon-font-size, 24px);margin-left:var(--kirby-icon-margin-left, unset);margin-right:var(--kirby-icon-margin-right, unset)}:host svg path{fill:currentcolor;stroke:currentcolor}:host(.xs){--kirby-icon-font-size: 16px}:host(.sm){--kirby-icon-font-size: 24px}:host(.md){--kirby-icon-font-size: 32px}:host(.lg){--kirby-icon-font-size: 56px}:host(.primary){color:var(--kirby-primary)}:host(.secondary){color:var(--kirby-secondary)}:host(.tertiary){color:var(--kirby-tertiary)}:host(.success){color:var(--kirby-success)}:host(.warning){color:var(--kirby-warning)}:host(.danger){color:var(--kirby-danger)}:host(.white-overlay){color:var(--kirby-white-overlay)}:host(.light){color:var(--kirby-light)}:host(.medium){color:var(--kirby-medium)}:host(.dark){color:var(--kirby-dark)}:host(.dark-overlay){color:var(--kirby-dark-overlay)}:host-context(kirby-item)[slot=start]{margin-inline-end:8px}:host-context(kirby-item)[slot=end]{margin-inline-start:8px}:host-context(ion-tab-button){pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: IconRegistryService }], propDecorators: { size: [{
@@ -251,11 +251,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class IconModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [ThemeColorDirective, IonIcon], exports: [IconComponent, ThemeColorDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, imports: [IonIcon] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.10", ngImport: i0, type: IconModule, declarations: [IconComponent], imports: [ThemeColorDirective, IonIcon], exports: [IconComponent, ThemeColorDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconModule, imports: [IonIcon] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.10", ngImport: i0, type: IconModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ThemeColorDirective, IonIcon],