npm - @kirbydesign/designsystem - Versions diffs - 8.5.2 → 8.6.0-input-bug-fix.0 - Mend

@kirbydesign/designsystem 8.5.2 → 8.6.0-input-bug-fix.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (157) hide show

package/fesm2015/kirbydesign-designsystem-header.mjs CHANGED Viewed

@@ -83,10 +83,10 @@ class HeaderComponent {
     }
 }
 /** @nocollapse */ HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2" }, 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: "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 }], 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\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\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]=\"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    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (min-width: 721px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;overflow:hidden}@media (min-width: 721px){:host(:not(.single-column)) .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}:host(:not(.single-column)) .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: 721px){:host(.centered):not(.single-column) .container{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container>h1.title,:host(.centered):not(.single-column) .title-container{grid-column-start:2}}.actions{margin-top:24px}@media (max-width: 720px){.actions:not(.emphasize){display:none}}@media (min-width: 721px){:host(:not(.single-column)) .actions{margin:0 4px;display:flex;justify-content:flex-end}}.avatar,.flag,.title-container,.container>h1.title{padding:0 16px}.title-container{display:flex;flex-direction:column;overflow:hidden}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.title{margin-bottom:2px}.title.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%}.subtitle1,.subtitle2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: HeaderComponent, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2" }, 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: "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 }], 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\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\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]=\"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    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (min-width: 768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}@media (min-width: 768px){:host(:not(.single-column)) .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}:host(:not(.single-column)) .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{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container>h1.title,:host(.centered):not(.single-column) .title-container{grid-column-start:2}}.actions{margin-top:24px}@media (max-width: 767px){.actions:not(.emphasize){display:none}}@media (min-width: 768px){:host(:not(.single-column)) .actions{margin:0 4px;display:flex;justify-content:flex-end}}.avatar,.flag,.title-container,.container>h1.title{padding:0 16px}.title-container{display:flex;flex-direction:column;overflow:hidden}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.title{margin-bottom:2px}.title.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%}.subtitle1,.subtitle2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"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    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (min-width: 721px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%;overflow:hidden}@media (min-width: 721px){:host(:not(.single-column)) .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}:host(:not(.single-column)) .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: 721px){:host(.centered):not(.single-column) .container{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container>h1.title,:host(.centered):not(.single-column) .title-container{grid-column-start:2}}.actions{margin-top:24px}@media (max-width: 720px){.actions:not(.emphasize){display:none}}@media (min-width: 721px){:host(:not(.single-column)) .actions{margin:0 4px;display:flex;justify-content:flex-end}}.avatar,.flag,.title-container,.container>h1.title{padding:0 16px}.title-container{display:flex;flex-direction:column;overflow:hidden}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.title{margin-bottom:2px}.title.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%}.subtitle1,.subtitle2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.custom-section{margin-top:8px}\n"] }]
+            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\" class=\"flag\">\n  <ng-content select=\"kirby-flag\"></ng-content>\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]=\"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    <div *ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n      {{ subtitle1 }}\n    </div>\n    <div *ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n      {{ subtitle2 }}\n    </div>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (min-width: 768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}@media (min-width: 768px){:host(:not(.single-column)) .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}:host(:not(.single-column)) .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{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container>h1.title,:host(.centered):not(.single-column) .title-container{grid-column-start:2}}.actions{margin-top:24px}@media (max-width: 767px){.actions:not(.emphasize){display:none}}@media (min-width: 768px){:host(:not(.single-column)) .actions{margin:0 4px;display:flex;justify-content:flex-end}}.avatar,.flag,.title-container,.container>h1.title{padding:0 16px}.title-container{display:flex;flex-direction:column;overflow:hidden}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.title{margin-bottom:2px}.title.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%}.subtitle1,.subtitle2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}.custom-section{margin-top:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { centered: [{
                 type: HostBinding,
                 args: ['class.centered']
@@ -166,3 +166,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 export { HeaderActionsDirective, HeaderComponent, HeaderCustomSectionDirective, HeaderModule, HeaderTitleActionIconDirective };
 //# sourceMappingURL=kirbydesign-designsystem-header.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-header.mjs.map

package/fesm2015/kirbydesign-designsystem-header.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-header.mjs","sources":["../../../../libs/designsystem/header/src/header.component.ts","../../../../libs/designsystem/header/src/header.component.html","../../../../libs/designsystem/header/src/header.module.ts","../../../../libs/designsystem/header/src/kirbydesign-designsystem-header.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n Directive,\n ElementRef,\n EventEmitter,\n HostBinding,\n Injector,\n Input,\n OnInit,\n Output,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\n\nimport { ACTIONGROUP_CONFIG, ActionGroupConfig } from '@kirbydesign/designsystem/action-group';\nimport { AvatarComponent } from '@kirbydesign/designsystem/avatar';\nimport { FlagComponent } from '@kirbydesign/designsystem/flag';\nimport { ProgressCircleComponent } from '@kirbydesign/designsystem/progress-circle';\nimport type { FitHeadingConfig } from '@kirbydesign/designsystem/shared';\n\n@Directive({\n selector: '[kirbyHeaderActions]',\n})\nexport class HeaderActionsDirective {}\n\n@Directive({\n selector: '[kirbyHeaderCustomSection]',\n})\nexport class HeaderCustomSectionDirective {}\n\n@Directive({\n selector: '[kirbyHeaderTitleActionIcon]',\n})\nexport class HeaderTitleActionIconDirective {}\n\n@Component({\n selector: 'kirby-header',\n templateUrl: './header.component.html',\n styleUrls: ['./header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderComponent implements AfterContentInit, OnInit {\n @HostBinding('class.centered')\n @Input()\n centered?: boolean;\n\n @Input() titleMaxLines: number;\n @Input() emphasizeActions = false;\n\n fitHeadingConfig: FitHeadingConfig;\n\n @ContentChild(AvatarComponent)\n avatar: AvatarComponent;\n\n @ContentChild(ProgressCircleComponent)\n progressCircle: ProgressCircleComponent;\n\n @ContentChild(FlagComponent)\n flag: FlagComponent;\n\n @ViewChild('titleElement', { read: ElementRef })\n titleElement?: ElementRef<HTMLHeadingElement>;\n\n @ViewChild('actionsElement', { read: ElementRef })\n actionsElement?: ElementRef<HTMLDivElement>;\n\n @ContentChild(HeaderActionsDirective, { read: TemplateRef<HeaderActionsDirective> })\n actionsTemplate?: TemplateRef<HeaderActionsDirective>;\n\n @ContentChild(HeaderCustomSectionDirective, { read: TemplateRef<HeaderCustomSectionDirective> })\n customSectionTemplate?: TemplateRef<HeaderCustomSectionDirective>;\n\n @ContentChild(HeaderTitleActionIconDirective, { read: TemplateRef })\n titleActionIconTemplate: TemplateRef<HeaderTitleActionIconDirective>;\n\n @Input() title: string = null;\n @Input() value: string = null;\n @Input() valueUnit: string = null;\n @Input() subtitle1: string = null;\n @Input() subtitle2: string = null;\n\n @Output() titleClick = new EventEmitter<PointerEvent>();\n\n onTitleClick(event: PointerEvent) {\n this.titleClick.emit(event);\n }\n\n _actionGroupInjector: Injector;\n\n private actionGroupConfig: ActionGroupConfig;\n\n constructor(private injector: Injector) {}\n\n ngOnInit(): void {\n this.actionGroupConfig = {\n defaultVisibleActions: this.emphasizeActions ? undefined : 1,\n };\n\n this._actionGroupInjector = Injector.create({\n providers: [\n {\n provide: ACTIONGROUP_CONFIG,\n useValue: this.actionGroupConfig,\n },\n ],\n parent: this.injector,\n });\n\n if (this.titleMaxLines > 0) {\n this.fitHeadingConfig = {\n maxLines: this.titleMaxLines,\n };\n }\n }\n\n ngAfterContentInit(): void {\n // If an avatar is present we default to centered layout - unless configured otherwise:\n if (this.avatar && this.centered === undefined) {\n this.centered = true;\n }\n\n if (this.centered) {\n this.actionGroupConfig.isCondensed = true;\n }\n }\n}\n","<div ngIf=\"!!avatar \|\| !!progressCircle\" class=\"avatar\">\n <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div ngIf=\"!!flag\" class=\"flag\">\n <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n <!-- Title and value - title: -->\n <h1 ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"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 <div ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n {{ subtitle1 }}\n </div>\n <div ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n {{ subtitle2 }}\n </div>\n\n <!-- Custom section -->\n <div\n ngIf=\"!!customSectionTemplate\"\n class=\"custom-section\"\n >\n <ng-container ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n </div>\n </div>\n \n <!-- Actions: -->\n <div\n ngIf=\"!!actionsTemplate\"\n #actionsElement\n class=\"actions\"\n [class.emphasize]=\"emphasizeActions\"\n >\n <ng-container ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FitHeadingDirective } from '@kirbydesign/designsystem/shared';\n\nimport {\n HeaderActionsDirective,\n HeaderComponent,\n HeaderCustomSectionDirective,\n HeaderTitleActionIconDirective,\n} from './header.component';\n\nconst declarations = [\n HeaderComponent,\n HeaderActionsDirective,\n HeaderCustomSectionDirective,\n HeaderTitleActionIconDirective,\n];\n\n@NgModule({\n declarations: declarations,\n imports: [CommonModule, FitHeadingDirective],\n exports: declarations,\n})\nexport class HeaderModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"kirbydesign-designsystem-header.mjs","sources":["../../../../libs/designsystem/header/src/header.component.ts","../../../../libs/designsystem/header/src/header.component.html","../../../../libs/designsystem/header/src/header.module.ts","../../../../libs/designsystem/header/src/kirbydesign-designsystem-header.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n Directive,\n ElementRef,\n EventEmitter,\n HostBinding,\n Injector,\n Input,\n OnInit,\n Output,\n TemplateRef,\n ViewChild,\n} from '@angular/core';\n\nimport { ACTIONGROUP_CONFIG, ActionGroupConfig } from '@kirbydesign/designsystem/action-group';\nimport { AvatarComponent } from '@kirbydesign/designsystem/avatar';\nimport { FlagComponent } from '@kirbydesign/designsystem/flag';\nimport { ProgressCircleComponent } from '@kirbydesign/designsystem/progress-circle';\nimport type { FitHeadingConfig } from '@kirbydesign/designsystem/shared';\n\n@Directive({\n selector: '[kirbyHeaderActions]',\n})\nexport class HeaderActionsDirective {}\n\n@Directive({\n selector: '[kirbyHeaderCustomSection]',\n})\nexport class HeaderCustomSectionDirective {}\n\n@Directive({\n selector: '[kirbyHeaderTitleActionIcon]',\n})\nexport class HeaderTitleActionIconDirective {}\n\n@Component({\n selector: 'kirby-header',\n templateUrl: './header.component.html',\n styleUrls: ['./header.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeaderComponent implements AfterContentInit, OnInit {\n @HostBinding('class.centered')\n @Input()\n centered?: boolean;\n\n @Input() titleMaxLines: number;\n @Input() emphasizeActions = false;\n\n fitHeadingConfig: FitHeadingConfig;\n\n @ContentChild(AvatarComponent)\n avatar: AvatarComponent;\n\n @ContentChild(ProgressCircleComponent)\n progressCircle: ProgressCircleComponent;\n\n @ContentChild(FlagComponent)\n flag: FlagComponent;\n\n @ViewChild('titleElement', { read: ElementRef })\n titleElement?: ElementRef<HTMLHeadingElement>;\n\n @ViewChild('actionsElement', { read: ElementRef })\n actionsElement?: ElementRef<HTMLDivElement>;\n\n @ContentChild(HeaderActionsDirective, { read: TemplateRef<HeaderActionsDirective> })\n actionsTemplate?: TemplateRef<HeaderActionsDirective>;\n\n @ContentChild(HeaderCustomSectionDirective, { read: TemplateRef<HeaderCustomSectionDirective> })\n customSectionTemplate?: TemplateRef<HeaderCustomSectionDirective>;\n\n @ContentChild(HeaderTitleActionIconDirective, { read: TemplateRef })\n titleActionIconTemplate: TemplateRef<HeaderTitleActionIconDirective>;\n\n @Input() title: string = null;\n @Input() value: string = null;\n @Input() valueUnit: string = null;\n @Input() subtitle1: string = null;\n @Input() subtitle2: string = null;\n\n @Output() titleClick = new EventEmitter<PointerEvent>();\n\n onTitleClick(event: PointerEvent) {\n this.titleClick.emit(event);\n }\n\n _actionGroupInjector: Injector;\n\n private actionGroupConfig: ActionGroupConfig;\n\n constructor(private injector: Injector) {}\n\n ngOnInit(): void {\n this.actionGroupConfig = {\n defaultVisibleActions: this.emphasizeActions ? undefined : 1,\n };\n\n this._actionGroupInjector = Injector.create({\n providers: [\n {\n provide: ACTIONGROUP_CONFIG,\n useValue: this.actionGroupConfig,\n },\n ],\n parent: this.injector,\n });\n\n if (this.titleMaxLines > 0) {\n this.fitHeadingConfig = {\n maxLines: this.titleMaxLines,\n };\n }\n }\n\n ngAfterContentInit(): void {\n // If an avatar is present we default to centered layout - unless configured otherwise:\n if (this.avatar && this.centered === undefined) {\n this.centered = true;\n }\n\n if (this.centered) {\n this.actionGroupConfig.isCondensed = true;\n }\n }\n}\n","<div ngIf=\"!!avatar \|\| !!progressCircle\" class=\"avatar\">\n <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div ngIf=\"!!flag\" class=\"flag\">\n <ng-content select=\"kirby-flag\"></ng-content>\n</div>\n\n<div class=\"container\">\n <!-- Title and value - title: -->\n <h1 ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"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 <div ngIf=\"!!subtitle1\" class=\"subtitle1 kirby-text-small\">\n {{ subtitle1 }}\n </div>\n <div ngIf=\"!!subtitle2\" class=\"subtitle2 kirby-text-small\">\n {{ subtitle2 }}\n </div>\n\n <!-- Custom section -->\n <div\n ngIf=\"!!customSectionTemplate\"\n class=\"custom-section\"\n >\n <ng-container ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n </div>\n </div>\n \n <!-- Actions: -->\n <div\n ngIf=\"!!actionsTemplate\"\n #actionsElement\n class=\"actions\"\n [class.emphasize]=\"emphasizeActions\"\n >\n <ng-container ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n </div>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FitHeadingDirective } from '@kirbydesign/designsystem/shared';\n\nimport {\n HeaderActionsDirective,\n HeaderComponent,\n HeaderCustomSectionDirective,\n HeaderTitleActionIconDirective,\n} from './header.component';\n\nconst declarations = [\n HeaderComponent,\n HeaderActionsDirective,\n HeaderCustomSectionDirective,\n HeaderTitleActionIconDirective,\n];\n\n@NgModule({\n declarations: declarations,\n imports: [CommonModule, FitHeadingDirective],\n exports: declarations,\n})\nexport class HeaderModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;MA0Ba,sBAAsB,CAAA;;sIAAtB,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;0HAAtB,sBAAsB,EAAA,QAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAAtB,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAHlC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,sBAAsB;iBACjC,CAAA;;MAMY,4BAA4B,CAAA;;4IAA5B,4BAA4B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;gIAA5B,4BAA4B,EAAA,QAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAA5B,4BAA4B,EAAA,UAAA,EAAA,CAAA;kBAHxC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,4BAA4B;iBACvC,CAAA;;MAMY,8BAA8B,CAAA;;8IAA9B,8BAA8B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kIAA9B,8BAA8B,EAAA,QAAA,EAAA,8BAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;2FAA9B,8BAA8B,EAAA,UAAA,EAAA,CAAA;kBAH1C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,8BAA8B;iBACzC,CAAA;;MASY,eAAe,CAAA;AAkD1B,IAAA,WAAA,CAAoB,QAAkB,EAAA;AAAlB,QAAA,IAAQ,CAAA,QAAA,GAAR,QAAQ,CAAU;AA5C7B,QAAA,IAAgB,CAAA,gBAAA,GAAG,KAAK,CAAC;AA4BzB,QAAA,IAAK,CAAA,KAAA,GAAW,IAAI,CAAC;AACrB,QAAA,IAAK,CAAA,KAAA,GAAW,IAAI,CAAC;AACrB,QAAA,IAAS,CAAA,SAAA,GAAW,IAAI,CAAC;AACzB,QAAA,IAAS,CAAA,SAAA,GAAW,IAAI,CAAC;AACzB,QAAA,IAAS,CAAA,SAAA,GAAW,IAAI,CAAC;AAExB,QAAA,IAAA,CAAA,UAAU,GAAG,IAAI,YAAY,EAAgB,CAAC;KAUd;AAR1C,IAAA,YAAY,CAAC,KAAmB,EAAA;AAC9B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B;IAQD,QAAQ,GAAA;QACN,IAAI,CAAC,iBAAiB,GAAG;YACvB,qBAAqB,EAAE,IAAI,CAAC,gBAAgB,GAAG,SAAS,GAAG,CAAC;SAC7D,CAAC;AAEF,QAAA,IAAI,CAAC,oBAAoB,GAAG,QAAQ,CAAC,MAAM,CAAC;AAC1C,YAAA,SAAS,EAAE;AACT,gBAAA;AACE,oBAAA,OAAO,EAAE,kBAAkB;oBAC3B,QAAQ,EAAE,IAAI,CAAC,iBAAiB;AACjC,iBAAA;AACF,aAAA;YACD,MAAM,EAAE,IAAI,CAAC,QAAQ;AACtB,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,IAAI,CAAC,aAAa,GAAG,CAAC,EAAE;YAC1B,IAAI,CAAC,gBAAgB,GAAG;gBACtB,QAAQ,EAAE,IAAI,CAAC,aAAa;aAC7B,CAAC;AACH,SAAA;KACF;IAED,kBAAkB,GAAA;;QAEhB,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;AAC9C,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;AACtB,SAAA;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,iBAAiB,CAAC,WAAW,GAAG,IAAI,CAAC;AAC3C,SAAA;KACF;;+HAnFU,eAAe,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,QAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;mHAAf,eAAe,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,aAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,KAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAUZ,eAAe,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGf,uBAAuB,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,MAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGvB,aAAa,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EASb,sBAAsB,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,GAAU,WAAmC,CAAA,EAAA,EAAA,EAAA,YAAA,EAAA,uBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGnE,4BAA4B,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,GAAU,WAAyC,CAAA,EAAA,EAAA,EAAA,YAAA,EAAA,yBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAG/E,8BAA8B,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAU,WAAW,EAAA,CAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,cAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAZ9B,UAAU,EAAA,EAAA,EAAA,YAAA,EAAA,gBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAGR,UAAU,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EClEjD,szDAkDA,EAAA,MAAA,EAAA,CAAA,gzDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,gBAAA,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,mBAAA,EAAA,QAAA,EAAA,6DAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FDNa,eAAe,EAAA,UAAA,EAAA,CAAA;kBAN3B,SAAS;+BACE,cAAc,EAAA,eAAA,EAGP,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,szDAAA,EAAA,MAAA,EAAA,CAAA,gzDAAA,CAAA,EAAA,CAAA;+FAK/C,QAAQ,EAAA,CAAA;sBAFP,WAAW;uBAAC,gBAAgB,CAAA;;sBAC5B,KAAK;gBAGG,aAAa,EAAA,CAAA;sBAArB,KAAK;gBACG,gBAAgB,EAAA,CAAA;sBAAxB,KAAK;gBAKN,MAAM,EAAA,CAAA;sBADL,YAAY;uBAAC,eAAe,CAAA;gBAI7B,cAAc,EAAA,CAAA;sBADb,YAAY;uBAAC,uBAAuB,CAAA;gBAIrC,IAAI,EAAA,CAAA;sBADH,YAAY;uBAAC,aAAa,CAAA;gBAI3B,YAAY,EAAA,CAAA;sBADX,SAAS;gBAAC,IAAA,EAAA,CAAA,cAAc,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAI/C,cAAc,EAAA,CAAA;sBADb,SAAS;gBAAC,IAAA,EAAA,CAAA,gBAAgB,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAA;gBAIjD,eAAe,EAAA,CAAA;sBADd,YAAY;gBAAC,IAAA,EAAA,CAAA,sBAAsB,EAAE,EAAE,IAAI,GAAE,WAAmC,CAAA,EAAE,CAAA;gBAInF,qBAAqB,EAAA,CAAA;sBADpB,YAAY;gBAAC,IAAA,EAAA,CAAA,4BAA4B,EAAE,EAAE,IAAI,GAAE,WAAyC,CAAA,EAAE,CAAA;gBAI/F,uBAAuB,EAAA,CAAA;sBADtB,YAAY;gBAAC,IAAA,EAAA,CAAA,8BAA8B,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;gBAG1D,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBACG,SAAS,EAAA,CAAA;sBAAjB,KAAK;gBAEI,UAAU,EAAA,CAAA;sBAAnB,MAAM;;;AEzET,MAAM,YAAY,GAAG;IACnB,eAAe;IACf,sBAAsB;IACtB,4BAA4B;IAC5B,8BAA8B;CAC/B,CAAC;MAOW,YAAY,CAAA;;4HAAZ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAZ,mBAAA,YAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,iBAXvB,eAAe;QACf,sBAAsB;QACtB,4BAA4B;AAC5B,QAAA,8BAA8B,CAKpB,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,mBAAmB,aAR3C,eAAe;QACf,sBAAsB;QACtB,4BAA4B;QAC5B,8BAA8B,CAAA,EAAA,CAAA,CAAA;AAQnB,mBAAA,YAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,YAAY,YAHb,YAAY,CAAA,EAAA,CAAA,CAAA;2FAGX,YAAY,EAAA,UAAA,EAAA,CAAA;kBALxB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,YAAY;AAC1B,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC;AAC5C,oBAAA,OAAO,EAAE,YAAY;iBACtB,CAAA;;;ACtBD;;AAEG;;;;"}

package/fesm2015/kirbydesign-designsystem-helpers-scss.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-helpers.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-icon.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-item-group.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-item-sliding.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-item.mjs CHANGED Viewed

@@ -26,10 +26,10 @@ class ItemComponent {
     }
 }
 /** @nocollapse */ ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", disclosure: "disclosure", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected", "class.disclosure": "this.disclosure", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n\n  <kirby-icon *ngIf=\"disclosure\" class=\"disclosure\" slot=\"end\" name=\"{{ disclosure }}\"></kirby-icon>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px;--transition: background-color 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}.disclosure{padding-left:4px;color:var(--kirby-semi-dark)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item{--background: whitesmoke}:host(.disabled),:host([disabled]){pointer-events:none}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], dependencies: [{ kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonReorder, selector: "ion-reorder" }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ItemComponent, selector: "kirby-item", inputs: { disabled: "disabled", selected: "selected", disclosure: "disclosure", selectable: "selectable", reorderable: "reorderable", size: "size" }, host: { properties: { "class.disabled": "this.disabled", "class.selected": "this.selected", "class.disclosure": "this.disclosure", "class": "this.size" } }, ngImport: i0, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n\n  <kirby-icon *ngIf=\"disclosure\" class=\"disclosure\" slot=\"end\" name=\"{{ disclosure }}\"></kirby-icon>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px;--transition: background-color 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}.disclosure{padding-left:4px;color:var(--kirby-semi-dark)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item,:host-context(kirby-popover .focused) ion-item{--background: whitesmoke}:host(.disabled),:host([disabled]){pointer-events:none}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"], dependencies: [{ kind: "component", type: i1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i1.IonReorder, selector: "ion-reorder" }, { kind: "component", type: i2.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n\n  <kirby-icon *ngIf=\"disclosure\" class=\"disclosure\" slot=\"end\" name=\"{{ disclosure }}\"></kirby-icon>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px;--transition: background-color 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}.disclosure{padding-left:4px;color:var(--kirby-semi-dark)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item{--background: whitesmoke}:host(.disabled),:host([disabled]){pointer-events:none}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
+            args: [{ selector: 'kirby-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-item\n  lines=\"none\"\n  [attr.disabled]=\"disabled\"\n  [attr.button]=\"selectable ? true : null\"\n  [attr.tabindex]=\"selectable ? null : 0\"\n  detail=\"false\"\n  (mousedown)=\"onMouseDown($event)\"\n>\n  <div class=\"outside\" slot=\"start\">\n    <ng-content select=\"[slot='outside']\"></ng-content>\n  </div>\n  <ng-content></ng-content>\n  <ion-reorder slot=\"end\" *ngIf=\"reorderable\">\n    <kirby-icon name=\"reorder\"></kirby-icon>\n  </ion-reorder>\n\n  <kirby-icon *ngIf=\"disclosure\" class=\"disclosure\" slot=\"end\" name=\"{{ disclosure }}\"></kirby-icon>\n</ion-item>\n", styles: [":host{display:block;position:relative}:host ion-item{--padding-top: var(--item-padding-top, 0px);--padding-bottom: var(--item-padding-bottom, 0px);--min-height: 56px;--padding-start: 16px;--inner-padding-top: 8px;--inner-padding-bottom: 8px;--inner-padding-end: 16px;--background: var(--kirby-item-background, var(--kirby-white));--background-activated-opacity: .99;--background-focused: var( --kirby-item-background-focused, var(--kirby-background-color) );--background-focused-opacity: 1;font-size:16px;--transition: background-color 80ms linear 0ms}@media (hover: hover) and (pointer: fine){:host ion-item:focus-visible{box-shadow:none;--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black)}}@media (hover: hover){:host ion-item:hover{--state-layer-opacity: .04;--state-layer-background-color: var(--kirby-black);--background-hover: var(--state-layer-background-color);--background-hover-opacity: var(--state-layer-opacity)}}:host ion-item:active,:host ion-item.ion-activated{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);--background-activated: var(--state-layer-background-color);--background-activated-opacity: var(--state-layer-opacity)}@media screen and (orientation: landscape){:host ion-item{--ion-safe-area-left: 0px;--ion-safe-area-right: 0px}}:host ion-item ::ng-deep>[slot=end]{margin-inline-start:0;margin-inline-end:0;text-align:right}:host ion-item ::ng-deep>time[slot=end]{margin-inline-start:12px}:host ion-item ::ng-deep>data[slot=end],:host ion-item ::ng-deep>[detail][slot=end],:host ion-item ::ng-deep>ion-reorder[slot=end]{margin-inline-start:16px}:host ion-item ::ng-deep>h1,:host ion-item ::ng-deep>h2,:host ion-item ::ng-deep>h3,:host ion-item ::ng-deep>h4,:host ion-item ::ng-deep>h5,:host ion-item ::ng-deep>h6,:host ion-item ::ng-deep>p,:host ion-item ::ng-deep>data{font-size:16px;line-height:24px;color:var(--kirby-text-color-black);display:block;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}:host ion-item ::ng-deep>h1.kirby-text-bold,:host ion-item ::ng-deep>h2.kirby-text-bold,:host ion-item ::ng-deep>h3.kirby-text-bold,:host ion-item ::ng-deep>h4.kirby-text-bold,:host ion-item ::ng-deep>h5.kirby-text-bold,:host ion-item ::ng-deep>h6.kirby-text-bold,:host ion-item ::ng-deep>p.kirby-text-bold,:host ion-item ::ng-deep>data.kirby-text-bold{font-weight:700}:host ion-item ::ng-deep>p{font-size:14px}:host ion-item ::ng-deep>[subtitle],:host ion-item ::ng-deep>[detail]{font-size:12px;line-height:16px}:host ion-item ::ng-deep>[subtitle]:not(:last-child){margin-bottom:4px}:host ion-item ::ng-deep>[detail]{color:var(--kirby-text-color-semi-dark)}:host ion-item ::ng-deep>:not([slot]){width:100%}:host ion-item ::ng-deep>input[slot=end],:host ion-item ::ng-deep>kirby-form-field[slot=end] input{margin-inline-start:16px;width:auto;text-align:right}:host.sm ion-item,:host-context(kirby-card.menu-popover) :host:not([size]) ion-item{--min-height: 44px}:host.xs ion-item{--min-height: 32px;--inner-padding-top: 4px;--inner-padding-bottom: 4px}:host .outside{left:4px;margin:0;position:absolute;width:16px;z-index:1}.disclosure{padding-left:4px;color:var(--kirby-semi-dark)}:host-context(kirby-dropdown) ion-item,:host-context(kirby-popover) ion-item{--min-height: 44px}:host-context(kirby-dropdown .focused) ion-item,:host-context(kirby-popover .focused) ion-item{--background: whitesmoke}:host(.disabled),:host([disabled]){pointer-events:none}:host(.selected) ion-item ::ng-deep>h1,:host(.selected) ion-item ::ng-deep>h2,:host(.selected) ion-item ::ng-deep>h3,:host(.selected) ion-item ::ng-deep>h4,:host(.selected) ion-item ::ng-deep>h5,:host(.selected) ion-item ::ng-deep>h6,:host(.selected) ion-item ::ng-deep>p,:host(.selected) ion-item ::ng-deep>data,:host-context(kirby-list .selected) ion-item ::ng-deep>h1,:host-context(kirby-list .selected) ion-item ::ng-deep>h2,:host-context(kirby-list .selected) ion-item ::ng-deep>h3,:host-context(kirby-list .selected) ion-item ::ng-deep>h4,:host-context(kirby-list .selected) ion-item ::ng-deep>h5,:host-context(kirby-list .selected) ion-item ::ng-deep>h6,:host-context(kirby-list .selected) ion-item ::ng-deep>p,:host-context(kirby-list .selected) ion-item ::ng-deep>data{font-weight:700}:host(.disclosure) ion-item{--inner-padding-end: 8px}:host-context(.shape-rounded .is-single) ion-item{--border-radius: 16px}:host-context(.has-header .is-single) ion-item::part(native){border-top-left-radius:0;border-top-right-radius:0}:host-context(.has-footer .is-single) ion-item::part(native){border-bottom-left-radius:0;border-bottom-right-radius:0}:host-context(.shape-rounded.has-sections .list-items kirby-list-item:first-of-type) ion-item::part(native){border-top-left-radius:16px;border-top-right-radius:16px}\n"] }]
         }], propDecorators: { disabled: [{
                 type: HostBinding,
                 args: ['class.disabled']
@@ -97,3 +97,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 export { ItemComponent, ItemModule, ItemSize, LabelComponent };
 //# sourceMappingURL=kirbydesign-designsystem-item.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-item.mjs.map

package/fesm2015/kirbydesign-designsystem-item.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-item.mjs","sources":["../../../../libs/designsystem/item/src/item.component.ts","../../../../libs/designsystem/item/src/item.component.html","../../../../libs/designsystem/item/src/label/label.component.ts","../../../../libs/designsystem/item/src/label/label.component.html","../../../../libs/designsystem/item/src/item.module.ts","../../../../libs/designsystem/item/src/kirbydesign-designsystem-item.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nexport enum ItemSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n}\n\n@Component({\n selector: 'kirby-item',\n templateUrl: './item.component.html',\n styleUrls: ['./item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ItemComponent {\n @HostBinding('class.disabled')\n @Input()\n disabled: boolean;\n @HostBinding('class.selected')\n @Input()\n selected: boolean;\n @HostBinding('class.disclosure')\n @Input()\n disclosure: 'link' \| 'arrow-more' \| 'arrow-down' \| 'arrow-up' \| null;\n @Input() selectable: boolean;\n\n @Input()\n reorderable: boolean;\n @HostBinding('class')\n @Input()\n size: ItemSize \| `${ItemSize}` = ItemSize.MD;\n\n // Prevent default when inside kirby-dropdown to avoid blurring dropdown:\n onMouseDown(event: MouseEvent) {\n if (\n event.currentTarget instanceof HTMLElement &&\n event.currentTarget.closest('kirby-dropdown')\n ) {\n event.preventDefault();\n }\n }\n}\n","<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"selectable ? true : null\"\n [attr.tabindex]=\"selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n\n <kirby-icon ngIf=\"disclosure\" class=\"disclosure\" slot=\"end\" name=\"{{ disclosure }}\"></kirby-icon>\n</ion-item>\n","import { Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-label',\n templateUrl: './label.component.html',\n styleUrls: ['./label.component.scss'],\n})\nexport class LabelComponent {\n @Input()\n direction: 'vertical' \| 'horizontal' = 'vertical';\n\n @HostBinding('class.horizontal')\n get _direction() {\n return this.direction === 'horizontal';\n }\n}\n","<ion-label>\n <ng-content></ng-content>\n</ion-label>\n","import { NgModule } from '@angular/core';\nimport { IonicModule } from '@ionic/angular';\nimport { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ItemComponent } from './item.component';\nimport { LabelComponent } from './label/label.component';\n\nconst declarations = [ItemComponent, LabelComponent];\n@NgModule({\n imports: [IonicModule, IconModule, CommonModule],\n declarations: [...declarations],\n exports: [...declarations],\n})\nexport class ItemModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;;;;;AAEY,IAAA,SAIX;AAJD,CAAA,UAAY,QAAQ,EAAA;AAClB,IAAA,QAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,QAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACT,IAAA,QAAA,CAAA,IAAA,CAAA,GAAA,IAAS,CAAA;AACX,CAAC,EAJW,QAAQ,KAAR,QAAQ,GAInB,EAAA,CAAA,CAAA,CAAA;MAQY,aAAa,CAAA;AAN1B,IAAA,WAAA,GAAA;AAsBE,QAAA,IAAA,CAAA,IAAI,GAA6B,QAAQ,CAAC,EAAE,CAAC;KAW9C;;AARC,IAAA,WAAW,CAAC,KAAiB,EAAA;AAC3B,QAAA,IACE,KAAK,CAAC,aAAa,YAAY,WAAW;AAC1C,YAAA,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAC7C;YACA,KAAK,CAAC,cAAc,EAAE,CAAC;AACxB,SAAA;KACF;;6HA1BU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,mBAAA,aAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,qWCd1B,ulBAkBA,EAAA,MAAA,EAAA,CAAA,~~qoJAAA~~,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,kBAAA,EAAA,QAAA,EAAA,YAAA,EAAA,UAAA,EAAA,UAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,EAAA,MAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,aAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;2FDJa,aAAa,EAAA,UAAA,EAAA,CAAA;kBANzB,SAAS;+BACE,YAAY,EAAA,eAAA,EAGL,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ulBAAA,EAAA,MAAA,EAAA,CAAA,~~qoJAAA~~,CAAA,EAAA,CAAA;8BAK/C,QAAQ,EAAA,CAAA;sBAFP,WAAW;uBAAC,gBAAgB,CAAA;;sBAC5B,KAAK;gBAIN,QAAQ,EAAA,CAAA;sBAFP,WAAW;uBAAC,gBAAgB,CAAA;;sBAC5B,KAAK;gBAIN,UAAU,EAAA,CAAA;sBAFT,WAAW;uBAAC,kBAAkB,CAAA;;sBAC9B,KAAK;gBAEG,UAAU,EAAA,CAAA;sBAAlB,KAAK;gBAGN,WAAW,EAAA,CAAA;sBADV,KAAK;gBAIN,IAAI,EAAA,CAAA;sBAFH,WAAW;uBAAC,OAAO,CAAA;;sBACnB,KAAK;;;MEtBK,cAAc,CAAA;AAL3B,IAAA,WAAA,GAAA;AAOE,QAAA,IAAS,CAAA,SAAA,GAA8B,UAAU,CAAC;KAMnD;AAJC,IAAA,IACI,UAAU,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,SAAS,KAAK,YAAY,CAAC;KACxC;;8HAPU,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAd,mBAAA,cAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,wJCP3B,0DAGA,EAAA,MAAA,EAAA,CAAA,m1FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,QAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;2FDIa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAL1B,SAAS;+BACE,aAAa,EAAA,QAAA,EAAA,0DAAA,EAAA,MAAA,EAAA,CAAA,m1FAAA,CAAA,EAAA,CAAA;8BAMvB,SAAS,EAAA,CAAA;sBADR,KAAK;gBAIF,UAAU,EAAA,CAAA;sBADb,WAAW;uBAAC,kBAAkB,CAAA;;;AEHjC,MAAM,YAAY,GAAG,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;MAMxC,UAAU,CAAA;;0HAAV,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAV,mBAAA,UAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,EAND,YAAA,EAAA,CAAA,aAAa,EAAE,cAAc,CAEvC,EAAA,OAAA,EAAA,CAAA,WAAW,EAAE,UAAU,EAAE,YAAY,CAF3B,EAAA,OAAA,EAAA,CAAA,aAAa,EAAE,cAAc,CAAA,EAAA,CAAA,CAAA;AAMtC,mBAAA,UAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAU,EAJX,OAAA,EAAA,CAAA,WAAW,EAAE,UAAU,EAAE,YAAY,CAAA,EAAA,CAAA,CAAA;2FAIpC,UAAU,EAAA,UAAA,EAAA,CAAA;kBALtB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE,CAAC,WAAW,EAAE,UAAU,EAAE,YAAY,CAAC;AAChD,oBAAA,YAAY,EAAE,CAAC,GAAG,YAAY,CAAC;AAC/B,oBAAA,OAAO,EAAE,CAAC,GAAG,YAAY,CAAC;iBAC3B,CAAA;;;ACbD;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-item.mjs","sources":["../../../../libs/designsystem/item/src/item.component.ts","../../../../libs/designsystem/item/src/item.component.html","../../../../libs/designsystem/item/src/label/label.component.ts","../../../../libs/designsystem/item/src/label/label.component.html","../../../../libs/designsystem/item/src/item.module.ts","../../../../libs/designsystem/item/src/kirbydesign-designsystem-item.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';\n\nexport enum ItemSize {\n XS = 'xs',\n SM = 'sm',\n MD = 'md',\n}\n\n@Component({\n selector: 'kirby-item',\n templateUrl: './item.component.html',\n styleUrls: ['./item.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ItemComponent {\n @HostBinding('class.disabled')\n @Input()\n disabled: boolean;\n @HostBinding('class.selected')\n @Input()\n selected: boolean;\n @HostBinding('class.disclosure')\n @Input()\n disclosure: 'link' \| 'arrow-more' \| 'arrow-down' \| 'arrow-up' \| null;\n @Input() selectable: boolean;\n\n @Input()\n reorderable: boolean;\n @HostBinding('class')\n @Input()\n size: ItemSize \| `${ItemSize}` = ItemSize.MD;\n\n // Prevent default when inside kirby-dropdown to avoid blurring dropdown:\n onMouseDown(event: MouseEvent) {\n if (\n event.currentTarget instanceof HTMLElement &&\n event.currentTarget.closest('kirby-dropdown')\n ) {\n event.preventDefault();\n }\n }\n}\n","<ion-item\n lines=\"none\"\n [attr.disabled]=\"disabled\"\n [attr.button]=\"selectable ? true : null\"\n [attr.tabindex]=\"selectable ? null : 0\"\n detail=\"false\"\n (mousedown)=\"onMouseDown($event)\"\n>\n <div class=\"outside\" slot=\"start\">\n <ng-content select=\"[slot='outside']\"></ng-content>\n </div>\n <ng-content></ng-content>\n <ion-reorder slot=\"end\" ngIf=\"reorderable\">\n <kirby-icon name=\"reorder\"></kirby-icon>\n </ion-reorder>\n\n <kirby-icon ngIf=\"disclosure\" class=\"disclosure\" slot=\"end\" name=\"{{ disclosure }}\"></kirby-icon>\n</ion-item>\n","import { Component, HostBinding, Input } from '@angular/core';\n\n@Component({\n selector: 'kirby-label',\n templateUrl: './label.component.html',\n styleUrls: ['./label.component.scss'],\n})\nexport class LabelComponent {\n @Input()\n direction: 'vertical' \| 'horizontal' = 'vertical';\n\n @HostBinding('class.horizontal')\n get _direction() {\n return this.direction === 'horizontal';\n }\n}\n","<ion-label>\n <ng-content></ng-content>\n</ion-label>\n","import { NgModule } from '@angular/core';\nimport { IonicModule } from '@ionic/angular';\nimport { CommonModule } from '@angular/common';\n\nimport { IconModule } from '@kirbydesign/designsystem/icon';\nimport { ItemComponent } from './item.component';\nimport { LabelComponent } from './label/label.component';\n\nconst declarations = [ItemComponent, LabelComponent];\n@NgModule({\n imports: [IonicModule, IconModule, CommonModule],\n declarations: [...declarations],\n exports: [...declarations],\n})\nexport class ItemModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/kirbydesign-designsystem-kirby-app.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-kirby-ionic-module.mjs CHANGED Viewed

@@ -1,29 +1,22 @@
 import * as i0 from '@angular/core';
 import { NgModule } from '@angular/core';
 import * as i1 from '@ionic/angular';
-import { IonicModule } from '@ionic/angular';
+import { isPlatform, AnimationController, IonicModule } from '@ionic/angular';
+const shouldHaveNoopAnimation = !isPlatform('hybrid');
+const navAnimationConfig = shouldHaveNoopAnimation && {
+    navAnimation: () => new AnimationController().create(),
+};
+const config = Object.assign({ mode: 'ios' }, navAnimationConfig);
 class KirbyIonicModule {
 }
 /** @nocollapse */ KirbyIonicModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: KirbyIonicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 /** @nocollapse */ KirbyIonicModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: KirbyIonicModule, imports: [i1.IonicModule], exports: [IonicModule] });
-/** @nocollapse */ KirbyIonicModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: KirbyIonicModule, imports: [IonicModule.forRoot({
-            mode: 'ios',
-            inputShims: true,
-            scrollAssist: true,
-            scrollPadding: false,
-        }), IonicModule] });
+/** @nocollapse */ KirbyIonicModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: KirbyIonicModule, imports: [IonicModule.forRoot(config), IonicModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: KirbyIonicModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        IonicModule.forRoot({
-                            mode: 'ios',
-                            inputShims: true,
-                            scrollAssist: true,
-                            scrollPadding: false,
-                        }),
-                    ],
+                    imports: [IonicModule.forRoot(config)],
                     exports: [IonicModule],
                 }]
         }] });
@@ -34,3 +27,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 export { KirbyIonicModule };
 //# sourceMappingURL=kirbydesign-designsystem-kirby-ionic-module.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-kirby-ionic-module.mjs.map

package/fesm2015/kirbydesign-designsystem-kirby-ionic-module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kirbydesign-designsystem-kirby-ionic-module.mjs","sources":["../../../../libs/designsystem/kirby-ionic-module/src/kirby-ionic.module.ts","../../../../libs/designsystem/kirby-ionic-module/src/kirbydesign-designsystem-kirby-ionic-module.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { IonicModule } from '@ionic/angular';\n\n~~@NgModule(~~{\n ~~imports~~: ~~[\n IonicModule~~.~~forRoot~~({\n mode: 'ios',\n ~~inputShims: true~~,\n ~~scrollAssist: true,\~~n ~~scrollPadding~~: ~~false,\n }~~)~~,\n~~ ],\n exports: [IonicModule],\n})\nexport class KirbyIonicModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;~~MAca~~,~~gBAAgB~~,~~CAAA;;gIAAhB~~,~~gBAAgB~~,~~EAAA~~,~~IAAA~~,~~EAAA~~,~~EAAA~~,~~EAAA~~,~~MAAA~~,~~EAAA~~,~~EAAA~~,~~CAAA~~,~~eAAA~~,~~CAAA~~,~~QAAA~~,~~EAAA~~,~~CAAA~~,~~CAAA;AAAhB~~,~~mBAAA~~,~~gBAAA~~,~~CAAA~~,~~IAAA~~,~~GAAA~~,~~EAAA~~,~~CAAA~~,~~mBAAA~~,~~CAAA~~,~~EAAA~~,~~UAAA~~,~~EAAA~~,~~QAAA~~,EAAA,~~OAAA~~,~~EAAA~~,~~QAAA~~,EAAA,~~QAAA~~,EAAA,EAAA,EAAA,~~IAAA~~,EAAA,~~gBAAgB~~,~~uCAFjB~~,~~WAAW~~,CAAA,EAAA,CAAA,CAAA;~~AAEV~~,mBAAA,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,~~EATzB~~,~~OAAA~~,EAAA,CAAA,~~WAAW,CAAC,OAAO,CAAC~~;~~AAClB~~,~~YAAA~~,~~IAAI~~,~~EAAE~~,~~KAAK;AACX~~,~~YAAA~~,~~UAAU~~,~~EAAE~~,~~IAAI;AAChB~~,~~YAAA~~,~~YAAY~~,~~EAAE,IAAI;AAClB,YAAA,aAAa,EAAE,KAAK;AACrB,SAAA,~~CAAC,~~EAEM~~,WAAW,CAAA,EAAA,CAAA,CAAA;2FAEV,gBAAgB,EAAA,UAAA,EAAA,CAAA;~~kBAX5B~~,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;~~AACR~~,~~oBAAA,~~OAAO,EAAE~~;wBACP~~,WAAW,CAAC,OAAO,CAAC~~;AAClB~~,~~4BAAA~~,~~IAAI~~,~~EAAE,KAAK;AACX,4BAAA,UAAU,EAAE,IAAI;AAChB,4BAAA,YAAY,EAAE,IAAI;AAClB,4BAAA,aAAa,EAAE,KAAK;yBACrB,~~CAAC;~~AACH~~,~~qBAAA;oBACD,~~OAAO,EAAE,CAAC,WAAW,CAAC;iBACvB,CAAA;;;~~ACbD~~;;AAEG;;;;"}
1	+ {"version":3,"file":"kirbydesign-designsystem-kirby-ionic-module.mjs","sources":["../../../../libs/designsystem/kirby-ionic-module/src/kirby-ionic.module.ts","../../../../libs/designsystem/kirby-ionic-module/src/kirbydesign-designsystem-kirby-ionic-module.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\nimport { AnimationController, IonicModule, isPlatform } from '@ionic/angular';\nimport { IonicConfig } from '@ionic/core';\n\nconst shouldHaveNoopAnimation = !isPlatform('hybrid');\n\nconst navAnimationConfig: IonicConfig = shouldHaveNoopAnimation && {\n navAnimation: () => new AnimationController().create(),\n};\n\nconst config: IonicConfig = {\n mode: 'ios',\n ...navAnimationConfig,\n};\n\n@NgModule({\n imports: [IonicModule.forRoot(config)],\n exports: [IonicModule],\n})\nexport class KirbyIonicModule {}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;;;AAIA,MAAM,uBAAuB,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;AAEtD,MAAM,kBAAkB,GAAgB,uBAAuB,IAAI;IACjE,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,CAAC,MAAM,EAAE;CACvD,CAAC;AAEF,MAAM,MAAM,mBACV,IAAI,EAAE,KAAK,EACR,EAAA,kBAAkB,CACtB,CAAC;MAMW,gBAAgB,CAAA;;gIAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAhB,mBAAA,gBAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,uCAFjB,WAAW,CAAA,EAAA,CAAA,CAAA;iIAEV,gBAAgB,EAAA,OAAA,EAAA,CAHjB,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,EAC3B,WAAW,CAAA,EAAA,CAAA,CAAA;2FAEV,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAJ5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;oBACtC,OAAO,EAAE,CAAC,WAAW,CAAC;iBACvB,CAAA;;;AClBD;;AAEG;;;;"}

package/fesm2015/kirbydesign-designsystem-list.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-loading-overlay.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-menu.mjs CHANGED Viewed

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

package/fesm2015/kirbydesign-designsystem-modal-v2.mjs CHANGED Viewed

@@ -80,10 +80,10 @@ class ModalV2Component {
     }
 }
 /** @nocollapse */ ModalV2Component.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ModalV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalV2Component, selector: "kirby-modal-v2", inputs: { flavor: "flavor", open: "open", canDismiss: "canDismiss", title: "title", hasCollapsibleTitle: "hasCollapsibleTitle", scrollDisabled: "scrollDisabled", breakpoints: "breakpoints", initialBreakpoint: "initialBreakpoint", size: "size", height: "height" }, outputs: { willPresent: "willPresent", didPresent: "didPresent", didDismiss: "didDismiss", willDismiss: "willDismiss" }, viewQueries: [{ propertyName: "modal", first: true, predicate: IonModal, descendants: true }, { propertyName: "modalElement", first: true, predicate: IonModal, descendants: true, read: ElementRef, static: true }, { propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], ngImport: i0, template: "<ion-modal\n  class=\"kirby-modal-v2\"\n  [isOpen]=\"open\"\n  [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n  [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n  [handle]=\"false\"\n  [canDismiss]=\"canDismiss\"\n  [ngClass]=\"size\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    <ion-header class=\"modal-header\">\n      <ion-toolbar>\n        <ng-content select=\"[header-start]\"></ng-content>\n        <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n          <ng-container\n            *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n          ></ng-container>\n        </ion-buttons>\n        <ion-title>{{ title }}</ion-title>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n          <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n        </ion-buttons>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n          <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n      <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n        <ion-toolbar>\n          <span class=\"kirby-text-large\">{{ title }}</span>\n        </ion-toolbar>\n      </ion-header>\n      <ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n    </ion-content>\n    <ng-content select=\"[footer]\"></ng-content>\n  </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 721px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }] });
+/** @nocollapse */ ModalV2Component.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalV2Component, selector: "kirby-modal-v2", inputs: { flavor: "flavor", open: "open", canDismiss: "canDismiss", title: "title", hasCollapsibleTitle: "hasCollapsibleTitle", scrollDisabled: "scrollDisabled", breakpoints: "breakpoints", initialBreakpoint: "initialBreakpoint", size: "size", height: "height" }, outputs: { willPresent: "willPresent", didPresent: "didPresent", didDismiss: "didDismiss", willDismiss: "willDismiss" }, viewQueries: [{ propertyName: "modal", first: true, predicate: IonModal, descendants: true }, { propertyName: "modalElement", first: true, predicate: IonModal, descendants: true, read: ElementRef, static: true }, { propertyName: "ionContent", first: true, predicate: IonContent, descendants: true }], ngImport: i0, template: "<ion-modal\n  class=\"kirby-modal-v2\"\n  [isOpen]=\"open\"\n  [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n  [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n  [handle]=\"false\"\n  [canDismiss]=\"canDismiss\"\n  [ngClass]=\"size\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    <ion-header class=\"modal-header\">\n      <ion-toolbar>\n        <ng-content select=\"[header-start]\"></ng-content>\n        <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n          <ng-container\n            *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n          ></ng-container>\n        </ion-buttons>\n        <ion-title>{{ title }}</ion-title>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n          <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n        </ion-buttons>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n          <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n      <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n        <ion-toolbar>\n          <span class=\"kirby-text-large\">{{ title }}</span>\n        </ion-toolbar>\n      </ion-header>\n      <ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n    </ion-content>\n    <ng-content select=\"[footer]\"></ng-content>\n  </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonModal, selector: "ion-modal", inputs: ["animated", "keepContentsMounted", "backdropBreakpoint", "backdropDismiss", "breakpoints", "canDismiss", "cssClass", "enterAnimation", "event", "handle", "handleBehavior", "initialBreakpoint", "isOpen", "keyboardClose", "leaveAnimation", "mode", "presentingElement", "showBackdrop", "swipeToClose", "translucent", "trigger"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-modal-v2', template: "<ion-modal\n  class=\"kirby-modal-v2\"\n  [isOpen]=\"open\"\n  [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n  [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n  [handle]=\"false\"\n  [canDismiss]=\"canDismiss\"\n  [ngClass]=\"size\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    <ion-header class=\"modal-header\">\n      <ion-toolbar>\n        <ng-content select=\"[header-start]\"></ng-content>\n        <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n          <ng-container\n            *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n          ></ng-container>\n        </ion-buttons>\n        <ion-title>{{ title }}</ion-title>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n          <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n        </ion-buttons>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n          <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n      <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n        <ion-toolbar>\n          <span class=\"kirby-text-large\">{{ title }}</span>\n        </ion-toolbar>\n      </ion-header>\n      <ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n    </ion-content>\n    <ng-content select=\"[footer]\"></ng-content>\n  </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 721px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
+            args: [{ selector: 'kirby-modal-v2', template: "<ion-modal\n  class=\"kirby-modal-v2\"\n  [isOpen]=\"open\"\n  [breakpoints]=\"flavor === 'drawer' ? breakpoints : undefined\"\n  [initialBreakpoint]=\"flavor === 'drawer' ? initialBreakpoint : undefined\"\n  [handle]=\"false\"\n  [canDismiss]=\"canDismiss\"\n  [ngClass]=\"size\"\n  (willPresent)=\"_onWillPresent($event)\"\n  (didPresent)=\"_onDidPresent($event)\"\n  (willDismiss)=\"_onWillDismiss($event)\"\n  (didDismiss)=\"_onDidDismiss($event)\"\n>\n  <ng-template>\n    <ion-header class=\"modal-header\">\n      <ion-toolbar>\n        <ng-content select=\"[header-start]\"></ng-content>\n        <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n          <ng-container\n            *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"\n          ></ng-container>\n        </ion-buttons>\n        <ion-title>{{ title }}</ion-title>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n          <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n        </ion-buttons>\n        <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n          <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n        </ion-buttons>\n      </ion-toolbar>\n    </ion-header>\n\n    <ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n      <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n        <ion-toolbar>\n          <span class=\"kirby-text-large\">{{ title }}</span>\n        </ion-toolbar>\n      </ion-header>\n      <ng-container>\n        <ng-content></ng-content>\n      </ng-container>\n    </ion-content>\n    <ng-content select=\"[footer]\"></ng-content>\n  </ng-template>\n</ion-modal>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"_closeModal()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
         }], propDecorators: { modal: [{
                 type: ViewChild,
                 args: [IonModal]
@@ -130,10 +130,10 @@ class ModalV2FooterComponent {
     }
 }
 /** @nocollapse */ ModalV2FooterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalV2FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ModalV2FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalV2FooterComponent, selector: "kirby-modal-v2-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, ngImport: i0, template: "<ion-footer>\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-prev]\"></ng-content>\n  </div>\n\n  <div class=\"default-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-next]\"></ng-content>\n  </div>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;display:grid;grid-template-rows:40px;grid-template-columns:40px 1fr 40px;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:24px;padding-bottom:calc(24px + var(--kirby-modal-footer-safe-area-bottom, 0px))}ion-footer .default-content{display:flex;align-items:center;justify-content:center}ion-footer .nav-button{display:flex;justify-content:center;align-items:center}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }] });
+/** @nocollapse */ ModalV2FooterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalV2FooterComponent, selector: "kirby-modal-v2-footer", inputs: { snapToKeyboard: "snapToKeyboard", type: "type" }, host: { properties: { "class.snap-to-keyboard": "this.snapToKeyboard", "class": "this.type" } }, ngImport: i0, template: "<ion-footer>\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-prev]\"></ng-content>\n  </div>\n\n  <div class=\"default-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-next]\"></ng-content>\n  </div>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;display:grid;grid-template-rows:40px;grid-template-columns:40px 1fr 40px;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:24px;padding-bottom:calc(24px + var(--kirby-modal-footer-safe-area-bottom, 0px))}ion-footer .default-content{display:flex;align-items:center;justify-content:center}ion-footer .nav-button{display:flex;justify-content:center;align-items:center}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"], dependencies: [{ kind: "component", type: i2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalV2FooterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-modal-v2-footer', template: "<ion-footer>\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-prev]\"></ng-content>\n  </div>\n\n  <div class=\"default-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-next]\"></ng-content>\n  </div>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;display:grid;grid-template-rows:40px;grid-template-columns:40px 1fr 40px;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:24px;padding-bottom:calc(24px + var(--kirby-modal-footer-safe-area-bottom, 0px))}ion-footer .default-content{display:flex;align-items:center;justify-content:center}ion-footer .nav-button{display:flex;justify-content:center;align-items:center}@media (max-width: 720px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
+            args: [{ selector: 'kirby-modal-v2-footer', template: "<ion-footer>\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-prev]\"></ng-content>\n  </div>\n\n  <div class=\"default-content\">\n    <ng-content></ng-content>\n  </div>\n\n  <div class=\"nav-button\">\n    <ng-content select=\"[nav-next]\"></ng-content>\n  </div>\n</ion-footer>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-footer{--kirby-inputs-background-color: var(--kirby-dark-overlay);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: none;display:grid;grid-template-rows:40px;grid-template-columns:40px 1fr 40px;justify-content:var(--kirby-modal-footer-justify-content, center);align-items:center;background-color:var(--kirby-modal-footer-background, var(--kirby-white));color:var(--kirby-modal-footer-color, var(--kirby-white-contrast));padding:24px;padding-bottom:calc(24px + var(--kirby-modal-footer-safe-area-bottom, 0px))}ion-footer .default-content{display:flex;align-items:center;justify-content:center}ion-footer .nav-button{display:flex;justify-content:center;align-items:center}@media (max-width: 767px){:host{--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}}:host{box-sizing:border-box}:host(.snap-to-keyboard) ion-footer{transition:transform .15s ease-out}:host(.light) ion-footer{background-color:var(--kirby-background-color)}:host(.inline) ion-footer{background:transparent;box-shadow:none}:host-context(.keyboard-visible).snap-to-keyboard ion-footer{transition:transform .25s ease-out 1ms;transform:translateY(calc((var(--keyboard-offset, 0px) - var(--kirby-modal-footer-safe-area-bottom, 0px)) * -1))}:host-context(.modal-wrapper.full-height){--kirby-modal-footer-safe-area-bottom: var(--kirby-safe-area-bottom)}\n"] }]
         }], propDecorators: { snapToKeyboard: [{
                 type: HostBinding,
                 args: ['class.snap-to-keyboard']
@@ -162,10 +162,10 @@ class ModalV2WrapperComponent {
     }
 }
 /** @nocollapse */ ModalV2WrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalV2WrapperComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ ModalV2WrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalV2WrapperComponent, selector: "kirby-modal-v2-wrapper", inputs: { flavor: "flavor", title: "title", hasCollapsibleTitle: "hasCollapsibleTitle", scrollDisabled: "scrollDisabled" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ng-content select=\"[header-start]\"></ng-content>\n    <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n      <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n  <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\">{{ title }}</span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container>\n    <ng-content></ng-content>\n  </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 721px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{height:100%;display:flex;flex-direction:column;--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }] });
+/** @nocollapse */ ModalV2WrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ModalV2WrapperComponent, selector: "kirby-modal-v2-wrapper", inputs: { flavor: "flavor", title: "title", hasCollapsibleTitle: "hasCollapsibleTitle", scrollDisabled: "scrollDisabled" }, ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ng-content select=\"[header-start]\"></ng-content>\n    <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n      <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n  <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\">{{ title }}</span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container>\n    <ng-content></ng-content>\n  </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{height:100%;display:flex;flex-direction:column;--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: i3.IconComponent, selector: "kirby-icon", inputs: ["size", "name", "customName"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[kirby-button],Button[kirby-button]", inputs: ["attentionLevel", "noDecoration", "themeColor", "expand", "isFloating", "size", "showIconOnly"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ModalV2WrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'kirby-modal-v2-wrapper', template: "<ion-header>\n  <ion-toolbar>\n    <ng-content select=\"[header-start]\"></ng-content>\n    <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n      <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n  <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\">{{ title }}</span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container>\n    <ng-content></ng-content>\n  </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 721px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{height:100%;display:flex;flex-direction:column;--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 721px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
+            args: [{ selector: 'kirby-modal-v2-wrapper', template: "<ion-header>\n  <ion-toolbar>\n    <ng-content select=\"[header-start]\"></ng-content>\n    <ion-buttons slot=\"start\" *ngIf=\"flavor === 'drawer'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'arrow-down' }\"></ng-container>\n    </ion-buttons>\n    <ion-title>{{ title }}</ion-title>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'modal'\">\n      <ng-container *ngTemplateOutlet=\"closeButton; context: { icon: 'close' }\"></ng-container>\n    </ion-buttons>\n    <ion-buttons slot=\"end\" *ngIf=\"flavor === 'drawer'\">\n      <ng-content select=\"[drawer-supplementary-action]\"></ng-content>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [scrollEvents]=\"true\" [scrollY]=\"!scrollDisabled\">\n  <ion-header *ngIf=\"hasCollapsibleTitle\" collapse=\"condense\">\n    <ion-toolbar>\n      <span class=\"kirby-text-large\">{{ title }}</span>\n    </ion-toolbar>\n  </ion-header>\n  <ng-container>\n    <ng-content></ng-content>\n  </ng-container>\n</ion-content>\n<ng-content select=\"[footer]\"></ng-content>\n\n<ng-template #closeButton let-icon=\"icon\">\n  <button kirby-button attentionLevel=\"1\" size=\"md\" (click)=\"close()\">\n    <kirby-icon [name]=\"icon\"></kirby-icon>\n  </button>\n</ng-template>\n", styles: [":host,:root{--kirby-white-overlay: hsl(0deg 0% 100% / 15%);--kirby-white-overlay-10: hsl(0deg 0% 100% / 10%);--kirby-white-overlay-20: hsl(0deg 0% 100% / 20%);--kirby-white-overlay-30: hsl(0deg 0% 100% / 30%);--kirby-white-overlay-40: hsl(0deg 0% 100% / 40%);--kirby-white-overlay-50: hsl(0deg 0% 100% / 50%);--kirby-dark-overlay: hsl(0deg 0% 11% / 6%);--kirby-dark-overlay-10: hsl(0deg 0% 11% / 10%);--kirby-dark-overlay-20: hsl(0deg 0% 11% / 20%);--kirby-dark-overlay-30: hsl(0deg 0% 11% / 30%);--kirby-dark-overlay-40: hsl(0deg 0% 11% / 40%);--kirby-dark-overlay-50: hsl(0deg 0% 11% / 50%);--kirby-white: hsl(0deg 0% 100%);--kirby-black: hsl(0deg 0% 11%);--kirby-semi-dark: hsl(0deg 0% 56%);--kirby-elevation-2: 0 1px 24px 0 rgb(28 28 28 / 4%);--kirby-elevation-4: 0 20px 30px -15px hsla(0deg 0% 11% 30%), 0 0 5px 0 hsla(0deg 0% 11% 8%)}ion-item-option.primary{background-color:var(--kirby-primary);color:var(--kirby-primary-contrast)}ion-item-option.secondary{background-color:var(--kirby-secondary);color:var(--kirby-secondary-contrast)}ion-item-option.tertiary{background-color:var(--kirby-tertiary);color:var(--kirby-tertiary-contrast)}ion-item-option.success{background-color:var(--kirby-success);color:var(--kirby-success-contrast)}ion-item-option.warning{background-color:var(--kirby-warning);color:var(--kirby-warning-contrast)}ion-item-option.danger{background-color:var(--kirby-danger);color:var(--kirby-danger-contrast)}ion-item-option.white-overlay{background-color:var(--kirby-white-overlay);color:var(--kirby-white-overlay-contrast)}ion-item-option.light{background-color:var(--kirby-light);color:var(--kirby-light-contrast)}ion-item-option.medium{background-color:var(--kirby-medium);color:var(--kirby-medium-contrast)}ion-item-option.dark{background-color:var(--kirby-dark);color:var(--kirby-dark-contrast)}ion-item-option.dark-overlay{background-color:var(--kirby-dark-overlay);color:var(--kirby-dark-overlay-contrast)}ion-header{--kirby-inputs-background-color: var(--kirby-white);--kirby-inputs-background-color-hover: var(--kirby-dark-overlay-10);--kirby-inputs-background-color-active: var(--kirby-dark-overlay-20);--kirby-inputs-color: var(--kirby-black);--kirby-inputs-indicator-background-color: var(--kirby-black);--kirby-inputs-indicator-color: var(--kirby-white);--kirby-inputs-placeholder-color: var(--kirby-semi-dark);--kirby-inputs-elevation: var(--kirby-elevation-2);box-sizing:border-box}ion-header ion-toolbar{--padding-start: 16px;--padding-end: 16px;--padding-bottom: 12px;--padding-top: 12px;--border-width: 0;--background: transparent}ion-header ion-toolbar button{background-color:var(--kirby-white)}ion-header.modal-header{border-bottom:1px solid var(--kirby-medium)}@media (min-width: 768px){ion-header ion-toolbar{--padding-start: 24px;--padding-end: 24px;--padding-bottom: 24px;--padding-top: 24px}}:host{height:100%;display:flex;flex-direction:column;--vh100: var(--vh, 1vh) * 100;--header-height: 0px;--footer-height: 0px}ion-title{box-sizing:border-box;padding-inline-start:calc(48px + var(--padding-start));padding-inline-end:calc(48px + var(--padding-end))}ion-content{--background: transparent;--color: var(--kirby-modal-color, var(--kirby-black));--padding-top: 24px;--padding-bottom: 24px;--padding-start: 16px;--padding-end: 16px;display:flex;flex-direction:column}ion-content ::ng-deep>*{box-sizing:border-box;display:block}@media (min-width: 768px){ion-content{--padding-top: 40px;--padding-bottom: 40px;--padding-start: 48px;--padding-end: 48px}}:host(.collapsible-title) ion-content{--padding-top: 0px}:host(.collapsible-title) ion-content ion-header ion-toolbar:first-of-type{padding-top:0;--padding-top: 0px;--padding-bottom: 0px;--padding-start: 0px;--padding-end: 0px}:host(.collapsible-title) ion-title{font-size:16px;font-weight:700}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { flavor: [{
                 type: Input
             }], title: [{
@@ -255,3 +255,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
 export { KirbyModalModule, ModalV2Component, ModalV2Controller, ModalV2FooterComponent, ModalV2RoutingComponent, ModalV2WrapperComponent };
 //# sourceMappingURL=kirbydesign-designsystem-modal-v2.mjs.map
+//# sourceMappingURL=kirbydesign-designsystem-modal-v2.mjs.map