@kirbydesign/designsystem 11.11.3-dev-e7cb27f → 12.0.0-dev-67d5287

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

@@ -1,904 +1,1263 @@
-import * as i0 from '@angular/core';
-import { Input, Directive, LOCALE_ID, HostListener, Inject, Optional, ChangeDetectionStrategy, Component, EventEmitter, Output, HostBinding, ContentChild, ContentChildren, NgModule } from '@angular/core';
-import * as i1$1 from '@kirbydesign/designsystem/helpers';
-import { extendValueAccessors, UniqueIdGenerator, DesignTokenHelper } from '@kirbydesign/designsystem/helpers';
-import { RadioGroupComponent } from '@kirbydesign/designsystem/radio';
-import * as i2 from '@kirbydesign/designsystem/types';
-import { FORM_FIELD_CONTROL } from '@kirbydesign/designsystem/types';
-import { getLocaleDateFormat, FormatWidth, NgTemplateOutlet, getLocaleNumberSymbol, NumberSymbol, CommonModule } from '@angular/common';
-import { IconComponent, IconModule } from '@kirbydesign/designsystem/icon';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import Inputmask from 'inputmask';
-import { tap, filter, debounceTime } from 'rxjs';
-import * as i1 from '@kirbydesign/designsystem/shared';
-
-class AffixDirective {
-    constructor(el) {
-        this.el = el;
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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.23", type: AffixDirective, isStandalone: true, selector: "[kirby-affix]", inputs: { type: ["kirby-affix", "type"] }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: AffixDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line
-                    selector: '[kirby-affix]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { type: [{
-                type: Input,
-                args: ['kirby-affix']
-            }] } });
-
-class DateInputDirective {
-    onInput() {
-        if (!this.isDateInput)
-            return;
-        if (this.enableInputMask) {
-            this.updateMask(this.elementRef.nativeElement.value);
-        }
-    }
-    constructor(elementRef, renderer, locale, valueAccessors) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.locale = locale;
-        this.prefillYear = false;
-        this.useNativeDatePicker = false;
-        /**
-         * `isDateInput` is used to avoid removing the type attribute on the input element and calling updateMask()
-         * when the directive is not used on a date input.
-         * This is needed for the standalone component 'InputComponent', which includes the directive
-         * using the `hostDirectives` component decorator prop. Angular ignores the selector of directives
-         * applied in the `hostDirectives` property which effectively applies the directive to all kirby-inputs, not only date inputs.
-         * This check prevents the directive from executing it's masking on non-date inputs.
-         * See: https://angular.io/guide/directive-composition-api
-         */
-        this.isDateInput = false;
-        /**
-         * Inputmask should be enabled exclusively when _not_ using the platform
-         * native date picker.
-         *
-         * `enableInputMask` should be ignored if the type attribute of the `<input>`
-         * element is different from 'date' and/or the platform native date picker is
-         * explicitly enabled.
-         *
-         * @private
-         * @memberof DateInputDirective
-         */
-        this.enableInputMask = false;
-        this.isDateInput = this.elementRef.nativeElement.type === 'date';
-        if (this.isDateInput) {
-            // Remove type to avoid user-agent specific behaviour for [type="date"]
-            // Has to be done in constructor to avoid browser behavior kicking in
-            this.elementRef.nativeElement.removeAttribute('type');
-            extendValueAccessors(valueAccessors, {
-                writeValue: {
-                    afterWriteValue: (value) => this.updateMask(value),
-                },
-            });
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes.dateValue && this.isDateInput && this.maskingElement) {
-            const newValue = changes.dateValue.currentValue;
-            this.updateMask(newValue);
-            if (newValue != null) {
-                this.inputmask?.setValue(newValue);
-            }
-        }
-    }
-    ngAfterViewInit() {
-        if (!this.isDateInput)
-            return;
-        this.enableInputMask = !this.useNativeDatePicker;
-        // This case is identical to date input fields _before_ native date picker
-        // option was introduced
-        if (this.enableInputMask) {
-            this.initMask();
-            // Update mask with initial value if set via [value] binding on input
-            if (this.dateValue && this.inputmask) {
-                this.updateMask(this.dateValue);
-                this.inputmask.setValue(this.dateValue);
-            }
-        }
-        if (this.useNativeDatePicker) {
-            this.elementRef.nativeElement.setAttribute('type', 'date');
-        }
-    }
-    initMask() {
-        const inputFormat = this.getInputFormat();
-        const placeholder = this.getPlaceholder(inputFormat);
-        // Set initial placeholder ex. dd/mm/yyyy
-        this.renderer.setAttribute(this.elementRef.nativeElement, 'placeholder', placeholder);
-        // Init InputMask
-        new Inputmask('datetime', {
-            inputFormat,
-            placeholder,
-            prefillYear: this.prefillYear,
-        }).mask(this.elementRef.nativeElement);
-        this.inputmask = this.elementRef.nativeElement.inputmask;
-        // Append input overlay, so it's possible to style typed date differntly than the date-mask
-        this.appendMaskingElement();
-    }
-    // Keeps order and seperator from speficied locale
-    getInputFormat() {
-        const localeDateFormat = getLocaleDateFormat(this.locale, FormatWidth.Short);
-        return localeDateFormat
-            .toLowerCase()
-            .replace(/d+/, 'dd')
-            .replace(/m+/, 'MM')
-            .replace(/y+/, 'yyyy');
-    }
-    // The visual placeholder keeps the lowercase `mm` month token (e.g. mm/dd/yyyy),
-    // independent of the uppercase `MM` used by the parse format above.
-    getPlaceholder(inputFormat) {
-        const placeholder = inputFormat.toLowerCase();
-        return this.locale === 'da' ? placeholder.split('y').join('å') : placeholder;
-    }
-    appendMaskingElement() {
-        const wrapper = this.wrapElement(this.elementRef.nativeElement);
-        this.renderer.addClass(wrapper, 'date-mask-wrapper');
-        this.maskingElement = this.renderer.createElement('div');
-        this.renderer.appendChild(wrapper, this.maskingElement);
-        this.renderer.addClass(this.maskingElement, 'date-mask');
-    }
-    wrapElement(element) {
-        const wrapper = this.renderer.createElement('div');
-        const parent = element.parentElement;
-        this.renderer.insertBefore(parent, wrapper, element);
-        this.renderer.appendChild(wrapper, element);
-        return wrapper;
-    }
-    updateMask(value) {
-        if (!this.maskingElement)
-            return;
-        if (!value) {
-            this.maskingElement.innerHTML = '';
-            return;
-        }
-        const lastNumber = value.match(/.*?(\d)[^\d]*$/); // get last number in string
-        this.maskingElement.innerHTML = lastNumber
-            ? value.slice(0, value.lastIndexOf(lastNumber[1]) + 1)
-            : '';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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.23", 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.23", ngImport: i0, type: DateInputDirective, decorators: [{
-            type: Directive,
-            args: [{}]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NG_VALUE_ACCESSOR]
-                }] }], propDecorators: { onInput: [{
-                type: HostListener,
-                args: ['input']
-            }], prefillYear: [{
-                type: Input
-            }], useNativeDatePicker: [{
-                type: Input
-            }], dateValue: [{
-                type: Input
-            }] } });
-
-class FormFieldMessageComponent {
-    constructor() {
-        this.position = 'left';
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.23", 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:var(--kirby-font-size-xs);font-weight:var(--kirby-font-weight-normal);font-stretch:normal;line-height:var(--kirby-line-height-xs);min-height:var(--kirby-relative-size-s);letter-spacing:normal;color:var(--kirby-text-color-black)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", 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:var(--kirby-font-size-xs);font-weight:var(--kirby-font-weight-normal);font-stretch:normal;line-height:var(--kirby-line-height-xs);min-height:var(--kirby-relative-size-s);letter-spacing:normal;color:var(--kirby-text-color-black)}\n"] }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
-
-class InputCounterComponent {
-    get text() {
-        if (this.length === undefined) {
-            return undefined;
-        }
-        const ofMaxlength = this.maxlength ? `/${this.maxlength}` : '';
-        return `${this.length}${ofMaxlength}`;
-    }
-    constructor(translations, cdr) {
-        this.translations = translations;
-        this.cdr = cdr;
-        this.skipNextAnnouncement = false;
-    }
-    ngAfterViewInit() {
-        if (this.listenTo) {
-            // A FormControl initialized with a value writes directly to the nativeElement.
-            // Check for this scenario first, before checking for listenTo's value @Input.
-            const initialValue = this.listenTo.nativeValue ?? this.listenTo.value ?? '';
-            this.length = initialValue.length;
-            this.skipNextAnnouncement = this.length > 0; // If there is already text in the input, skip the first announcement so we don't announce on refresh or prefilled text fields.
-            this.maxlength = this.listenTo.maxlength ? +this.listenTo.maxlength : undefined;
-            this.cdr.detectChanges();
-            this._inputChangeSubscription = this.listenTo.kirbyChange
-                .pipe(tap((value) => (this.length = value?.length || 0)), filter(() => this.skipAnnouncement()), debounceTime(1000))
-                .subscribe(() => {
-                this.announceText();
-            });
-        }
-    }
-    skipAnnouncement() {
-        if (this.skipNextAnnouncement) {
-            this.skipNextAnnouncement = false;
-            return false;
-        }
-        return true;
-    }
-    ngOnDestroy() {
-        this._inputChangeSubscription?.unsubscribe();
-    }
-    announceText() {
-        const characters = this.translations.get('characters');
-        const entered = this.translations.get('entered');
-        if (this.maxlength === undefined) {
-            this.textToAnnounce = `${characters} ${this.length} ${entered}`;
-        }
-        else {
-            const outOf = this.translations.get('outOf');
-            this.textToAnnounce = `${characters} ${this.length} ${outOf} ${this.maxlength} ${entered}`;
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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.23", 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.23", 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: [{
-                type: Input
-            }] } });
-
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, EventEmitter, HostBinding, HostListener, Inject, Input, LOCALE_ID, NgModule, Optional, Output } from "@angular/core";
+import * as i1 from "@kirbydesign/designsystem/helpers";
+import { DesignTokenHelper, UniqueIdGenerator, extendValueAccessors } from "@kirbydesign/designsystem/helpers";
+import { RadioGroupComponent } from "@kirbydesign/designsystem/radio";
+import * as i2 from "@kirbydesign/designsystem/types";
+import { FORM_FIELD_CONTROL } from "@kirbydesign/designsystem/types";
+import { CommonModule, FormatWidth, NgTemplateOutlet, NumberSymbol, getLocaleDateFormat, getLocaleNumberSymbol } from "@angular/common";
+import { IconComponent, IconModule } from "@kirbydesign/designsystem/icon";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import Inputmask from "inputmask";
+import { debounceTime, filter, tap } from "rxjs";
+import * as i1$1 from "@kirbydesign/designsystem/shared";
+var AffixDirective = class AffixDirective {
+	constructor(el) {
+		this.el = el;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: AffixDirective,
+			deps: [{ token: i0.ElementRef }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			type: AffixDirective,
+			isStandalone: true,
+			selector: "[kirby-affix]",
+			inputs: { type: ["kirby-affix", "type"] },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AffixDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirby-affix]" }]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }],
+	propDecorators: { type: [{
+		type: Input,
+		args: ["kirby-affix"]
+	}] }
+});
+var DateInputDirective = class DateInputDirective {
+	onInput() {
+		if (!this.isDateInput) return;
+		if (this.enableInputMask) this.updateMask(this.elementRef.nativeElement.value);
+	}
+	constructor(elementRef, renderer, locale, valueAccessors) {
+		this.elementRef = elementRef;
+		this.renderer = renderer;
+		this.locale = locale;
+		this.prefillYear = false;
+		this.useNativeDatePicker = false;
+		this.isDateInput = false;
+		this.enableInputMask = false;
+		this.isDateInput = this.elementRef.nativeElement.type === "date";
+		if (this.isDateInput) {
+			this.elementRef.nativeElement.removeAttribute("type");
+			extendValueAccessors(valueAccessors, { writeValue: { afterWriteValue: (value) => this.updateMask(value) } });
+		}
+	}
+	ngOnChanges(changes) {
+		if (changes.dateValue && this.isDateInput && this.maskingElement) {
+			const newValue = changes.dateValue.currentValue;
+			this.updateMask(newValue);
+			if (newValue != null) this.inputmask?.setValue(newValue);
+		}
+	}
+	ngAfterViewInit() {
+		if (!this.isDateInput) return;
+		this.enableInputMask = !this.useNativeDatePicker;
+		if (this.enableInputMask) {
+			this.initMask();
+			if (this.dateValue && this.inputmask) {
+				this.updateMask(this.dateValue);
+				this.inputmask.setValue(this.dateValue);
+			}
+		}
+		if (this.useNativeDatePicker) this.elementRef.nativeElement.setAttribute("type", "date");
+	}
+	initMask() {
+		const inputFormat = this.getInputFormat();
+		const placeholder = this.getPlaceholder(inputFormat);
+		this.renderer.setAttribute(this.elementRef.nativeElement, "placeholder", placeholder);
+		new Inputmask("datetime", {
+			inputFormat,
+			placeholder,
+			prefillYear: this.prefillYear
+		}).mask(this.elementRef.nativeElement);
+		this.inputmask = this.elementRef.nativeElement.inputmask;
+		this.appendMaskingElement();
+	}
+	getInputFormat() {
+		return getLocaleDateFormat(this.locale, FormatWidth.Short).toLowerCase().replace(/d+/, "dd").replace(/m+/, "MM").replace(/y+/, "yyyy");
+	}
+	getPlaceholder(inputFormat) {
+		const placeholder = inputFormat.toLowerCase();
+		return this.locale === "da" ? placeholder.split("y").join("å") : placeholder;
+	}
+	appendMaskingElement() {
+		const wrapper = this.wrapElement(this.elementRef.nativeElement);
+		this.renderer.addClass(wrapper, "date-mask-wrapper");
+		this.maskingElement = this.renderer.createElement("div");
+		this.renderer.appendChild(wrapper, this.maskingElement);
+		this.renderer.addClass(this.maskingElement, "date-mask");
+	}
+	wrapElement(element) {
+		const wrapper = this.renderer.createElement("div");
+		const parent = element.parentElement;
+		this.renderer.insertBefore(parent, wrapper, element);
+		this.renderer.appendChild(wrapper, element);
+		return wrapper;
+	}
+	updateMask(value) {
+		if (!this.maskingElement) return;
+		if (!value) {
+			this.maskingElement.innerHTML = "";
+			return;
+		}
+		const lastNumber = value.match(/.*?(\d)[^\d]*$/);
+		this.maskingElement.innerHTML = lastNumber ? value.slice(0, value.lastIndexOf(lastNumber[1]) + 1) : "";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DateInputDirective,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: i0.Renderer2 },
+				{ token: LOCALE_ID },
+				{
+					token: NG_VALUE_ACCESSOR,
+					optional: true
+				}
+			],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			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: "22.2.2",
+	ngImport: i0,
+	type: DateInputDirective,
+	decorators: [{
+		type: Directive,
+		args: [{}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i0.Renderer2 },
+		{
+			type: void 0,
+			decorators: [{
+				type: Inject,
+				args: [LOCALE_ID]
+			}]
+		},
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: [NG_VALUE_ACCESSOR]
+			}]
+		}
+	],
+	propDecorators: {
+		onInput: [{
+			type: HostListener,
+			args: ["input"]
+		}],
+		prefillYear: [{ type: Input }],
+		useNativeDatePicker: [{ type: Input }],
+		dateValue: [{ type: Input }]
+	}
+});
+var FormFieldMessageComponent = class FormFieldMessageComponent {
+	constructor() {
+		this.position = "left";
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormFieldMessageComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			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:var(--kirby-font-size-xs);font-weight:var(--kirby-font-weight-normal);font-stretch:normal;line-height:var(--kirby-line-height-xs);min-height:var(--kirby-relative-size-s);letter-spacing:normal;color:var(--kirby-color-content-base)}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	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:var(--kirby-font-size-xs);font-weight:var(--kirby-font-weight-normal);font-stretch:normal;line-height:var(--kirby-line-height-xs);min-height:var(--kirby-relative-size-s);letter-spacing:normal;color:var(--kirby-color-content-base)}\n"]
+		}]
+	}],
+	propDecorators: {
+		text: [{ type: Input }],
+		position: [{ type: Input }]
+	}
+});
+var InputCounterComponent = class InputCounterComponent {
+	get text() {
+		if (this.length === void 0) return;
+		const ofMaxlength = this.maxlength ? `/${this.maxlength}` : "";
+		return `${this.length}${ofMaxlength}`;
+	}
+	constructor(translations, cdr) {
+		this.translations = translations;
+		this.cdr = cdr;
+		this.skipNextAnnouncement = false;
+	}
+	ngAfterViewInit() {
+		if (this.listenTo) {
+			const initialValue = this.listenTo.nativeValue ?? this.listenTo.value ?? "";
+			this.length = initialValue.length;
+			this.skipNextAnnouncement = this.length > 0;
+			this.maxlength = this.listenTo.maxlength ? +this.listenTo.maxlength : void 0;
+			this.cdr.detectChanges();
+			this._inputChangeSubscription = this.listenTo.kirbyChange.pipe(tap((value) => this.length = value?.length || 0), filter(() => this.skipAnnouncement()), debounceTime(1e3)).subscribe(() => {
+				this.announceText();
+			});
+		}
+	}
+	skipAnnouncement() {
+		if (this.skipNextAnnouncement) {
+			this.skipNextAnnouncement = false;
+			return false;
+		}
+		return true;
+	}
+	ngOnDestroy() {
+		this._inputChangeSubscription?.unsubscribe();
+	}
+	announceText() {
+		const characters = this.translations.get("characters");
+		const entered = this.translations.get("entered");
+		if (this.maxlength === void 0) this.textToAnnounce = `${characters} ${this.length} ${entered}`;
+		else {
+			const outOf = this.translations.get("outOf");
+			this.textToAnnounce = `${characters} ${this.length} ${outOf} ${this.maxlength} ${entered}`;
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: InputCounterComponent,
+			deps: [{ token: i1$1.TranslationService }, { token: i0.ChangeDetectorRef }],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			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"]
+			}],
+			changeDetection: i0.ChangeDetectionStrategy.Eager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: InputCounterComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "kirby-input-counter",
+			imports: [FormFieldMessageComponent],
+			changeDetection: ChangeDetectionStrategy.Eager,
+			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$1.TranslationService }, { type: i0.ChangeDetectorRef }],
+	propDecorators: { listenTo: [{ type: Input }] }
+});
 var InputSize;
-(function (InputSize) {
-    InputSize["medium"] = "md";
-    InputSize["large"] = "lg";
+(function(InputSize) {
+	InputSize["medium"] = "md";
+	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);
-        }
-    }
-    get nativeValue() {
-        return this.elementRef?.nativeElement?.value;
-    }
-    get interactiveElement() {
-        return this.elementRef?.nativeElement;
-    }
-    constructor(elementRef, builtInValueAccessors) {
-        this.elementRef = elementRef;
-        this.kirbyChange = new EventEmitter();
-        this._hasError = false;
-        this.size = InputSize.large;
-        this.autocomplete = 'off';
-        this.autocorrect = 'off';
-        this.hasErrorChange = new EventEmitter();
-        extendValueAccessors(builtInValueAccessors, {
-            writeValue: {
-                afterWriteValue: (value) => this.kirbyChange.emit(value),
-            },
-        });
-    }
-    ngOnInit() {
-        // The native input value is emitted here to make sure that
-        // the InputCounterComponent receives the value onInit,
-        // when [(ngModel)] is used on kirby-input.
-        setTimeout(() => {
-            const inputValue = this.elementRef.nativeElement.value;
-            if (inputValue) {
-                this.kirbyChange.emit(inputValue);
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.value) {
-            this.kirbyChange.emit(changes.value.currentValue);
-        }
-    }
-    static { this.typeToInputmodeMap = {
-        number: 'decimal',
-        search: 'search',
-    }; }
-    _onKeyUp(value) {
-        this.kirbyChange.emit(value);
-    }
-    _onCutPaste(target) {
-        //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.23", 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.23", 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" } }, providers: [{ provide: FORM_FIELD_CONTROL, useExisting: InputComponent }], usesOnChanges: true, hostDirectives: [{ directive: DateInputDirective, inputs: ["prefillYear", "prefillYear", "useNativeDatePicker", "useNativeDatePicker", "dateValue", "value"] }], ngImport: i0, template: '', isInline: true, styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);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{display:none}:host[type=date]::ng-deep+.suffix{cursor:pointer}@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:var(--kirby-border-radius-l);padding-block:calc(var(--kirby-spacing-s) * .5)}:host(.md).error{padding-block:calc(calc(var(--kirby-spacing-s) * .5) - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:var(--kirby-font-weight-bold)}.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:var(--kirby-line-height-n);font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: InputComponent, decorators: [{
-            type: Component,
-            args: [{ hostDirectives: [
-                        {
-                            directive: DateInputDirective,
-                            inputs: [
-                                'prefillYear',
-                                'useNativeDatePicker',
-                                'dateValue: value' /* sync input value updates with date-input mask */,
-                            ],
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'input[kirby-input]', template: '', providers: [{ provide: FORM_FIELD_CONTROL, useExisting: InputComponent }], styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);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{display:none}:host[type=date]::ng-deep+.suffix{cursor:pointer}@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:var(--kirby-border-radius-l);padding-block:calc(var(--kirby-spacing-s) * .5)}:host(.md).error{padding-block:calc(calc(var(--kirby-spacing-s) * .5) - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:var(--kirby-font-weight-bold)}.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:var(--kirby-line-height-n);font-size:var(--kirby-font-size-n);color:var(--kirby-white-contrast);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NG_VALUE_ACCESSOR]
-                }] }], propDecorators: { type: [{
-                type: Input
-            }], size: [{
-                type: HostBinding,
-                args: ['class']
-            }, {
-                type: Input
-            }], borderless: [{
-                type: HostBinding,
-                args: ['class.borderless']
-            }, {
-                type: Input
-            }], hasError: [{
-                type: HostBinding,
-                args: ['attr.aria-invalid']
-            }, {
-                type: HostBinding,
-                args: ['class.error']
-            }, {
-                type: Input
-            }], autocomplete: [{
-                type: HostBinding,
-                args: ['attr.autocomplete']
-            }, {
-                type: Input
-            }], autocorrect: [{
-                type: HostBinding,
-                args: ['attr.autocorrect']
-            }, {
-                type: Input
-            }], value: [{
-                type: HostBinding,
-                args: ['attr.value']
-            }, {
-                type: Input
-            }], maxlength: [{
-                type: HostBinding,
-                args: ['attr.maxlength']
-            }, {
-                type: Input
-            }], inputmode: [{
-                type: HostBinding,
-                args: ['attr.inputmode']
-            }, {
-                type: Input
-            }], hasErrorChange: [{
-                type: Output
-            }], _onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event.target.value']]
-            }], _onCutPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event.target']]
-            }, {
-                type: HostListener,
-                args: ['cut', ['$event.target']]
-            }] } });
-
-class TextareaComponent {
-    get hasError() {
-        return this._hasError;
-    }
-    set hasError(value) {
-        if (this._hasError !== value) {
-            this._hasError = value;
-            this.hasErrorChange.emit(this._hasError);
-        }
-    }
-    get nativeValue() {
-        return this.elementRef?.nativeElement?.value;
-    }
-    get interactiveElement() {
-        return this.elementRef?.nativeElement;
-    }
-    constructor(elementRef, builtInValueAccessors) {
-        this.elementRef = elementRef;
-        this.kirbyChange = new EventEmitter();
-        this._hasError = false;
-        this.autocomplete = 'off';
-        this.autocorrect = 'off';
-        this.hasErrorChange = new EventEmitter();
-        extendValueAccessors(builtInValueAccessors, {
-            writeValue: {
-                afterWriteValue: (value) => this.kirbyChange.emit(value),
-            },
-        });
-    }
-    ngOnInit() {
-        // The native input value is emitted here to make sure that
-        // the InputCounterComponent receives the value onInit,
-        // when [(ngModel)] is used on kirby-textarea.
-        setTimeout(() => {
-            const inputValue = this.elementRef.nativeElement.value;
-            if (inputValue) {
-                this.kirbyChange.emit(inputValue);
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        if (changes.value) {
-            this.kirbyChange.emit(changes.value.currentValue);
-        }
-    }
-    _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: "21.2.23", 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.23", 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" } }, providers: [{ provide: FORM_FIELD_CONTROL, useExisting: TextareaComponent }], usesOnChanges: true, ngImport: i0, template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);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.23", ngImport: i0, type: TextareaComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'textarea[kirby-textarea]', providers: [{ provide: FORM_FIELD_CONTROL, useExisting: TextareaComponent }], template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n", styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.error){border:1px solid var(--kirby-danger);padding:calc(var(--kirby-spacing-s) - 1px)}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host:focus-visible{transition:all 80ms linear 0ms;box-shadow:var(--kirby-elevation-2),var(--kirby-focus-ring-md-inset)}: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:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);box-shadow:var(--kirby-inputs-elevation);padding:var(--kirby-spacing-s);width:100%}: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:calc(var(--kirby-line-height-n) * 1em);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: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NG_VALUE_ACCESSOR]
-                }] }], propDecorators: { value: [{
-                type: HostBinding,
-                args: ['attr.value']
-            }, {
-                type: Input
-            }], borderless: [{
-                type: HostBinding,
-                args: ['class.borderless']
-            }, {
-                type: Input
-            }], hasError: [{
-                type: HostBinding,
-                args: ['attr.aria-invalid']
-            }, {
-                type: HostBinding,
-                args: ['class.error']
-            }, {
-                type: Input
-            }], autocomplete: [{
-                type: HostBinding,
-                args: ['attr.autocomplete']
-            }, {
-                type: Input
-            }], autocorrect: [{
-                type: HostBinding,
-                args: ['attr.autocorrect']
-            }, {
-                type: Input
-            }], maxlength: [{
-                type: HostBinding,
-                args: ['attr.maxlength']
-            }, {
-                type: Input
-            }], hasErrorChange: [{
-                type: Output
-            }], _onKeyUp: [{
-                type: HostListener,
-                args: ['keyup', ['$event.target.value']]
-            }], _onCutPaste: [{
-                type: HostListener,
-                args: ['paste', ['$event.target']]
-            }, {
-                type: HostListener,
-                args: ['cut', ['$event.target']]
-            }] } });
-
-class FormFieldComponent {
-    get label() {
-        return this._label;
-    }
-    set label(value) {
-        this._label = value;
-        this.setNestedInteractiveLabelAttributes();
-    }
-    get message() {
-        return this._message;
-    }
-    set message(value) {
-        this._message = value;
-        this.setNestedInteractiveMessageAttributes();
-    }
-    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.hasWarnedMissingControl = 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;
-    }
-    isInputOrTextarea() {
-        return (this.formFieldControl instanceof InputComponent ||
-            this.formFieldControl instanceof TextareaComponent);
-    }
-    get _wrapContentInLabel() {
-        return !!this.label && this.isInputOrTextarea();
-    }
-    dispatchLoadEvent() {
-        // Dispatch an `ionInputDidLoad` event to register
-        // form field + input/textarea with Ionic input shims
-        // See: https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/input-shims/input-shims.ts
-        this.windowRef.nativeWindow.document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
-            detail: this.element,
-        }));
-    }
-    _onRegisterFormField() {
-        this.dispatchLoadEvent();
-    }
-    onLabelClick() {
-        // If its a radio group its focus method that contains advanced logic
-        if (this.formFieldControl instanceof RadioGroupComponent) {
-            this.formFieldControl.focus();
-        }
-        else {
-            this.nestedInteractiveElement?.focus();
-        }
-    }
-    openDatePicker() {
-        if (!this.dateInput?.useNativeDatePicker)
-            return;
-        this.nestedInteractiveElement.showPicker();
-    }
-    focus() {
-        if (!this.nestedInteractiveElement)
-            return;
-        if (this.isInputOrTextarea()) {
-            /*
-             * This timeout ensures that any previous manipulation of inputElement or textareaElement
-             * (e.g. setting disabled state) has been synced to the DOM before trying to focus.
-             */
-            setTimeout(() => {
-                if (this.isTouch) {
-                    // Trigger Ionic's input shims to ensure input is scrolled into view.
-                    // 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.nestedInteractiveElement.dispatchEvent(touchStart);
-                    this.nestedInteractiveElement.dispatchEvent(touchEnd);
-                }
-                else {
-                    this.nestedInteractiveElement.focus();
-                }
-            });
-        }
-    }
-    ngOnInit() {
-        this.isTouch = this.platform.isTouch();
-    }
-    ngAfterContentInit() {
-        this.handleAffixOffset();
-    }
-    ngAfterContentChecked() {
-        if (!this.formFieldControl) {
-            this.warnMissingControl();
-            return;
-        }
-        if (!this.nestedInteractiveElement) {
-            this.registerNestedInteractive();
-        }
-        if (!this.isRegistered && this.element.isConnected && this.isInputOrTextarea()) {
-            // Host is connected to dom and slotted input/textarea is present:
-            this.isRegistered = true;
-            this.dispatchLoadEvent();
-        }
-        // Decide if default calendar icon for date input should be shown
-        this.showDefaultCalendarIcon = this.shouldShowDefaultCalendarIcon();
-    }
-    warnMissingControl() {
-        if (!this.hasWarnedMissingControl) {
-            this.hasWarnedMissingControl = true;
-            console.warn('kirby-form-field: No form field control found. Ensure a component providing FORM_FIELD_CONTROL is projected.');
-        }
-    }
-    ngOnDestroy() {
-        // Dispatch an `ionInputDidUnload` event to unregister
-        // form field + input/textarea from Ionic input shims
-        // See: https://github.com/ionic-team/ionic-framework/blob/master/core/src/utils/input-shims/input-shims.ts
-        this.windowRef.nativeWindow.document.dispatchEvent(new CustomEvent('ionInputDidUnload', {
-            detail: this.element,
-        }));
-        this.affixElements?.forEach((affix) => {
-            this.resizeObserverService.unobserve(affix.el);
-        });
-        this.nestedInteractiveErrorSubscription?.unsubscribe();
-    }
-    registerNestedInteractive() {
-        this.getNestedInteractiveElement();
-        this.setNestedInteractiveLabelAttributes();
-        this.setNestedInteractiveMessageAttributes();
-        this.subscribeToNestedInteractiveError();
-    }
-    getNestedInteractiveElement() {
-        this.nestedInteractiveElement = this.formFieldControl.interactiveElement;
-    }
-    setNestedInteractiveMessageAttributes() {
-        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);
-        }
-        else {
-            this.renderer.removeAttribute(this.nestedInteractiveElement, 'aria-describedby');
-            this.renderer.removeAttribute(this.nestedInteractiveElement, 'aria-errormessage');
-        }
-    }
-    setNestedInteractiveLabelAttributes() {
-        if (!this.nestedInteractiveElement)
-            return;
-        if (this._wrapContentInLabel)
-            return; // return if label is wrapping the nested interactive. No need for aria-labelledby.
-        if (this.label) {
-            this.renderer.setAttribute(this.nestedInteractiveElement, 'aria-labelledby', this._labelId);
-        }
-        else {
-            this.renderer.removeAttribute(this.nestedInteractiveElement, 'aria-labelledby');
-        }
-    }
-    subscribeToNestedInteractiveError() {
-        // set current value, then listen for changes
-        this._nestedInteractiveHasError = !!this.formFieldControl?.hasError;
-        this.nestedInteractiveErrorSubscription = this.formFieldControl?.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
-        );
-    }
-    handleAffixOffset() {
-        // 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.
-        if (this.formFieldControl instanceof InputComponent) {
-            const inputElement = this.formFieldControl.interactiveElement;
-            this.affixElements.forEach((affix) => {
-                this.resizeObserverService.observe(affix.el, (entry) => {
-                    const padding = affix.type === 'prefix' ? 'padding-left' : 'padding-right';
-                    const affixWidth = inputElement.type === 'date' ? 0 : entry.contentRect.width;
-                    const existingPadding = parseInt(DesignTokenHelper.size('s'));
-                    this.renderer.setStyle(inputElement, `${padding}`, `${affixWidth + existingPadding}px`);
-                    const dateMask = this.element.querySelector('.date-mask');
-                    if (dateMask) {
-                        this.renderer.setStyle(dateMask, `${padding}`, `${affixWidth + existingPadding}px`);
-                    }
-                });
-            });
-        }
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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.23", 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: "formFieldControl", first: true, predicate: FORM_FIELD_CONTROL, descendants: true }, { 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></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\" (click)=\"openDatePicker()\">\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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative;margin-bottom:var(--kirby-spacing-s)}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px var(--kirby-spacing-s) 0 var(--kirby-spacing-s)}.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:var(--kirby-font-size-s);font-weight:var(--kirby-font-weight-light);line-height:var(--kirby-line-height-s);margin-bottom:var(--kirby-spacing-xxxs);padding:0 var(--kirby-spacing-s)}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:var(--kirby-spacing-xs);z-index:var(--kirby-z-index-default)}.affix-container .suffix{right:var(--kirby-spacing-xs)}.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.23", 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></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\" (click)=\"openDatePicker()\">\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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative;margin-bottom:var(--kirby-spacing-s)}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px var(--kirby-spacing-s) 0 var(--kirby-spacing-s)}.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:var(--kirby-font-size-s);font-weight:var(--kirby-font-weight-light);line-height:var(--kirby-line-height-s);margin-bottom:var(--kirby-spacing-xxxs);padding:0 var(--kirby-spacing-s)}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:var(--kirby-spacing-xs);z-index:var(--kirby-z-index-default)}.affix-container .suffix{right:var(--kirby-spacing-xs)}.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: [{
-                type: Input
-            }], affixElements: [{
-                type: ContentChildren,
-                args: [AffixDirective]
-            }], counter: [{
-                type: ContentChild,
-                args: [InputCounterComponent, { static: false }]
-            }], formFieldControl: [{
-                type: ContentChild,
-                args: [FORM_FIELD_CONTROL]
-            }], dateInput: [{
-                type: ContentChild,
-                args: [DateInputDirective]
-            }], _wrapContentInLabel: [{
-                type: HostBinding,
-                args: ['class.wrap-content-in-label']
-            }], _onRegisterFormField: [{
-                type: HostListener,
-                args: ['kirbyRegisterFormField']
-            }] } });
-
-class DecimalMaskDirective {
-    set allowMinus(allowMinus) {
-        this._allowMinus = allowMinus || (this.min || 0) < 0;
-    }
-    set disableGroupSeperator(disabled) {
-        this._groupSeperatorDisabled = String(disabled) === '' || String(disabled) === 'true';
-    }
-    set maxlength(maxlength) {
-        this._maxlength = maxlength;
-        const maxlengthValue = parseInt('9'.repeat(maxlength));
-        this.max = this.getMax(maxlengthValue);
-        this.min = this.getMin(maxlengthValue);
-    }
-    constructor(elementRef, locale, valueAccessors) {
-        this.elementRef = elementRef;
-        this.locale = locale;
-        this.valueAccessors = valueAccessors;
-        this.precision = 2;
-        this.setMaxOnOverflow = false;
-        this.alignment = 'right';
-        this.padPrecisionDigits = false;
-        this.groupSeparator = getLocaleNumberSymbol(this.locale, NumberSymbol.Group);
-        this.radixPoint = getLocaleNumberSymbol(this.locale, NumberSymbol.Decimal);
-        this._allowMinus = false;
-        this.extendBuiltinValueAccessor();
-    }
-    ngOnInit() {
-        const element = this.elementRef.nativeElement;
-        // Set type="text", because functionality like 'setSelectionRange' are not supported on type="number"
-        element.setAttribute('type', 'text');
-        // Remove maxlength as this is handled by the mask
-        element.removeAttribute('maxlength');
-        if (element.value) {
-            element.value = this.toLocaleRadixPoint(element.value);
-        }
-        this.initMask();
-    }
-    initMask() {
-        const element = this.elementRef.nativeElement;
-        new Inputmask('decimal', {
-            groupSeparator: this._groupSeperatorDisabled ? '' : this.groupSeparator,
-            radixPoint: this.radixPoint,
-            digits: this._maxlength ? 0 : this.precision,
-            digitsOptional: !this.padPrecisionDigits,
-            min: this.min,
-            max: this.max,
-            allowMinus: this._allowMinus,
-            negationSymbol: {
-                front: getLocaleNumberSymbol(this.locale, NumberSymbol.MinusSign),
-                back: '',
-            },
-            SetMaxOnOverflow: this.setMaxOnOverflow,
-            showMaskOnFocus: false,
-            showMaskOnHover: false,
-            placeholder: this.padPrecisionDigits ? undefined : '',
-            rightAlign: this.alignment === 'right',
-            onBeforeWrite: () => {
-                if (!this.inputmask)
-                    return;
-            },
-            onBeforePaste: (value, options) => {
-                const replacesValue = element.selectionStart === 0 && element.selectionEnd === element.value.length;
-                if (!this.padPrecisionDigits || !replacesValue) {
-                    return options.onBeforeMask(value, options);
-                }
-                element.value = value;
-                element.dispatchEvent(new Event('input', { bubbles: true }));
-                return false;
-            },
-        }).mask(element);
-        this.inputmask = element.inputmask;
-    }
-    getMax(maxlengthValue) {
-        return this.max === undefined ? maxlengthValue : Math.min(this.max, maxlengthValue);
-    }
-    getMin(maxlengthValue) {
-        if (!this.allowMinus)
-            return;
-        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) {
-                        this.inputmask.setValue(this.toLocaleRadixPoint(String(value)));
-                    }
-                },
-            },
-            registerOnChange: {
-                transformValue: (value) => {
-                    // Provide unmasked and normalized values to the form control
-                    if (this.inputmask) {
-                        return this.toStandardRadixPoint(this.inputmask.unmaskedvalue());
-                    }
-                    return value;
-                },
-            },
-        });
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", 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.23", 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.23", ngImport: i0, type: DecimalMaskDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line
-                    selector: '[kirby-decimal-mask]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NG_VALUE_ACCESSOR]
-                }] }], propDecorators: { min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], precision: [{
-                type: Input
-            }], setMaxOnOverflow: [{
-                type: Input
-            }], alignment: [{
-                type: Input
-            }], padPrecisionDigits: [{
-                type: Input
-            }], allowMinus: [{
-                type: Input
-            }], disableGroupSeperator: [{
-                type: Input
-            }], maxlength: [{
-                type: Input
-            }] } });
-
-const imports = [FormFieldComponent, FormFieldMessageComponent, InputCounterComponent];
-class FormFieldModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.23", 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.23", ngImport: i0, type: FormFieldModule, imports: [CommonModule, IconModule, FormFieldComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: FormFieldModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule, DecimalMaskDirective, IconModule, AffixDirective, ...imports],
-                    exports: [...imports, DecimalMaskDirective, AffixDirective],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var InputComponent = 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);
+		}
+	}
+	get nativeValue() {
+		return this.elementRef?.nativeElement?.value;
+	}
+	get interactiveElement() {
+		return this.elementRef?.nativeElement;
+	}
+	constructor(elementRef, builtInValueAccessors) {
+		this.elementRef = elementRef;
+		this.kirbyChange = new EventEmitter();
+		this._hasError = false;
+		this.size = InputSize.large;
+		this.autocomplete = "off";
+		this.autocorrect = "off";
+		this.hasErrorChange = new EventEmitter();
+		extendValueAccessors(builtInValueAccessors, { writeValue: { afterWriteValue: (value) => this.kirbyChange.emit(value) } });
+	}
+	ngOnInit() {
+		setTimeout(() => {
+			const inputValue = this.elementRef.nativeElement.value;
+			if (inputValue) this.kirbyChange.emit(inputValue);
+		});
+	}
+	ngOnChanges(changes) {
+		if (changes.value) this.kirbyChange.emit(changes.value.currentValue);
+	}
+	static {
+		this.typeToInputmodeMap = {
+			number: "decimal",
+			search: "search"
+		};
+	}
+	_onKeyUp(value) {
+		this.kirbyChange.emit(value);
+	}
+	_onCutPaste(target) {
+		setTimeout(() => this.kirbyChange.emit(target.value));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: InputComponent,
+			deps: [{ token: i0.ElementRef }, {
+				token: NG_VALUE_ACCESSOR,
+				optional: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			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"
+				}
+			},
+			providers: [{
+				provide: FORM_FIELD_CONTROL,
+				useExisting: InputComponent
+			}],
+			usesOnChanges: true,
+			hostDirectives: [{
+				directive: DateInputDirective,
+				inputs: [
+					"prefillYear",
+					"prefillYear",
+					"useNativeDatePicker",
+					"useNativeDatePicker",
+					"dateValue",
+					"value"
+				]
+			}],
+			ngImport: i0,
+			template: "",
+			isInline: true,
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:1px solid var(--kirby-input-color-border-raised);box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);padding:calc(var(--kirby-spacing-s) - 1px);width:100%}:host.borderless{border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:.4}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:calc(var(--kirby-line-height-n) * 1em);text-align:start}}:host[type=date]::-webkit-calendar-picker-indicator{display:none}:host[type=date]::ng-deep+.suffix{cursor:pointer}@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:var(--kirby-border-radius-l);padding-block:calc(calc(var(--kirby-spacing-s) * .5) - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:var(--kirby-font-weight-bold)}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-color-content-raised-quiet)}.date-mask{font-family:var(--kirby-font-family);line-height:var(--kirby-line-height-n);font-size:var(--kirby-font-size-n);color:var(--kirby-color-content-raised);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: InputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			hostDirectives: [{
+				directive: DateInputDirective,
+				inputs: [
+					"prefillYear",
+					"useNativeDatePicker",
+					"dateValue: value"
+				]
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			selector: "input[kirby-input]",
+			template: "",
+			providers: [{
+				provide: FORM_FIELD_CONTROL,
+				useExisting: InputComponent
+			}],
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:1px solid var(--kirby-input-color-border-raised);box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);padding:calc(var(--kirby-spacing-s) - 1px);width:100%}:host.borderless{border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:.4}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:calc(var(--kirby-line-height-n) * 1em);text-align:start}}:host[type=date]::-webkit-calendar-picker-indicator{display:none}:host[type=date]::ng-deep+.suffix{cursor:pointer}@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:var(--kirby-border-radius-l);padding-block:calc(calc(var(--kirby-spacing-s) * .5) - 1px)}:host-context(kirby-item kirby-form-field[slot=end])[type=number]{font-weight:var(--kirby-font-weight-bold)}.date-mask-wrapper{position:relative}:host-context(.date-mask-wrapper){color:var(--kirby-color-content-raised-quiet)}.date-mask{font-family:var(--kirby-font-family);line-height:var(--kirby-line-height-n);font-size:var(--kirby-font-size-n);color:var(--kirby-color-content-raised);position:absolute;top:0;left:0;padding:var(--kirby-spacing-s)}:host(.md)+.date-mask{padding-block:calc(var(--kirby-spacing-s) * .5)}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, {
+		type: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: [NG_VALUE_ACCESSOR]
+		}]
+	}],
+	propDecorators: {
+		type: [{ type: Input }],
+		size: [{
+			type: HostBinding,
+			args: ["class"]
+		}, { type: Input }],
+		borderless: [{
+			type: HostBinding,
+			args: ["class.borderless"]
+		}, { type: Input }],
+		hasError: [
+			{
+				type: HostBinding,
+				args: ["attr.aria-invalid"]
+			},
+			{
+				type: HostBinding,
+				args: ["class.error"]
+			},
+			{ type: Input }
+		],
+		autocomplete: [{
+			type: HostBinding,
+			args: ["attr.autocomplete"]
+		}, { type: Input }],
+		autocorrect: [{
+			type: HostBinding,
+			args: ["attr.autocorrect"]
+		}, { type: Input }],
+		value: [{
+			type: HostBinding,
+			args: ["attr.value"]
+		}, { type: Input }],
+		maxlength: [{
+			type: HostBinding,
+			args: ["attr.maxlength"]
+		}, { type: Input }],
+		inputmode: [{
+			type: HostBinding,
+			args: ["attr.inputmode"]
+		}, { type: Input }],
+		hasErrorChange: [{ type: Output }],
+		_onKeyUp: [{
+			type: HostListener,
+			args: ["keyup", ["$event.target.value"]]
+		}],
+		_onCutPaste: [{
+			type: HostListener,
+			args: ["paste", ["$event.target"]]
+		}, {
+			type: HostListener,
+			args: ["cut", ["$event.target"]]
+		}]
+	}
+});
+var TextareaComponent = class TextareaComponent {
+	get hasError() {
+		return this._hasError;
+	}
+	set hasError(value) {
+		if (this._hasError !== value) {
+			this._hasError = value;
+			this.hasErrorChange.emit(this._hasError);
+		}
+	}
+	get nativeValue() {
+		return this.elementRef?.nativeElement?.value;
+	}
+	get interactiveElement() {
+		return this.elementRef?.nativeElement;
+	}
+	constructor(elementRef, builtInValueAccessors) {
+		this.elementRef = elementRef;
+		this.kirbyChange = new EventEmitter();
+		this._hasError = false;
+		this.autocomplete = "off";
+		this.autocorrect = "off";
+		this.hasErrorChange = new EventEmitter();
+		extendValueAccessors(builtInValueAccessors, { writeValue: { afterWriteValue: (value) => this.kirbyChange.emit(value) } });
+	}
+	ngOnInit() {
+		setTimeout(() => {
+			const inputValue = this.elementRef.nativeElement.value;
+			if (inputValue) this.kirbyChange.emit(inputValue);
+		});
+	}
+	ngOnChanges(changes) {
+		if (changes.value) this.kirbyChange.emit(changes.value.currentValue);
+	}
+	_onKeyUp(value) {
+		this.kirbyChange.emit(value);
+	}
+	_onCutPaste(target) {
+		setTimeout(() => this.kirbyChange.emit(target.value));
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: TextareaComponent,
+			deps: [{ token: i0.ElementRef }, {
+				token: NG_VALUE_ACCESSOR,
+				optional: true
+			}],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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"
+				}
+			},
+			providers: [{
+				provide: FORM_FIELD_CONTROL,
+				useExisting: TextareaComponent
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:1px solid var(--kirby-input-color-border-raised);box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);padding:calc(var(--kirby-spacing-s) - 1px);width:100%}:host.borderless{border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:.4}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:calc(var(--kirby-line-height-n) * 1em);text-align:start}}: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: "22.2.2",
+	ngImport: i0,
+	type: TextareaComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			selector: "textarea[kirby-textarea]",
+			providers: [{
+				provide: FORM_FIELD_CONTROL,
+				useExisting: TextareaComponent
+			}],
+			template: "@if (!value) {\n  <ng-content></ng-content>\n}\n<!-- prettier-ignore -->\n@if (value) {{{value}}}\n",
+			styles: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host(.cloned-input){pointer-events:none;position:absolute;top:0;left:0}:host-context(label).cloned-input{top:24px}:host-context(ion-modal).cloned-input{top:0!important;transform:none!important}:host.error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}@media(hover:hover){:host:not(:disabled):hover{background-color:var(--kirby-color-fill-raised-hover);border-color:var(--kirby-input-color-border-raised-hover);cursor:text}:host:not(:disabled):hover::placeholder{color:var(--kirby-color-content-raised-quiet-hover)}}:host:not(:disabled):active{border-color:var(--kirby-color-border-raised-loud)}:host:not(:disabled).error{border-color:var(--kirby-color-border-raised-danger);box-shadow:var(--kirby-error-ring-combined-inset)}:host:not(:disabled):focus-visible{box-shadow:var(--kirby-focus-ring-md-combined-inset);border-color:var(--kirby-color-border-focus)}:host:not(:disabled){transition:all 80ms linear 0ms;transition-property:background-color,border-color,box-shadow}:host{background-color:var(--kirby-color-fill-raised);color:var(--kirby-color-content-raised);border:1px solid var(--kirby-input-color-border-raised);box-sizing:border-box;font-family:var(--kirby-font-family);font-size:1rem;line-height:var(--kirby-line-height-n);outline:none;margin:0;-webkit-appearance:none;appearance:none;border-radius:var(--kirby-border-radius-n);padding:calc(var(--kirby-spacing-s) - 1px);width:100%}:host.borderless{border-radius:0;padding-inline:0;width:auto}:host:disabled{opacity:.4}:host::placeholder{color:var(--kirby-color-content-raised-quiet)}@supports not (selector(::-webkit-date-and-time-value)){:host(input[type=date]::-webkit-date-and-time-value){min-height:calc(var(--kirby-line-height-n) * 1em);text-align:start}}:host{position:relative;font-family:var(--kirby-font-family);resize:none}@media(min-width:768px){:host{resize:vertical}}\n"]
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }, {
+		type: void 0,
+		decorators: [{ type: Optional }, {
+			type: Inject,
+			args: [NG_VALUE_ACCESSOR]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: HostBinding,
+			args: ["attr.value"]
+		}, { type: Input }],
+		borderless: [{
+			type: HostBinding,
+			args: ["class.borderless"]
+		}, { type: Input }],
+		hasError: [
+			{
+				type: HostBinding,
+				args: ["attr.aria-invalid"]
+			},
+			{
+				type: HostBinding,
+				args: ["class.error"]
+			},
+			{ type: Input }
+		],
+		autocomplete: [{
+			type: HostBinding,
+			args: ["attr.autocomplete"]
+		}, { type: Input }],
+		autocorrect: [{
+			type: HostBinding,
+			args: ["attr.autocorrect"]
+		}, { type: Input }],
+		maxlength: [{
+			type: HostBinding,
+			args: ["attr.maxlength"]
+		}, { type: Input }],
+		hasErrorChange: [{ type: Output }],
+		_onKeyUp: [{
+			type: HostListener,
+			args: ["keyup", ["$event.target.value"]]
+		}],
+		_onCutPaste: [{
+			type: HostListener,
+			args: ["paste", ["$event.target"]]
+		}, {
+			type: HostListener,
+			args: ["cut", ["$event.target"]]
+		}]
+	}
+});
+var FormFieldComponent = class FormFieldComponent {
+	get label() {
+		return this._label;
+	}
+	set label(value) {
+		this._label = value;
+		this.setNestedInteractiveLabelAttributes();
+	}
+	get message() {
+		return this._message;
+	}
+	set message(value) {
+		this._message = value;
+		this.setNestedInteractiveMessageAttributes();
+	}
+	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.hasWarnedMissingControl = 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;
+	}
+	isInputOrTextarea() {
+		return this.formFieldControl instanceof InputComponent || this.formFieldControl instanceof TextareaComponent;
+	}
+	get _wrapContentInLabel() {
+		return !!this.label && this.isInputOrTextarea();
+	}
+	dispatchLoadEvent() {
+		this.windowRef.nativeWindow.document.dispatchEvent(new CustomEvent("ionInputDidLoad", { detail: this.element }));
+	}
+	_onRegisterFormField() {
+		this.dispatchLoadEvent();
+	}
+	onLabelClick() {
+		if (this.formFieldControl instanceof RadioGroupComponent) this.formFieldControl.focus();
+		else this.nestedInteractiveElement?.focus();
+	}
+	openDatePicker() {
+		if (!this.dateInput?.useNativeDatePicker) return;
+		this.nestedInteractiveElement.showPicker();
+	}
+	focus() {
+		if (!this.nestedInteractiveElement) return;
+		if (this.isInputOrTextarea()) setTimeout(() => {
+			if (this.isTouch) {
+				const touchStart = new TouchEvent("touchstart");
+				const touchEnd = new TouchEvent("touchend");
+				this.nestedInteractiveElement.dispatchEvent(touchStart);
+				this.nestedInteractiveElement.dispatchEvent(touchEnd);
+			} else this.nestedInteractiveElement.focus();
+		});
+	}
+	ngOnInit() {
+		this.isTouch = this.platform.isTouch();
+	}
+	ngAfterContentInit() {
+		this.handleAffixOffset();
+	}
+	ngAfterContentChecked() {
+		if (!this.formFieldControl) {
+			this.warnMissingControl();
+			return;
+		}
+		if (!this.nestedInteractiveElement) this.registerNestedInteractive();
+		if (!this.isRegistered && this.element.isConnected && this.isInputOrTextarea()) {
+			this.isRegistered = true;
+			this.dispatchLoadEvent();
+		}
+		this.showDefaultCalendarIcon = this.shouldShowDefaultCalendarIcon();
+	}
+	warnMissingControl() {
+		if (!this.hasWarnedMissingControl) {
+			this.hasWarnedMissingControl = true;
+			console.warn("kirby-form-field: No form field control found. Ensure a component providing FORM_FIELD_CONTROL is projected.");
+		}
+	}
+	ngOnDestroy() {
+		this.windowRef.nativeWindow.document.dispatchEvent(new CustomEvent("ionInputDidUnload", { detail: this.element }));
+		this.affixElements?.forEach((affix) => {
+			this.resizeObserverService.unobserve(affix.el);
+		});
+		this.nestedInteractiveErrorSubscription?.unsubscribe();
+	}
+	registerNestedInteractive() {
+		this.getNestedInteractiveElement();
+		this.setNestedInteractiveLabelAttributes();
+		this.setNestedInteractiveMessageAttributes();
+		this.subscribeToNestedInteractiveError();
+	}
+	getNestedInteractiveElement() {
+		this.nestedInteractiveElement = this.formFieldControl.interactiveElement;
+	}
+	setNestedInteractiveMessageAttributes() {
+		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);
+		} else {
+			this.renderer.removeAttribute(this.nestedInteractiveElement, "aria-describedby");
+			this.renderer.removeAttribute(this.nestedInteractiveElement, "aria-errormessage");
+		}
+	}
+	setNestedInteractiveLabelAttributes() {
+		if (!this.nestedInteractiveElement) return;
+		if (this._wrapContentInLabel) return;
+		if (this.label) this.renderer.setAttribute(this.nestedInteractiveElement, "aria-labelledby", this._labelId);
+		else this.renderer.removeAttribute(this.nestedInteractiveElement, "aria-labelledby");
+	}
+	subscribeToNestedInteractiveError() {
+		this._nestedInteractiveHasError = !!this.formFieldControl?.hasError;
+		this.nestedInteractiveErrorSubscription = this.formFieldControl?.hasErrorChange.subscribe((hasError) => {
+			this._nestedInteractiveHasError = hasError;
+			this.cdr.markForCheck();
+		});
+	}
+	shouldShowDefaultCalendarIcon() {
+		return this.dateInput?.useNativeDatePicker && !this.affixElements.some((affix) => affix.type === "suffix");
+	}
+	handleAffixOffset() {
+		if (this.formFieldControl instanceof InputComponent) {
+			const inputElement = this.formFieldControl.interactiveElement;
+			this.affixElements.forEach((affix) => {
+				this.resizeObserverService.observe(affix.el, (entry) => {
+					const padding = affix.type === "prefix" ? "padding-left" : "padding-right";
+					const affixWidth = inputElement.type === "date" ? 0 : entry.contentRect.width;
+					const existingPadding = parseInt(DesignTokenHelper.size("s"));
+					this.renderer.setStyle(inputElement, `${padding}`, `${affixWidth + existingPadding}px`);
+					const dateMask = this.element.querySelector(".date-mask");
+					if (dateMask) this.renderer.setStyle(dateMask, `${padding}`, `${affixWidth + existingPadding}px`);
+				});
+			});
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormFieldComponent,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: i1.PlatformService },
+				{ token: i0.Renderer2 },
+				{ token: i2.WindowRef },
+				{ token: i1$1.ResizeObserverService },
+				{ token: i0.ChangeDetectorRef }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			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: "formFieldControl",
+					first: true,
+					predicate: FORM_FIELD_CONTROL,
+					descendants: true
+				},
+				{
+					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></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\" (click)=\"openDatePicker()\">\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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative;margin-bottom:var(--kirby-spacing-s)}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px var(--kirby-spacing-s) 0 var(--kirby-spacing-s)}.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:var(--kirby-font-size-s);font-weight:var(--kirby-font-weight-light);line-height:var(--kirby-line-height-s);margin-bottom:var(--kirby-spacing-xxxs);padding:0 var(--kirby-spacing-s)}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:var(--kirby-spacing-xs);z-index:var(--kirby-z-index-default)}.affix-container .suffix{right:var(--kirby-spacing-xs)}.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-color-content-raised-quiet)}\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: "22.2.2",
+	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></ng-content>\n    <div class=\"suffix vertical-align semi-dark-text\" (click)=\"openDatePicker()\">\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: [".kirby-line-clamp{display:-webkit-box;-webkit-line-clamp:var(--line-clamp, none);-webkit-box-orient:vertical;overflow:hidden}:host{display:block;position:relative;margin-bottom:var(--kirby-spacing-s)}:host-context(kirby-item){margin-bottom:0}.texts{display:flex;justify-content:space-between;padding:2px var(--kirby-spacing-s) 0 var(--kirby-spacing-s)}.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:var(--kirby-font-size-s);font-weight:var(--kirby-font-weight-light);line-height:var(--kirby-line-height-s);margin-bottom:var(--kirby-spacing-xxxs);padding:0 var(--kirby-spacing-s)}.affix-container{position:relative}.affix-container .vertical-align{display:flex;align-items:center;position:absolute;top:0;bottom:0}.affix-container .prefix{left:var(--kirby-spacing-xs);z-index:var(--kirby-z-index-default)}.affix-container .suffix{right:var(--kirby-spacing-xs)}.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-color-content-raised-quiet)}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{ type: i1.PlatformService },
+		{ type: i0.Renderer2 },
+		{ type: i2.WindowRef },
+		{ type: i1$1.ResizeObserverService },
+		{ type: i0.ChangeDetectorRef }
+	],
+	propDecorators: {
+		label: [{ type: Input }],
+		message: [{ type: Input }],
+		affixElements: [{
+			type: ContentChildren,
+			args: [AffixDirective]
+		}],
+		counter: [{
+			type: ContentChild,
+			args: [InputCounterComponent, { static: false }]
+		}],
+		formFieldControl: [{
+			type: ContentChild,
+			args: [FORM_FIELD_CONTROL]
+		}],
+		dateInput: [{
+			type: ContentChild,
+			args: [DateInputDirective]
+		}],
+		_wrapContentInLabel: [{
+			type: HostBinding,
+			args: ["class.wrap-content-in-label"]
+		}],
+		_onRegisterFormField: [{
+			type: HostListener,
+			args: ["kirbyRegisterFormField"]
+		}]
+	}
+});
+var DecimalMaskDirective = class DecimalMaskDirective {
+	set allowMinus(allowMinus) {
+		this._allowMinus = allowMinus || (this.min || 0) < 0;
+	}
+	set disableGroupSeperator(disabled) {
+		this._groupSeperatorDisabled = String(disabled) === "" || String(disabled) === "true";
+	}
+	set maxlength(maxlength) {
+		this._maxlength = maxlength;
+		const maxlengthValue = parseInt("9".repeat(maxlength));
+		this.max = this.getMax(maxlengthValue);
+		this.min = this.getMin(maxlengthValue);
+	}
+	constructor(elementRef, locale, valueAccessors) {
+		this.elementRef = elementRef;
+		this.locale = locale;
+		this.valueAccessors = valueAccessors;
+		this.precision = 2;
+		this.setMaxOnOverflow = false;
+		this.alignment = "right";
+		this.padPrecisionDigits = false;
+		this.groupSeparator = getLocaleNumberSymbol(this.locale, NumberSymbol.Group);
+		this.radixPoint = getLocaleNumberSymbol(this.locale, NumberSymbol.Decimal);
+		this._allowMinus = false;
+		this.extendBuiltinValueAccessor();
+	}
+	ngOnInit() {
+		const element = this.elementRef.nativeElement;
+		element.setAttribute("type", "text");
+		element.removeAttribute("maxlength");
+		if (element.value) element.value = this.toLocaleRadixPoint(element.value);
+		this.initMask();
+	}
+	initMask() {
+		const element = this.elementRef.nativeElement;
+		new Inputmask("decimal", {
+			groupSeparator: this._groupSeperatorDisabled ? "" : this.groupSeparator,
+			radixPoint: this.radixPoint,
+			digits: this._maxlength ? 0 : this.precision,
+			digitsOptional: !this.padPrecisionDigits,
+			min: this.min,
+			max: this.max,
+			allowMinus: this._allowMinus,
+			negationSymbol: {
+				front: getLocaleNumberSymbol(this.locale, NumberSymbol.MinusSign),
+				back: ""
+			},
+			SetMaxOnOverflow: this.setMaxOnOverflow,
+			showMaskOnFocus: false,
+			showMaskOnHover: false,
+			placeholder: this.padPrecisionDigits ? void 0 : "",
+			rightAlign: this.alignment === "right",
+			onBeforeWrite: () => {
+				if (!this.inputmask) return;
+			},
+			onBeforePaste: (value, options) => {
+				const replacesValue = element.selectionStart === 0 && element.selectionEnd === element.value.length;
+				if (!this.padPrecisionDigits || !replacesValue) return options.onBeforeMask(value, options);
+				element.value = value;
+				element.dispatchEvent(new Event("input", { bubbles: true }));
+				return false;
+			}
+		}).mask(element);
+		this.inputmask = element.inputmask;
+	}
+	getMax(maxlengthValue) {
+		return this.max === void 0 ? maxlengthValue : Math.min(this.max, maxlengthValue);
+	}
+	getMin(maxlengthValue) {
+		if (!this.allowMinus) return;
+		maxlengthValue = -Math.abs(maxlengthValue);
+		return this.min === void 0 ? 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) => {
+				if (this.inputmask && value != null) this.inputmask.setValue(this.toLocaleRadixPoint(String(value)));
+			} },
+			registerOnChange: { transformValue: (value) => {
+				if (this.inputmask) return this.toStandardRadixPoint(this.inputmask.unmaskedvalue());
+				return value;
+			} }
+		});
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: DecimalMaskDirective,
+			deps: [
+				{ token: i0.ElementRef },
+				{ token: LOCALE_ID },
+				{
+					token: NG_VALUE_ACCESSOR,
+					optional: true
+				}
+			],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			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: "22.2.2",
+	ngImport: i0,
+	type: DecimalMaskDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "[kirby-decimal-mask]" }]
+	}],
+	ctorParameters: () => [
+		{ type: i0.ElementRef },
+		{
+			type: void 0,
+			decorators: [{
+				type: Inject,
+				args: [LOCALE_ID]
+			}]
+		},
+		{
+			type: void 0,
+			decorators: [{ type: Optional }, {
+				type: Inject,
+				args: [NG_VALUE_ACCESSOR]
+			}]
+		}
+	],
+	propDecorators: {
+		min: [{ type: Input }],
+		max: [{ type: Input }],
+		precision: [{ type: Input }],
+		setMaxOnOverflow: [{ type: Input }],
+		alignment: [{ type: Input }],
+		padPrecisionDigits: [{ type: Input }],
+		allowMinus: [{ type: Input }],
+		disableGroupSeperator: [{ type: Input }],
+		maxlength: [{ type: Input }]
+	}
+});
+const imports = [
+	FormFieldComponent,
+	FormFieldMessageComponent,
+	InputCounterComponent
+];
+var FormFieldModule = class FormFieldModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormFieldModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormFieldModule,
+			imports: [
+				CommonModule,
+				DecimalMaskDirective,
+				IconModule,
+				AffixDirective,
+				FormFieldComponent,
+				FormFieldMessageComponent,
+				InputCounterComponent
+			],
+			exports: [
+				FormFieldComponent,
+				FormFieldMessageComponent,
+				InputCounterComponent,
+				DecimalMaskDirective,
+				AffixDirective
+			]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: FormFieldModule,
+			imports: [
+				CommonModule,
+				IconModule,
+				FormFieldComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: FormFieldModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				DecimalMaskDirective,
+				IconModule,
+				AffixDirective,
+				...imports
+			],
+			exports: [
+				...imports,
+				DecimalMaskDirective,
+				AffixDirective
+			]
+		}]
+	}]
+});
 export { AffixDirective, DateInputDirective, DecimalMaskDirective, FormFieldComponent, FormFieldMessageComponent, FormFieldModule, InputComponent, InputCounterComponent, InputSize, TextareaComponent };
-//# sourceMappingURL=kirbydesign-designsystem-form-field.mjs.map
+
+//# sourceMappingURL=kirbydesign-designsystem-form-field.mjs.map