@kirbydesign/designsystem 10.3.1 → 10.4.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, LOCALE_ID, Inject, HostListener, Component, ChangeDetectionStrategy, EventEmitter, HostBinding, ElementRef, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import { Input, Directive, LOCALE_ID, HostListener, Inject, ChangeDetectionStrategy, Component, EventEmitter, Output, HostBinding, ElementRef, ContentChild, ContentChildren, NgModule } from '@angular/core';
 import * as i1 from '@kirbydesign/designsystem/helpers';
 import { UniqueIdGenerator, DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
 import { RadioGroupComponent } from '@kirbydesign/designsystem/radio';
@@ -18,10 +18,10 @@ class AffixDirective {
     constructor(el) {
         this.el = el;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.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: "19.2.5", ngImport: i0, type: AffixDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.5", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: AffixDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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: "19.1.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: "19.1.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: "19.2.5", 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: "19.2.5", type: DateInputDirective, isStandalone: true, inputs: { prefillYear: "prefillYear", useNativeDatePicker: "useNativeDatePicker" }, host: { listeners: { "input": "onInput()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DateInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", 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: "19.1.4", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: FormFieldMessageComponent, isStandalone: false, 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: "19.2.5", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: FormFieldMessageComponent, isStandalone: false, 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: "19.1.4", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormFieldMessageComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field-message', standalone: false, 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: "19.1.4", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: InputCounterComponent, isStandalone: false, 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: "19.2.5", ngImport: i0, type: InputCounterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: InputCounterComponent, isStandalone: false, 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: "19.1.4", ngImport: i0, type: InputCounterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputCounterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kirby-input-counter', standalone: false, template: "<kirby-form-field-message [text]=\"text\"></kirby-form-field-message>\n" }]
         }], propDecorators: { listenTo: [{
@@ -211,12 +211,29 @@ var InputSize;
     InputSize["large"] = "lg";
 })(InputSize || (InputSize = {}));
 class InputComponent {
+    set type(value) {
+        const mappedValue = InputComponent.typeToInputmodeMap[value];
+        if (mappedValue && !this.inputmode) {
+            this.inputmode = mappedValue;
+        }
+    }
+    get hasError() {
+        return this._hasError;
+    }
+    set hasError(value) {
+        if (this._hasError !== value) {
+            this._hasError = value;
+            this.hasErrorChange.emit(this._hasError);
+        }
+    }
     constructor(elementRef) {
         this.elementRef = elementRef;
         this.kirbyChange = new EventEmitter();
+        this._hasError = false;
         this.size = InputSize.large;
         this.autocomplete = 'off';
         this.autocorrect = 'off';
+        this.hasErrorChange = new EventEmitter();
     }
     ngOnInit() {
         // The native input value is emitted here to make sure that
@@ -229,16 +246,15 @@ class InputComponent {
             }
         });
     }
+    ngOnChanges(changes) {
+        if (changes.value) {
+            this.kirbyChange.emit(changes.value.currentValue);
+        }
+    }
     static { this.typeToInputmodeMap = {
         number: 'decimal',
         search: 'search',
     }; }
-    set type(value) {
-        const mappedValue = InputComponent.typeToInputmodeMap[value];
-        if (mappedValue && !this.inputmode) {
-            this.inputmode = mappedValue;
-        }
-    }
     _onKeyUp(value) {
         this.kirbyChange.emit(value);
     }
@@ -246,23 +262,17 @@ class InputComponent {
         //Value of input element is updated after cut/paste:
         setTimeout(() => this.kirbyChange.emit(target.value));
     }
-    ngOnChanges(changes) {
-        if (changes.value) {
-            this.kirbyChange.emit(changes.value.currentValue);
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.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}@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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", 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"] }], 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"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ imports: [CommonModule], hostDirectives: [
                         {
                             directive: DateInputDirective,
-                            // 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}@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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
                 type: Input
             }], size: [{
@@ -276,6 +286,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             }, {
                 type: Input
             }], hasError: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }, {
                 type: HostBinding,
                 args: ['class.error']
             }, {
@@ -305,6 +318,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 args: ['attr.inputmode']
             }, {
                 type: Input
+            }], hasErrorChange: [{
+                type: Output
             }], _onKeyUp: [{
                 type: HostListener,
                 args: ['keyup', ['$event.target.value']]
@@ -319,25 +334,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 class TextareaComponent {
     constructor() {
         this.kirbyChange = new EventEmitter();
+        this._hasError = false;
         this.autocomplete = 'off';
         this.autocorrect = 'off';
+        this.hasErrorChange = new EventEmitter();
     }
-    _onKeyUp(value) {
-        this.kirbyChange.emit(value);
+    get hasError() {
+        return this._hasError;
     }
-    _onCutPaste(target) {
-        //Value of textarea element is updated after cut/paste:
-        setTimeout(() => this.kirbyChange.emit(target.value));
+    set hasError(value) {
+        if (this._hasError !== value) {
+            this._hasError = value;
+            this.hasErrorChange.emit(this._hasError);
+        }
     }
     ngOnChanges(changes) {
         if (changes.value) {
             this.kirbyChange.emit(changes.value.currentValue);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.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}@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 }); }
+    _onKeyUp(value) {
+        this.kirbyChange.emit(value);
+    }
+    _onCutPaste(target) {
+        //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: "19.2.5", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", 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: { "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: "<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: "19.1.4", ngImport: i0, type: TextareaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{ 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: [{
@@ -348,6 +374,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             }, {
                 type: Input
             }], hasError: [{
+                type: HostBinding,
+                args: ['attr.aria-invalid']
+            }, {
                 type: HostBinding,
                 args: ['class.error']
             }, {
@@ -367,6 +396,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                 args: ['attr.maxlength']
             }, {
                 type: Input
+            }], hasErrorChange: [{
+                type: Output
             }], _onKeyUp: [{
                 type: HostListener,
                 args: ['keyup', ['$event.target.value']]
@@ -379,14 +410,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             }] } });
 
 class FormFieldComponent {
-    constructor(elementRef, platform, renderer, windowRef, resizeObserverService) {
+    get message() {
+        return this._message;
+    }
+    set message(value) {
+        this._message = value;
+        this.setNestedInteractiveElementAttributes();
+    }
+    constructor(elementRef, platform, renderer, windowRef, resizeObserverService, cdr) {
         this.platform = platform;
         this.renderer = renderer;
         this.windowRef = windowRef;
         this.resizeObserverService = resizeObserverService;
+        this.cdr = cdr;
         this.isRegistered = false;
         this.showDefaultCalendarIcon = false;
         this._labelId = UniqueIdGenerator.scopedTo('kirby-form-field-label').next();
+        this._errorMessageId = UniqueIdGenerator.scopedTo('kirby-form-field-message').next();
+        this._messageId = UniqueIdGenerator.scopedTo('kirby-form-field-message').next();
         this.element = elementRef.nativeElement;
     }
     get _wrapContentInLabel() {
@@ -407,7 +448,9 @@ class FormFieldComponent {
         this.radioGroupComponent?.focus();
     }
     focus() {
-        if (!this.inputElement)
+        if (!this.nestedInteractiveElement)
+            return;
+        if (!(this.input || this.textarea))
             return;
         /*
          * This timeout ensures that any previous manipulation of inputElement
@@ -419,11 +462,11 @@ class FormFieldComponent {
                 // See: https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/input-shims/hacks/scroll-assist.ts
                 const touchStart = new TouchEvent('touchstart');
                 const touchEnd = new TouchEvent('touchend');
-                this.inputElement.dispatchEvent(touchStart);
-                this.inputElement.dispatchEvent(touchEnd);
+                this.nestedInteractiveElement.dispatchEvent(touchStart);
+                this.nestedInteractiveElement.dispatchEvent(touchEnd);
             }
             else {
-                this.inputElement.focus();
+                this.nestedInteractiveElement.focus();
             }
         });
     }
@@ -431,9 +474,6 @@ class FormFieldComponent {
         this.isTouch = this.platform.isTouch();
     }
     ngAfterContentInit() {
-        if (this.label && this.radioGroupElement) {
-            this.renderer.setAttribute(this.radioGroupElement.nativeElement, 'aria-labelledby', this._labelId);
-        }
         // Measure the width of all slotted affix elements,
         // and apply their width + standard padding to the input elements
         // padding, so the start/end of the input is correctly indented.
@@ -449,15 +489,10 @@ class FormFieldComponent {
         }
     }
     ngAfterContentChecked() {
-        if (!this.inputElement) {
-            this.inputElement = this.element.querySelector('input, textarea');
+        if (!this.nestedInteractiveElement) {
+            this.registerNestedInteractive();
         }
-        // TODO: remove "!this.inputElement.readOnly" when ionic has fixed input click issue
-        // https://github.com/ionic-team/ionic-framework/issues/22740
-        if (!this.isRegistered &&
-            this.element.isConnected &&
-            !!this.inputElement &&
-            !this.inputElement.readOnly) {
+        if (!this.isRegistered && this.element.isConnected && (this.input || this.textarea)) {
             // Host is connected to dom and slotted input/textarea is present:
             this.isRegistered = true;
             this.dispatchLoadEvent();
@@ -465,11 +500,6 @@ class FormFieldComponent {
         // Decide if default calendar icon for date input should be shown
         this.showDefaultCalendarIcon = this.shouldShowDefaultCalendarIcon();
     }
-    shouldShowDefaultCalendarIcon() {
-        return (this.dateInput?.useNativeDatePicker &&
-            !this.affixElements.some((affix) => affix.type === 'suffix') // there are no suffix elements
-        );
-    }
     ngOnDestroy() {
         // Dispatch an `ionInputDidUnload` event to unregister
         // form field + input/textarea from Ionic input shims
@@ -480,14 +510,51 @@ class FormFieldComponent {
         this.affixElements.forEach((affix) => {
             this.resizeObserverService.unobserve(affix.el);
         });
+        this.nestedInteractiveErrorSubscription.unsubscribe();
+    }
+    registerNestedInteractive() {
+        this.getNestedInteractiveElement();
+        this.setNestedInteractiveElementAttributes();
+        this.subscribeToNestedInteractiveError();
+    }
+    getNestedInteractiveElement() {
+        this.nestedInteractiveElement =
+            this.input?.nativeElement ||
+                this.textarea?.nativeElement ||
+                this.radioGroupElement?.nativeElement.querySelector('ion-radio-group');
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.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: "19.1.4", type: FormFieldComponent, isStandalone: false, 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:8px;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 }); }
+    setNestedInteractiveElementAttributes() {
+        if (!this.nestedInteractiveElement)
+            return;
+        if (this.message) {
+            this.renderer.setAttribute(this.nestedInteractiveElement, 'aria-describedby', this._messageId);
+            this.renderer.setAttribute(this.nestedInteractiveElement, 'aria-errormessage', this._errorMessageId);
+        }
+        if (this.label && this.radioGroupElement) {
+            this.renderer.setAttribute(this.nestedInteractiveElement, 'aria-labelledby', this._labelId);
+        }
+    }
+    subscribeToNestedInteractiveError() {
+        const nestedInteractiveComponent = this.inputComponent || this.textareaComponent || this.radioGroupComponent;
+        // set current value, then listen for changes
+        this._nestedInteractiveHasError = !!nestedInteractiveComponent?.hasError;
+        this.nestedInteractiveErrorSubscription = nestedInteractiveComponent?.hasErrorChange.subscribe((hasError) => {
+            this._nestedInteractiveHasError = hasError;
+            this.cdr.markForCheck();
+        });
+    }
+    shouldShowDefaultCalendarIcon() {
+        return (this.dateInput?.useNativeDatePicker &&
+            !this.affixElements.some((affix) => affix.type === 'suffix') // there are no suffix elements
+        );
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormFieldComponent, deps: [{ token: i0.ElementRef }, { token: i1.PlatformService }, { token: i0.Renderer2 }, { token: i2.WindowRef }, { token: i3.ResizeObserverService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: FormFieldComponent, isStandalone: false, 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: "inputComponent", first: true, predicate: InputComponent, 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: "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\n  <!-- add error message inside label if nested interative is in error state -->\n  <ng-container *ngIf=\"_nestedInteractiveHasError\">\n    <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n  </ng-container>\n</label>\n\n<!-- add message outside label if nested interative is in valid state -->\n<ng-container *ngIf=\"!_nestedInteractiveHasError && _wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #messageTemplate>\n  <div *ngIf=\"message !== undefined || counter\" class=\"texts\">\n    <kirby-form-field-message\n      *ngIf=\"message !== undefined\"\n      class=\"message\"\n      [text]=\"message\"\n      [attr.aria-live]=\"_nestedInteractiveHasError ? 'polite' : null\"\n      [attr.id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n    ></kirby-form-field-message>\n\n    <div *ngIf=\"counter\" class=\"counter\" aria-hidden=\"true\">\n      <ng-content select=\"kirby-input-counter\"></ng-content>\n    </div>\n  </div>\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    <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:8px;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: "19.1.4", ngImport: i0, type: FormFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormFieldComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', standalone: false, 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:8px;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: [{
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'kirby-form-field', standalone: false, template: "<label *ngIf=\"_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTextTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n\n  <!-- add error message inside label if nested interative is in error state -->\n  <ng-container *ngIf=\"_nestedInteractiveHasError\">\n    <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n  </ng-container>\n</label>\n\n<!-- add message outside label if nested interative is in valid state -->\n<ng-container *ngIf=\"!_nestedInteractiveHasError && _wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"!_wrapContentInLabel\">\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"slottedInputTemplate\"></ng-container>\n  <ng-container *ngTemplateOutlet=\"messageTemplate\"></ng-container>\n</ng-container>\n\n<ng-template #messageTemplate>\n  <div *ngIf=\"message !== undefined || counter\" class=\"texts\">\n    <kirby-form-field-message\n      *ngIf=\"message !== undefined\"\n      class=\"message\"\n      [text]=\"message\"\n      [attr.aria-live]=\"_nestedInteractiveHasError ? 'polite' : null\"\n      [attr.id]=\"_nestedInteractiveHasError ? _errorMessageId : _messageId\"\n    ></kirby-form-field-message>\n\n    <div *ngIf=\"counter\" class=\"counter\" aria-hidden=\"true\">\n      <ng-content select=\"kirby-input-counter\"></ng-content>\n    </div>\n  </div>\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    <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:8px;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 }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
                 type: Input
             }], message: [{
                 type: Input
@@ -500,6 +567,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
             }], radioGroupComponent: [{
                 type: ContentChild,
                 args: [RadioGroupComponent]
+            }], inputComponent: [{
+                type: ContentChild,
+                args: [InputComponent]
+            }], textareaComponent: [{
+                type: ContentChild,
+                args: [TextareaComponent]
             }], radioGroupElement: [{
                 type: ContentChild,
                 args: [RadioGroupComponent, { read: ElementRef }]
@@ -598,8 +671,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: "19.1.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: "19.1.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: "19.2.5", 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: "19.2.5", 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 +680,7 @@ class DecimalMaskDirective {
             },
         ], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: DecimalMaskDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: DecimalMaskDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -644,11 +717,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
 
 const declarations = [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent];
 class FormFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.4", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective, AffixDirective] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: FormFieldModule, declarations: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent], imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective], exports: [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent, DecimalMaskDirective, AffixDirective] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: FormFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: FormFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective],