@kirbydesign/designsystem 10.0.0 → 10.1.1

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

@@ -18,10 +18,10 @@ class AffixDirective {
     constructor(el) {
         this.el = el;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: AffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AffixDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -137,10 +137,10 @@ class DateInputDirective {
             ? value.slice(0, value.lastIndexOf(lastNumber[1]) + 1)
             : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker" }, host: { listeners: { "input": "onInput()" } }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker" }, host: { listeners: { "input": "onInput()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DateInputDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -161,10 +161,10 @@ class FormFieldMessageComponent {
     constructor() {
         this.position = 'left';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: { text: "text", position: "position" }, ngImport: i0, template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: { text: "text", position: "position" }, ngImport: i0, template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field-message', template: "{{ text }}\n<ng-content></ng-content>\n", styles: [":host{font-style:italic;font-size:12px;font-weight:400;font-stretch:normal;line-height:16px;min-height:16px;letter-spacing:normal;color:var(--kirby-text-color-black)}\n"] }]
         }], propDecorators: { text: [{
@@ -195,10 +195,10 @@ class InputCounterComponent {
             this._inputChangeSubscription.unsubscribe();
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: InputCounterComponent, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputCounterComponent, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InputCounterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputCounterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-input-counter', template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n" }]
         }], propDecorators: { listenTo: [{
@@ -251,10 +251,10 @@ class InputComponent {
             this.kirbyChange.emit(changes.value.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: InputComponent, isStandalone: true, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker"] }], ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host[type=date]{background-color:var(--date-input-background-color)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host(.md).error{padding-block:calc(.5em - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: InputComponent, isStandalone: true, selector: "input[kirby-input]", inputs: { type: "type", size: "size", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", value: "value", maxlength: "maxlength", inputmode: "inputmode" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.value": "this.value", "attr.maxlength": "this.maxlength", "attr.inputmode": "this.inputmode" } }, usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker"] }], ngImport: i0, template: '', isInline: true, styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host[type=date]{background-color:var(--date-input-background-color)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host(.md).error{padding-block:calc(.5em - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, imports: [CommonModule], hostDirectives: [
                         {
@@ -262,7 +262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
                             // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
                             inputs: ['prefillYear', 'useNativeDatePicker'],
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host[type=date]{background-color:var(--date-input-background-color)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host(.md).error{padding-block:calc(.5em - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:var(--kirby-inputs-background-color-hover);cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:var(--kirby-inputs-background-color-active)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host[type=date]{background-color:var(--date-input-background-color)}:host[type=number]{-webkit-appearance:textfield;appearance:textfield}:host::-webkit-outer-spin-button,:host::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}:host(.md){border-radius:24px;padding-block:.5em}:host(.md).error{padding-block:calc(.5em - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:700}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-text-color-semi-dark)}.date-mask{font-family:var(--kirby-font-family);line-height:1.5;color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
                 type: Input
             }], size: [{
@@ -334,12 +334,12 @@ class TextareaComponent {
             this.kirbyChange.emit(changes.value.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 768px){:host{resize:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class.borderless": "this.borderless", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media (min-width: 768px){:host{resize:vertical}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}@media (min-width: 768px){:host{resize:vertical}}\n"] }]
+            args: [{ standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "<ng-content *ngIf=\"!value\"></ng-content>\n<ng-container *ngIf=\"value\">{{ value }}</ng-container>\n", styles: [":host(.error){border:1px solid var(--kirby-danger);padding:calc(1em - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}@media (hover: hover) and (pointer: fine){:host:focus{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}:host:focus:not(:focus-visible){box-shadow:0 1px 24px #1c1c1c0a,0 0 0 0 transparent}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:0 1px 24px #1c1c1c0a,0 0 0 2px var(--kirby-background-color),0 0 0 4px #4d90fe}}:host{background-color:var(--kirby-inputs-background-color);color:var(--kirby-inputs-color);border:none;box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:1.5;outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:16px;box-shadow:var(--kirby-inputs-elevation);padding:1em;width:100%}:host:host-context(kirby-item),:host.borderless{border-radius:0;box-shadow:none;padding-inline:0;width:auto}:host:disabled{background-color:var(--kirby-light-tint);color:var(--kirby-text-color-semi-dark);box-shadow:none}:host::placeholder{color:var(--kirby-inputs-placeholder-color)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:1.5em;text-align:start}}@media (hover: hover){:host:not(:disabled):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;background-color:#f5f5f5;cursor:text}}:host:not(:disabled):active,:host:not(:disabled).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);background-color:#ebebeb}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media (min-width: 768px){:host{resize:vertical}}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], borderless: [{
@@ -481,10 +481,10 @@ class FormFieldComponent {
             this.resizeObserverService.unobserve(affix.el);
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i3.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: FormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }, { propertyName: "dateInput", first: true, predicate: DateInputDirective, descendants: true }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message !== undefined || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message !== undefined\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      <ng-container *ngIf=\"showDefaultCalendarIcon\">\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}.affix-container:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media (hover: hover){.affix-container:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}.affix-container:has(input[type=date]):active,.affix-container:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}.affix-container:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i3.ResizeObserverService }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: FormFieldComponent, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "textarea", first: true, predicate: TextareaComponent, descendants: true, read: ElementRef }, { propertyName: "dateInput", first: true, predicate: DateInputDirective, descendants: true }, { propertyName: "affixElements", predicate: AffixDirective }], ngImport: i0, template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message !== undefined || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message !== undefined\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      <ng-container *ngIf=\"showDefaultCalendarIcon\">\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}.affix-container:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media (hover: hover){.affix-container:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}.affix-container:has(input[type=date]):active,.affix-container:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}.affix-container:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</label>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n</ng-container>\n\n<div *ngIf=\"message !== undefined || counter\" class=\"texts\">\n  <kirby-form-field-message\n    *ngIf=\"message !== undefined\"\n    class=\"message\"\n    [text]=\"message\"\n  ></kirby-form-field-message>\n\n  <div *ngIf=\"counter\" class=\"counter\">\n    <ng-content select=\"kirby-input-counter\"></ng-content>\n  </div>\n</div>\n\n<ng-template #slottedInputTemplate>\n  <div class=\"affix-container\">\n    <div class=\"prefix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='prefix']\"></ng-content>\n    </div>\n    <ng-content select=\"input[kirby-input]\"></ng-content>\n    <ng-content select=\"textarea[kirby-textarea]\"></ng-content>\n    <ng-content select=\"kirby-radio-group\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      <ng-container *ngIf=\"showDefaultCalendarIcon\">\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      </ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  <ng-container *ngIf=\"label\">\n    <span class=\"text\">{{ label }}</span>\n  </ng-container>\n</ng-template>\n\n<ng-template #labelTemplate>\n  <ng-container *ngIf=\"label\">\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  </ng-container>\n</ng-template>\n", styles: [":host{display:block;position:relative;margin-bottom:16px}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px 16px 0}.texts .message{flex:75%}.texts .message:only-child{flex-basis:auto}.texts .counter{flex:25%;text-align:right}label{display:block}.text{display:block;font-size:14px;font-weight:300;line-height:20px;margin-bottom:4px;padding:0 16px}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:12px}.affix-container .suffix{right:12px}.affix-container .semi-dark-text ::ng-deep>span,.affix-container .semi-dark-text ::ng-deep>h1,.affix-container .semi-dark-text ::ng-deep>h2,.affix-container .semi-dark-text ::ng-deep>h3,.affix-container .semi-dark-text ::ng-deep>h4,.affix-container .semi-dark-text ::ng-deep>h5,.affix-container .semi-dark-text ::ng-deep>h6,.affix-container .semi-dark-text ::ng-deep>p,.affix-container .semi-dark-text ::ng-deep>data{color:var(--kirby-text-color-semi-dark)}.affix-container:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media (hover: hover){.affix-container:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}.affix-container:has(input[type=date]):active,.affix-container:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}.affix-container:has(input[type=date]) .suffix:not(:empty){top:8px;bottom:8px;padding-inline-start:12px;pointer-events:none;background-color:var(--date-input-background-color);transition:all 80ms linear 0ms;transition-property:background-color}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.PlatformService }, { type: i0.Renderer2 }, { type: i2.WindowRef }, { type: i3.ResizeObserverService }], propDecorators: { label: [{
@@ -598,8 +598,8 @@ class DecimalMaskDirective {
         maxlengthValue = -Math.abs(maxlengthValue);
         return this.min === undefined ? maxlengthValue : -Math.abs(Math.max(this.min, maxlengthValue));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 multi: true,
@@ -607,7 +607,7 @@ class DecimalMaskDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: DecimalMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: DecimalMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -644,11 +644,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImpor
 
 const declarations = [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent];
 class FormFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], imports: [CommonModule, DecimalMaskDirective, IconModule], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], imports: [CommonModule, DecimalMaskDirective, IconModule], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DecimalMaskDirective, IconModule],

package/fesm2022/kirbydesign-designsystem-header.mjs

@@ -11,40 +11,40 @@ import * as i2 from '@kirbydesign/designsystem/shared';
 import { FitHeadingDirective } from '@kirbydesign/designsystem/shared';
 
 class HeaderActionsDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: HeaderActionsDirective, selector: "[kirbyHeaderActions]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: HeaderActionsDirective, selector: "[kirbyHeaderActions]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderActionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderActionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderActions]',
                 }]
         }] });
 class HeaderCustomSectionDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderCustomSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: HeaderCustomSectionDirective, selector: "[kirbyHeaderCustomSection]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderCustomSectionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: HeaderCustomSectionDirective, selector: "[kirbyHeaderCustomSection]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderCustomSectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderCustomSectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderCustomSection]',
                 }]
         }] });
 class HeaderTitleActionIconDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderTitleActionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: HeaderTitleActionIconDirective, selector: "[kirbyHeaderTitleActionIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderTitleActionIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: HeaderTitleActionIconDirective, selector: "[kirbyHeaderTitleActionIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderTitleActionIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderTitleActionIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderTitleActionIcon]',
                 }]
         }] });
 class HeaderCustomFlagDirective {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderCustomFlagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.4", type: HeaderCustomFlagDirective, selector: "[kirbyHeaderCustomFlag]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderCustomFlagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.8", type: HeaderCustomFlagDirective, selector: "[kirbyHeaderCustomFlag]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderCustomFlagDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderCustomFlagDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kirbyHeaderCustomFlag]',
@@ -99,10 +99,10 @@ class HeaderComponent {
             this.title$.next(changes.title.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.4", type: HeaderComponent, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2", hasInteractiveTitle: "hasInteractiveTitle" }, outputs: { titleClick: "titleClick" }, host: { properties: { "class.centered": "this.centered" } }, queries: [{ propertyName: "avatar", first: true, predicate: AvatarComponent, descendants: true }, { propertyName: "progressCircle", first: true, predicate: ProgressCircleComponent, descendants: true }, { propertyName: "flag", first: true, predicate: FlagComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: HeaderActionsDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customSectionTemplate", first: true, predicate: HeaderCustomSectionDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customFlagTemplate", first: true, predicate: HeaderCustomFlagDirective, descendants: true, read: (TemplateRef) }, { propertyName: "titleActionIconTemplate", first: true, predicate: HeaderTitleActionIconDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", first: true, predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value - value: -->\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <ng-container\n        *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n      ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (max-width: 767px){:host:has(>.avatar::ng-deep){margin-top:8px}}@media (min-width: 768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>h1.title{margin-bottom:0}@media (min-width: 768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:24px}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>h1.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:24px;margin-inline:8px}@media (max-width: 767px){.actions:not(.emphasize){display:none}}@media (min-width: 768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;max-width:calc(100% - 32px)}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.flag .custom-flag{margin-block:4px}.title{margin-bottom:2px}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.8", type: HeaderComponent, selector: "kirby-header", inputs: { centered: "centered", titleMaxLines: "titleMaxLines", emphasizeActions: "emphasizeActions", title: "title", value: "value", valueUnit: "valueUnit", subtitle1: "subtitle1", subtitle2: "subtitle2", hasInteractiveTitle: "hasInteractiveTitle" }, outputs: { titleClick: "titleClick" }, host: { properties: { "class.centered": "this.centered" } }, queries: [{ propertyName: "avatar", first: true, predicate: AvatarComponent, descendants: true }, { propertyName: "progressCircle", first: true, predicate: ProgressCircleComponent, descendants: true }, { propertyName: "flag", first: true, predicate: FlagComponent, descendants: true }, { propertyName: "actionsTemplate", first: true, predicate: HeaderActionsDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customSectionTemplate", first: true, predicate: HeaderCustomSectionDirective, descendants: true, read: (TemplateRef) }, { propertyName: "customFlagTemplate", first: true, predicate: HeaderCustomFlagDirective, descendants: true, read: (TemplateRef) }, { propertyName: "titleActionIconTemplate", first: true, predicate: HeaderTitleActionIconDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "titleElement", first: true, predicate: ["titleElement"], descendants: true, read: ElementRef }, { propertyName: "actionsElement", first: true, predicate: ["actionsElement"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value - value: -->\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <ng-container\n        *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n      ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (max-width: 767px){:host:has(>.avatar::ng-deep){margin-top:8px}}@media (min-width: 768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>h1.title{margin-bottom:0}@media (min-width: 768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:24px}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>h1.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:24px;margin-inline:8px}@media (max-width: 767px){.actions:not(.emphasize){display:none}}@media (min-width: 768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;max-width:calc(100% - 32px)}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.flag .custom-flag{margin-block:4px}.title{margin-bottom:2px}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:8px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.FitHeadingDirective, selector: "h1[kirbyFitHeading],h2[kirbyFitHeading],h3[kirbyFitHeading]", inputs: ["kirbyFitHeading"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!!avatar || !!progressCircle\" class=\"avatar\">\n  <ng-content select=\"kirby-avatar,kirby-progress-circle\"></ng-content>\n</div>\n\n<div *ngIf=\"!!flag || !!customFlagTemplate\" class=\"flag\">\n  <ng-container *ngIf=\"!!flag\">\n    <ng-content select=\"kirby-flag\"></ng-content>\n  </ng-container>\n\n   <!-- Custom Content in Flag section: -->\n  <ng-container *ngIf=\"!!customFlagTemplate\">\n    <div class=\"custom-flag\">\n        <ng-container *ngTemplateOutlet=\"customFlagTemplate\"></ng-container>\n    </div>\n  </ng-container>\n</div>\n\n<div class=\"container\">\n    <!-- Title and value - title: -->\n  <h1 *ngIf=\"!!title && !!value\" #titleElement class=\"title kirby-text-medium\" [class.clickable]=\"hasInteractiveTitle !== false && titleClick.observed\" [class.has-icon]=\"!!titleActionIconTemplate\" (click)=\"onTitleClick($event)\">\n    {{ title }}\n    <ng-container *ngTemplateOutlet=\"titleActionIconTemplate\"></ng-container>\n  </h1>\n  <div class=\"title-container\">\n    <!-- Only title, no value: -->\n    <h1 *ngIf=\"!!title && !value\" #titleElement class=\"title\" [kirbyFitHeading]=\"fitHeadingConfig\">\n      {{ title }}\n    </h1>\n  \n    <!-- Title and value - value: -->\n    <h3 *ngIf=\"!!value\" class=\"value kirby-text-display-3\" [kirbyFitHeading]=\"fitHeadingConfig\">{{ value }}<span class=\"value-unit semi-dark-text\" *ngIf=\"!!valueUnit\">{{ valueUnit }}</span></h3>\n  \n    <!-- Subtitles: -->\n    <ng-container\n        *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles1 }\"\n      ></ng-container>\n    <ng-container\n      *ngTemplateOutlet=\"subTitleTemplate; context: { $implicit: _subtitles2 }\"\n    ></ng-container>\n\n    <!-- Custom section -->\n    <div\n      *ngIf=\"!!customSectionTemplate\"\n      class=\"custom-section\"\n    >\n      <ng-container *ngTemplateOutlet=\"customSectionTemplate\"></ng-container>\n    </div>\n  </div>\n  \n  <!-- Actions: -->\n  <div\n      *ngIf=\"!!actionsTemplate\"\n      #actionsElement\n      class=\"actions\"\n      [class.emphasize]=\"emphasizeActions\"\n    >\n      <ng-container *ngTemplateOutlet=\"actionsTemplate; injector: _actionGroupInjector\"></ng-container>\n    </div>\n</div>\n\n<ng-template #subTitleTemplate let-subtitles>\n  <div *ngIf=\"!!subtitles\" class=\"subtitle kirby-text-small\">\n    <span *ngFor=\"let subtitle of subtitles\">{{subtitle}}</span>\n  </div>\n</ng-template>", styles: [":host{display:flex;flex-direction:column;margin-top:16px;margin-bottom:32px}@media (max-width: 767px){:host:has(>.avatar::ng-deep){margin-top:8px}}@media (min-width: 768px){:host{margin-top:24px}}.container{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}.container>h1.title{margin-bottom:0}@media (min-width: 768px){:host(:not(.single-column)) .container:has(>.actions){display:grid;grid-template-columns:auto max-content;column-gap:24px}:host(:not(.single-column)) .container:has(>.actions) .title-container{grid-column-start:1}}:host(.centered){align-items:center}:host(.centered) .container{align-items:center}:host(.centered) .container>h1.title{text-align:center}:host(.centered) .container>h1.title.has-icon{justify-content:center}:host(.centered) .title-container{align-items:center;text-align:center}@media (min-width: 768px){:host(.centered):not(.single-column) .container:has(>.actions){grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-self:stretch}:host(.centered):not(.single-column) .container:has(>.actions) .actions{align-self:flex-start}:host(.centered):not(.single-column) .container:has(>.actions)>h1.title,:host(.centered):not(.single-column) .container:has(>.actions) .title-container{grid-column-start:2}}.actions{margin-top:24px;margin-inline:8px}@media (max-width: 767px){.actions:not(.emphasize){display:none}}@media (min-width: 768px){:host(:not(.single-column)) .actions{display:flex;justify-content:flex-end;margin-top:0}}.avatar,.flag,.title-container,.container>h1.title{margin-inline:16px}.title-container{display:flex;flex-direction:column;overflow:hidden;max-width:calc(100% - 32px)}.avatar{margin-bottom:16px}.flag{margin-bottom:4px}.flag .custom-flag{margin-block:4px}.title{margin-bottom:2px}.title.clickable{cursor:pointer}.title.has-icon{display:flex;flex-direction:row;align-items:center}.value{max-width:100%;margin-bottom:4px}.value-unit{font-weight:initial;color:var(--kirby-text-color-semi-dark);margin-left:4px;font-size:50%}.subtitle{display:flex;flex-flow:row wrap;column-gap:.25em}.subtitle span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.custom-section{margin-top:8px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { centered: [{
@@ -167,8 +167,8 @@ const declarations = [
     HeaderCustomFlagDirective,
 ];
 class HeaderModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.4", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: HeaderModule, declarations: [HeaderComponent,
             HeaderActionsDirective,
             HeaderCustomSectionDirective,
             HeaderTitleActionIconDirective,
@@ -177,9 +177,9 @@ class HeaderModule {
             HeaderCustomSectionDirective,
             HeaderTitleActionIconDirective,
             HeaderCustomFlagDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.4", ngImport: i0, type: HeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: HeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: declarations,

package/fesm2022/kirbydesign-designsystem-helpers.mjs

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