@kirbydesign/designsystem 11.6.2 → 11.7.0

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

@@ -16,10 +16,10 @@ class AffixDirective {
     constructor(el) {
         this.el = el;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", 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: "21.2.7", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: AffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AffixDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -158,10 +158,10 @@ class DateInputDirective {
             ? value.slice(0, value.lastIndexOf(lastNumber[1]) + 1)
             : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker", dateValue: "dateValue" }, host: { listeners: { "input": "onInput()" } }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DateInputDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker", dateValue: "dateValue" }, host: { listeners: { "input": "onInput()" } }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DateInputDirective, decorators: [{
             type: Directive,
             args: [{}]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
@@ -187,10 +187,10 @@ class FormFieldMessageComponent {
     constructor() {
         this.position = 'left';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: FormFieldMessageComponent, isStandalone: true, 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: "21.2.7", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: FormFieldMessageComponent, isStandalone: true, 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: "21.2.0", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", 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: [{
@@ -249,10 +249,10 @@ class InputCounterComponent {
             this.textToAnnounce = `${characters} ${this.length} ${outOf} ${this.maxlength} ${entered}`;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputCounterComponent, deps: [{ token: i1.TranslationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: InputCounterComponent, isStandalone: true, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\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: "21.2.7", ngImport: i0, type: InputCounterComponent, deps: [{ token: i1.TranslationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: InputCounterComponent, isStandalone: true, selector: "kirby-input-counter", inputs: { listenTo: "listenTo" }, ngImport: i0, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n", dependencies: [{ kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputCounterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InputCounterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-input-counter', imports: [FormFieldMessageComponent], template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n<div class=\"kirby-visually-hidden\" aria-live=\"polite\">{{ textToAnnounce }}</div>\n" }]
         }], ctorParameters: () => [{ type: i1.TranslationService }, { type: i0.ChangeDetectorRef }], propDecorators: { listenTo: [{
@@ -324,10 +324,10 @@ class InputComponent {
         //Value of input element is updated after cut/paste:
         setTimeout(() => this.kirbyChange.emit(target.value));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "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", "dateValue", "value"] }], 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;font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", 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" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "class": "this.size", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "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", "dateValue", "value"] }], 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]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;left:0;width:100%;height:100%}:host[type=date]::ng-deep+.suffix{pointer-events:none}@supports (-moz-appearance: none){:host[type=date]::ng-deep+.suffix kirby-icon{display:none}}: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;font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:1em}:host(.md)+.date-mask{padding-block:.5em}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ hostDirectives: [
                         {
@@ -338,7 +338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                                 'dateValue: value' /* sync input value updates with date-input mask */,
                             ],
                         },
-                    ], 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;font-size:var(--kirby-font-size-n);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]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;left:0;width:100%;height:100%}:host[type=date]::ng-deep+.suffix{pointer-events:none}@supports (-moz-appearance: none){:host[type=date]::ng-deep+.suffix kirby-icon{display:none}}: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;font-size:var(--kirby-font-size-n);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 }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -451,10 +451,10 @@ class TextareaComponent {
         //Value of textarea element is updated after cut/paste:
         setTimeout(() => this.kirbyChange.emit(target.value));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextareaComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "attr.value": "this.value", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TextareaComponent, deps: [{ token: i0.ElementRef }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: TextareaComponent, isStandalone: true, selector: "textarea[kirby-textarea]", inputs: { value: "value", borderless: "borderless", hasError: "hasError", autocomplete: "autocomplete", autocorrect: "autocorrect", maxlength: "maxlength" }, outputs: { hasErrorChange: "hasErrorChange" }, host: { listeners: { "keyup": "_onKeyUp($event.target.value)", "paste": "_onCutPaste($event.target)", "cut": "_onCutPaste($event.target)" }, properties: { "attr.value": "this.value", "class.borderless": "this.borderless", "attr.aria-invalid": "this.hasError", "class.error": "this.hasError", "attr.autocomplete": "this.autocomplete", "attr.autocorrect": "this.autocorrect", "attr.maxlength": "this.maxlength" } }, usesOnChanges: true, ngImport: i0, template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
@@ -682,12 +682,12 @@ class FormFieldComponent {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i1.ResizeObserverService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: FormFieldComponent, isStandalone: true, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" }, properties: { "class.wrap-content-in-label": "this._wrapContentInLabel" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "inputComponent", first: true, predicate: InputComponent, descendants: true }, { propertyName: "dropdownComponent", first: true, predicate: DropdownComponent, descendants: true }, { propertyName: "textareaComponent", first: true, predicate: TextareaComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, 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: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\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    <ng-content select=\"kirby-dropdown\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\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 .message>kirby-form-field-message{width:100%;display:flex}.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;z-index:1}.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)}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]),:host(.wrap-content-in-label) label:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media(hover:hover){:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):hover,:host(.wrap-content-in-label) label:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):active,:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]).interaction-state-active,:host(.wrap-content-in-label) label:has(input[type=date]):active,:host(.wrap-content-in-label) label:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]) .suffix:not(:empty),:host(.wrap-content-in-label) label: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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i1.ResizeObserverService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: FormFieldComponent, isStandalone: true, selector: "kirby-form-field", inputs: { label: "label", message: "message" }, host: { listeners: { "kirbyRegisterFormField": "_onRegisterFormField()" }, properties: { "class.wrap-content-in-label": "this._wrapContentInLabel" } }, queries: [{ propertyName: "counter", first: true, predicate: InputCounterComponent, descendants: true }, { propertyName: "radioGroupComponent", first: true, predicate: RadioGroupComponent, descendants: true }, { propertyName: "inputComponent", first: true, predicate: InputComponent, descendants: true }, { propertyName: "dropdownComponent", first: true, predicate: DropdownComponent, descendants: true }, { propertyName: "textareaComponent", first: true, predicate: TextareaComponent, descendants: true }, { propertyName: "radioGroupElement", first: true, predicate: RadioGroupComponent, descendants: true, read: ElementRef }, { propertyName: "input", first: true, predicate: InputComponent, descendants: true, read: ElementRef }, { propertyName: "dropdown", first: true, predicate: DropdownComponent, 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: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\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    <ng-content select=\"kirby-dropdown\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\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 .message>kirby-form-field-message{width:100%;display:flex}.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;z-index:1}.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)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FormFieldMessageComponent, selector: "kirby-form-field-message", inputs: ["text", "position"] }, { kind: "component", type: IconComponent, selector: "kirby-icon", inputs: ["size", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', imports: [NgTemplateOutlet, FormFieldMessageComponent, IconComponent], template: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\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    <ng-content select=\"kirby-dropdown\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\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 .message>kirby-form-field-message{width:100%;display:flex}.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;z-index:1}.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)}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]),:host(.wrap-content-in-label) label:has(input[type=date]){--date-input-background-color: var(--kirby-inputs-background-color)}@media(hover:hover){:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):hover,:host(.wrap-content-in-label) label:has(input[type=date]):hover{--state-layer-opacity: .08;--state-layer-background-color: var(--kirby-black);cursor:pointer;--date-input-background-color: #e0e0e0}}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]):active,:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]).interaction-state-active,:host(.wrap-content-in-label) label:has(input[type=date]):active,:host(.wrap-content-in-label) label:has(input[type=date]).interaction-state-active{--state-layer-opacity: .12;--state-layer-background-color: var(--kirby-black);--date-input-background-color: #cbcbcb}:host:not(.wrap-content-in-label) .affix-container:has(input[type=date]) .suffix:not(:empty),:host(.wrap-content-in-label) label: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"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', imports: [NgTemplateOutlet, FormFieldMessageComponent, IconComponent], template: "@if (_wrapContentInLabel) {\n  <label>\n    <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n    <!-- add error message inside label if nested interative is in error state -->\n    @if (_nestedInteractiveHasError) {\n      <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n    }\n  </label>\n}\n\n<!-- add message outside label if nested interative is in valid state -->\n@if (!_nestedInteractiveHasError && _wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n@if (!_wrapContentInLabel) {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n}\n\n<ng-template #messageTemplate>\n  @if (message !== undefined || counter) {\n    <div class=\"texts\">\n      <div\n        aria-live=\"polite\"\n        class=\"message\"\n        [id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n      >\n        @if (message !== undefined) {\n          <kirby-form-field-message [text]=\"message\"></kirby-form-field-message>\n        }\n      </div>\n      @if (counter) {\n        <div class=\"counter\">\n          <ng-content select=\"kirby-input-counter\"></ng-content>\n        </div>\n      }\n    </div>\n  }\n</ng-template>\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    <ng-content select=\"kirby-dropdown\"></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\">\n      <ng-content select=\"[kirby-affix='suffix']\"></ng-content>\n      @if (showDefaultCalendarIcon) {\n        <kirby-icon name=\"calendar\"></kirby-icon>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #labelTextTemplate>\n  @if (label) {\n    <span class=\"text\">{{ label }}</span>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label) {\n    <label class=\"text\" [id]=\"_labelId\" (click)=\"onLabelClick()\">{{ label }}</label>\n  }\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 .message>kirby-form-field-message{width:100%;display:flex}.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;z-index:1}.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)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.PlatformService }, { type: i0.Renderer2 }, { type: i2.WindowRef }, { type: i1.ResizeObserverService }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], message: [{
@@ -760,10 +760,14 @@ class DecimalMaskDirective {
         this.extendBuiltinValueAccessor();
     }
     ngOnInit() {
+        const element = this.elementRef.nativeElement;
         // Set type="text", because functionality like 'setSelectionRange' are not supported on type="number"
-        this.elementRef.nativeElement.setAttribute('type', 'text');
+        element.setAttribute('type', 'text');
         // Remove maxlength as this is handled by the mask
-        this.elementRef.nativeElement.removeAttribute('maxlength');
+        element.removeAttribute('maxlength');
+        if (element.value) {
+            element.value = this.toLocaleRadixPoint(element.value);
+        }
         this.initMask();
     }
     initMask() {
@@ -800,14 +804,19 @@ class DecimalMaskDirective {
         maxlengthValue = -Math.abs(maxlengthValue);
         return this.min === undefined ? maxlengthValue : -Math.abs(Math.max(this.min, maxlengthValue));
     }
+    toLocaleRadixPoint(value) {
+        return value.replace('.', this.radixPoint);
+    }
+    toStandardRadixPoint(value) {
+        return value.replace(this.radixPoint, '.');
+    }
     extendBuiltinValueAccessor() {
         extendValueAccessors(this.valueAccessors, {
             writeValue: {
                 afterWriteValue: (value) => {
                     // Update the inputmask display when value is set programmatically
                     if (this.inputmask && value != null) {
-                        const formattedValue = String(value).replace('.', this.radixPoint);
-                        this.inputmask.setValue(formattedValue);
+                        this.inputmask.setValue(this.toLocaleRadixPoint(String(value)));
                     }
                 },
             },
@@ -815,18 +824,17 @@ class DecimalMaskDirective {
                 transformValue: (value) => {
                     // Provide unmasked and normalized values to the form control
                     if (this.inputmask) {
-                        const unmaskedValue = this.inputmask.unmaskedvalue();
-                        return unmaskedValue.replace(this.radixPoint, '.');
+                        return this.toStandardRadixPoint(this.inputmask.unmaskedvalue());
                     }
                     return value;
                 },
             },
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", padPrecisionDigits: "padPrecisionDigits", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DecimalMaskDirective, deps: [{ token: i0.ElementRef }, { token: LOCALE_ID }, { token: NG_VALUE_ACCESSOR, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.7", type: DecimalMaskDirective, isStandalone: true, selector: "[kirby-decimal-mask]", inputs: { min: "min", max: "max", precision: "precision", setMaxOnOverflow: "setMaxOnOverflow", alignment: "alignment", padPrecisionDigits: "padPrecisionDigits", allowMinus: "allowMinus", disableGroupSeperator: "disableGroupSeperator", maxlength: "maxlength" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: DecimalMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: DecimalMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line
@@ -862,11 +870,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
 
 const imports = [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent];
 class FormFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: FormFieldModule, imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective, AffixDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule, FormFieldComponent] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: FormFieldModule, imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective, AffixDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule, FormFieldComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, ...imports],