@ks-digital/designsystem-angular 0.0.1-alpha.75 → 0.0.1-alpha.76

package/fesm2022/ks-digital-designsystem-angular-forms.mjs

@@ -1,34 +1,68 @@
-import * as i0 from '@angular/core';
-import { input, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, signal, booleanAttribute, Directive } from '@angular/core';
-import '@digdir/designsystemet-web/ds-field';
-import * as i1 from '@ks-digital/designsystem-angular/__internals';
-import { HostSize, HostColor } from '@ks-digital/designsystem-angular/__internals';
-import * as i1$1 from '@ks-digital/designsystem-angular/validation-message';
-import { ValidationMessage } from '@ks-digital/designsystem-angular/validation-message';
-import '@digdir/designsystemet-web/fieldset';
-import '@digdir/designsystemet-web/readonly';
-
-/**
- * Use the Field component to connect inputs and labels
- */
-class Field {
-    /**
-     * Preferred position input for toggle inputs (radio, checkbox, switch) in field.
-     * @default start
-     */
-    dataPosition = input(undefined, { ...(ngDevMode ? { debugName: "dataPosition" } : /* istanbul ignore next */ {}), alias: 'data-position' });
-    /**
-     * Legacy position input kept for backward compatibility.
-     * @deprecated Use data-position instead.
-     * @default start
-     */
-    position = input(undefined, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
-    /**
-     * Variant forwarded to ds-field.
-     */
-    dataVariant = input(undefined, { ...(ngDevMode ? { debugName: "dataVariant" } : /* istanbul ignore next */ {}), alias: 'data-variant' });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Field, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.8", type: Field, isStandalone: true, selector: "ksd-field", inputs: { dataPosition: { classPropertyName: "dataPosition", publicName: "data-position", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, dataVariant: { classPropertyName: "dataVariant", publicName: "data-variant", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, Directive, booleanAttribute, input, signal } from "@angular/core";
+import "@digdir/designsystemet-web/ds-field";
+import * as i1$1 from "@ks-digital/designsystem-angular/__internals";
+import { HostColor, HostSize } from "@ks-digital/designsystem-angular/__internals";
+import * as i1 from "@ks-digital/designsystem-angular/validation-message";
+import { ValidationMessage } from "@ks-digital/designsystem-angular/validation-message";
+import "@digdir/designsystemet-web/fieldset";
+import "@digdir/designsystemet-web/readonly";
+var Field = class Field {
+	dataPosition = input(void 0, {
+		...ngDevMode ? { debugName: "dataPosition" } : /* istanbul ignore next */ {},
+		alias: "data-position"
+	});
+	position = input(void 0, ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	dataVariant = input(void 0, {
+		...ngDevMode ? { debugName: "dataVariant" } : /* istanbul ignore next */ {},
+		alias: "data-variant"
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Field,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: Field,
+		isStandalone: true,
+		selector: "ksd-field",
+		inputs: {
+			dataPosition: {
+				classPropertyName: "dataPosition",
+				publicName: "data-position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dataVariant: {
+				classPropertyName: "dataVariant",
+				publicName: "data-variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		hostDirectives: [{
+			directive: i1$1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1$1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0,
+		template: `
     <ds-field
       class="ds-field"
       [attr.data-position]="dataPosition() ?? position() ?? 'start'"
@@ -36,20 +70,30 @@ class Field {
     >
       <ng-content />
     </ds-field>
-  `, isInline: true, styles: [":host{display:grid}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Field, decorators: [{
-            type: Component,
-            args: [{ selector: 'ksd-field', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
-                        {
-                            directive: HostSize,
-                            inputs: ['data-size'],
-                        },
-                        {
-                            directive: HostColor,
-                            inputs: ['data-color'],
-                        },
-                    ], template: `
+  `,
+		isInline: true,
+		styles: [":host{display:grid}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Field,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-field",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			template: `
     <ds-field
       class="ds-field"
       [attr.data-position]="dataPosition() ?? position() ?? 'start'"
@@ -57,173 +101,414 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
     >
       <ng-content />
     </ds-field>
-  `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [":host{display:grid}\n"] }]
-        }], propDecorators: { dataPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-position", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], dataVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "data-variant", required: false }] }] } });
-
-class FieldDescription {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: FieldDescription, isStandalone: true, selector: "[ksd-field-description]", host: { attributes: { "data-field": "description" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldDescription, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[ksd-field-description]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        'data-field': 'description',
-                    },
-                    template: `<ng-content />`,
-                }]
-        }] });
-
-class FieldError {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: FieldError, isStandalone: true, selector: "ksd-error, [ksd-error]", hostDirectives: [{ directive: i1$1.ValidationMessage }], ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldError, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-error, [ksd-error]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<ng-content />`,
-                    hostDirectives: [
-                        {
-                            directive: ValidationMessage,
-                        },
-                    ],
-                }]
-        }] });
-
-class Fieldset {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Fieldset, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: Fieldset, isStandalone: true, selector: "fieldset[ksd-fieldset]", host: { classAttribute: "ds-fieldset" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, styles: [":host>::ng-deep ksd-field+ksd-field{margin-block-start:var(--ds-size-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Fieldset, decorators: [{
-            type: Component,
-            args: [{ selector: 'fieldset[ksd-fieldset]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'ds-fieldset',
-                    }, template: ` <ng-content /> `, schemas: [CUSTOM_ELEMENTS_SCHEMA], styles: [":host>::ng-deep ksd-field+ksd-field{margin-block-start:var(--ds-size-4)}\n"] }]
-        }] });
-
-class FieldsetDescription {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldsetDescription, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: FieldsetDescription, isStandalone: true, selector: "p[ksd-fieldset-description]", ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldsetDescription, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'p[ksd-fieldset-description]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    template: `<ng-content />`,
-                    host: {},
-                }]
-        }] });
-
-class FieldsetLegend {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldsetLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: FieldsetLegend, isStandalone: true, selector: "legend[ksd-fieldset-legend]", host: { classAttribute: "ds-label" }, ngImport: i0, template: ` <ng-content /> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FieldsetLegend, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'legend[ksd-fieldset-legend]',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'ds-label',
-                    },
-                    template: ` <ng-content /> `,
-                }]
-        }] });
-
-class Input {
-    /**
-     * The value of the input
-     */
-    value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the input is readonly
-     */
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Disables element
-     */
-    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Whether the element is invalid.
-     */
-    ariaInvalid = input(false, { ...(ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute,
-        alias: 'aria-invalid' });
-    onClick(event) {
-        if (this.readonly()) {
-            event.preventDefault();
-        }
-    }
-    onInput(event) {
-        const target = event.target;
-        const val = target?.value;
-        this.value.set(val ?? '');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Input, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: Input, isStandalone: true, selector: "input[ksd-input], textarea[ksd-input], select[ksd-input]", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaInvalid: { classPropertyName: "ariaInvalid", publicName: "aria-invalid", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)", "input": "onInput($event)" }, properties: { "attr.readonly": "readonly() ? true : null", "attr.disabled": "disabled() ? true : null", "attr.aria-invalid": "ariaInvalid() ? true : null" }, classAttribute: "ds-input" }, hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Input, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'input[ksd-input], textarea[ksd-input], select[ksd-input]',
-                    hostDirectives: [
-                        {
-                            directive: HostSize,
-                            inputs: ['data-size'],
-                        },
-                        {
-                            directive: HostColor,
-                            inputs: ['data-color'],
-                        },
-                    ],
-                    host: {
-                        class: 'ds-input',
-                        '[attr.readonly]': 'readonly() ? true : null',
-                        '[attr.disabled]': 'disabled() ? true : null',
-                        '[attr.aria-invalid]': 'ariaInvalid() ? true : null',
-                        '(click)': 'onClick($event)',
-                        '(input)': 'onInput($event)',
-                    },
-                }]
-        }], propDecorators: { readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-invalid", required: false }] }] } });
-
-class Label {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Label, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: Label, isStandalone: true, selector: "ksd-label", hostDirectives: [{ directive: i1.HostSize, inputs: ["data-size", "data-size"] }, { directive: i1.HostColor, inputs: ["data-color", "data-color"] }], ngImport: i0, template: `
+  `,
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			styles: [":host{display:grid}\n"]
+		}]
+	}],
+	propDecorators: {
+		dataPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-position",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		dataVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data-variant",
+				required: false
+			}]
+		}]
+	}
+});
+var FieldDescription = class FieldDescription {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FieldDescription,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: FieldDescription,
+		isStandalone: true,
+		selector: "[ksd-field-description]",
+		host: { attributes: { "data-field": "description" } },
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FieldDescription,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "[ksd-field-description]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "data-field": "description" },
+			template: `<ng-content />`
+		}]
+	}]
+});
+var FieldError = class FieldError {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FieldError,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: FieldError,
+		isStandalone: true,
+		selector: "ksd-error, [ksd-error]",
+		hostDirectives: [{ directive: i1.ValidationMessage }],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FieldError,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-error, [ksd-error]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<ng-content />`,
+			hostDirectives: [{ directive: ValidationMessage }]
+		}]
+	}]
+});
+var Fieldset = class Fieldset {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Fieldset,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: Fieldset,
+		isStandalone: true,
+		selector: "fieldset[ksd-fieldset]",
+		host: { classAttribute: "ds-fieldset" },
+		ngImport: i0,
+		template: ` <ng-content /> `,
+		isInline: true,
+		styles: [":host>::ng-deep ksd-field+ksd-field{margin-block-start:var(--ds-size-4)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Fieldset,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "fieldset[ksd-fieldset]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "ds-fieldset" },
+			template: ` <ng-content /> `,
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			styles: [":host>::ng-deep ksd-field+ksd-field{margin-block-start:var(--ds-size-4)}\n"]
+		}]
+	}]
+});
+var FieldsetDescription = class FieldsetDescription {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FieldsetDescription,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: FieldsetDescription,
+		isStandalone: true,
+		selector: "p[ksd-fieldset-description]",
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FieldsetDescription,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "p[ksd-fieldset-description]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: `<ng-content />`,
+			host: {}
+		}]
+	}]
+});
+var FieldsetLegend = class FieldsetLegend {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FieldsetLegend,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: FieldsetLegend,
+		isStandalone: true,
+		selector: "legend[ksd-fieldset-legend]",
+		host: { classAttribute: "ds-label" },
+		ngImport: i0,
+		template: ` <ng-content /> `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FieldsetLegend,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "legend[ksd-fieldset-legend]",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "ds-label" },
+			template: ` <ng-content /> `
+		}]
+	}]
+});
+var Input = class Input {
+	value = signal("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	readonly = input(false, {
+		...ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	ariaInvalid = input(false, {
+		...ngDevMode ? { debugName: "ariaInvalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute,
+		alias: "aria-invalid"
+	});
+	onClick(event) {
+		if (this.readonly()) event.preventDefault();
+	}
+	onInput(event) {
+		const val = event.target?.value;
+		this.value.set(val ?? "");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Input,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.0",
+		type: Input,
+		isStandalone: true,
+		selector: "input[ksd-input], textarea[ksd-input], select[ksd-input]",
+		inputs: {
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaInvalid: {
+				classPropertyName: "ariaInvalid",
+				publicName: "aria-invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			listeners: {
+				"click": "onClick($event)",
+				"input": "onInput($event)"
+			},
+			properties: {
+				"attr.readonly": "readonly() ? true : null",
+				"attr.disabled": "disabled() ? true : null",
+				"attr.aria-invalid": "ariaInvalid() ? true : null"
+			},
+			classAttribute: "ds-input"
+		},
+		hostDirectives: [{
+			directive: i1$1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1$1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Input,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[ksd-input], textarea[ksd-input], select[ksd-input]",
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			host: {
+				class: "ds-input",
+				"[attr.readonly]": "readonly() ? true : null",
+				"[attr.disabled]": "disabled() ? true : null",
+				"[attr.aria-invalid]": "ariaInvalid() ? true : null",
+				"(click)": "onClick($event)",
+				"(input)": "onInput($event)"
+			}
+		}]
+	}],
+	propDecorators: {
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		ariaInvalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-invalid",
+				required: false
+			}]
+		}]
+	}
+});
+var Label = class Label {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: Label,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.0",
+		type: Label,
+		isStandalone: true,
+		selector: "ksd-label",
+		hostDirectives: [{
+			directive: i1$1.HostSize,
+			inputs: ["data-size", "data-size"]
+		}, {
+			directive: i1$1.HostColor,
+			inputs: ["data-color", "data-color"]
+		}],
+		ngImport: i0,
+		template: `
     <!-- eslint-disable @angular-eslint/template/label-has-associated-control -- Fieldobserver handles binding the label to the input -->
     <label class="ds-label"><ng-content /></label>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: Label, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ksd-label',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    hostDirectives: [
-                        {
-                            directive: HostSize,
-                            inputs: ['data-size'],
-                        },
-                        {
-                            directive: HostColor,
-                            inputs: ['data-color'],
-                        },
-                    ],
-                    template: `
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: Label,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ksd-label",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: HostSize,
+				inputs: ["data-size"]
+			}, {
+				directive: HostColor,
+				inputs: ["data-color"]
+			}],
+			template: `
     <!-- eslint-disable @angular-eslint/template/label-has-associated-control -- Fieldobserver handles binding the label to the input -->
     <label class="ds-label"><ng-content /></label>
-  `,
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+  `
+		}]
+	}]
+});
 export { Field, FieldDescription, FieldError, Fieldset, FieldsetDescription, FieldsetLegend, Input, Label };
-//# sourceMappingURL=ks-digital-designsystem-angular-forms.mjs.map
+
+//# sourceMappingURL=ks-digital-designsystem-angular-forms.mjs.map