@wiltech-labs/ngx-forms 0.1.0

package/fesm2022/wiltech-labs-ngx-forms.mjs

@@ -0,0 +1,2211 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, computed, effect, inject, input, linkedSignal, output, signal, viewChildren } from "@angular/core";
+import { MatButton } from "@angular/material/button";
+import { FormField, disabled, email, max, maxLength, min, minLength, pattern, required, schema, validate } from "@angular/forms/signals";
+import * as i1 from "@angular/material/form-field";
+import { MatError, MatFormFieldModule } from "@angular/material/form-field";
+import * as i2 from "@angular/material/input";
+import { MatInput, MatInputModule } from "@angular/material/input";
+import * as i3$2 from "@angular/cdk/text-field";
+import { MatCheckbox } from "@angular/material/checkbox";
+import { MatRadioButton, MatRadioGroup } from "@angular/material/radio";
+import { MatOption, MatSelect } from "@angular/material/select";
+import { MatSlider, MatSliderThumb } from "@angular/material/slider";
+import { DateAdapter, MAT_DATE_FORMATS, MAT_NATIVE_DATE_FORMATS, NativeDateAdapter } from "@angular/material/core";
+import * as i3$1 from "@angular/material/datepicker";
+import { MatDatepickerModule } from "@angular/material/datepicker";
+import { Temporal } from "temporal-polyfill";
+import * as i3 from "@angular/material/timepicker";
+import { MatTimepickerModule } from "@angular/material/timepicker";
+var TextField = class TextField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	formField = computed(() => this.field(), ...ngDevMode ? [{ debugName: "formField" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TextField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: TextField,
+		isStandalone: true,
+		selector: "app-text-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<mat-form-field class=\"text-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of field()().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+		styles: [":host{display:block}.text-field{width:100%}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i1.MatHint,
+				selector: "mat-hint",
+				inputs: ["align", "id"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatError,
+				selector: "mat-error, [matError]",
+				inputs: ["id"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i2.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TextField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-text-field",
+			standalone: true,
+			imports: [
+				FormField,
+				MatFormFieldModule,
+				MatInputModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<mat-form-field class=\"text-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <input matInput [type]=\"fieldDef().type\" [formField]=\"formField()\" />\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of field()().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+			styles: [":host{display:block}.text-field{width:100%}\n"]
+		}]
+	}],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}]
+	}
+});
+var FormFieldType;
+(function(FormFieldType) {
+	FormFieldType["TEXT"] = "text";
+	FormFieldType["EMAIL"] = "email";
+	FormFieldType["PASSWORD"] = "password";
+	FormFieldType["SEARCH"] = "search";
+	FormFieldType["RADIO"] = "radio";
+	FormFieldType["CHECKBOX"] = "checkbox";
+	FormFieldType["NUMBER"] = "number";
+	FormFieldType["RANGE"] = "range";
+	FormFieldType["SELECT"] = "select";
+	FormFieldType["TEXTAREA"] = "textarea";
+	FormFieldType["CODE"] = "code";
+	FormFieldType["BUSINESS_DATE"] = "business-date";
+	FormFieldType["BUSINESS_TIME"] = "business-time";
+	FormFieldType["INSTANT_DATE_TIME"] = "instant-date-time";
+})(FormFieldType || (FormFieldType = {}));
+const CODE_INDENT = "  ";
+var TextareaField = class TextareaField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	isCode = computed(() => this.fieldDef().type === FormFieldType.CODE, ...ngDevMode ? [{ debugName: "isCode" }] : /* istanbul ignore next */ []);
+	onKeydown(event) {
+		if (!this.isCode() || event.key !== "Tab") return;
+		event.preventDefault();
+		const textarea = event.target;
+		const start = textarea.selectionStart ?? 0;
+		const end = textarea.selectionEnd ?? 0;
+		const indented = `${textarea.value.substring(0, start)}${CODE_INDENT}${textarea.value.substring(end)}`;
+		textarea.value = indented;
+		textarea.selectionStart = textarea.selectionEnd = start + 2;
+		this.field()().value.set(indented);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: TextareaField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: TextareaField,
+		isStandalone: true,
+		selector: "app-textarea-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<mat-form-field class=\"textarea-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <textarea\r\n    matInput\r\n    [formField]=\"field()\"\r\n    cdkTextareaAutosize\r\n    [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\r\n    [class.textarea-field-code]=\"isCode()\"\r\n    [attr.spellcheck]=\"isCode() ? 'false' : null\"\r\n    (keydown)=\"onKeydown($event)\"\r\n  ></textarea>\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of field()().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+		styles: [":host{display:block}.textarea-field{width:100%}.textarea-field-code{font-family:Courier New,Consolas,monospace;font-size:.85rem;tab-size:2}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i1.MatHint,
+				selector: "mat-hint",
+				inputs: ["align", "id"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatError,
+				selector: "mat-error, [matError]",
+				inputs: ["id"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i2.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "directive",
+				type: i3$2.CdkTextareaAutosize,
+				selector: "textarea[cdkTextareaAutosize]",
+				inputs: [
+					"cdkAutosizeMinRows",
+					"cdkAutosizeMaxRows",
+					"cdkTextareaAutosize",
+					"placeholder"
+				],
+				exportAs: ["cdkTextareaAutosize"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: TextareaField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-textarea-field",
+			standalone: true,
+			imports: [
+				FormField,
+				MatFormFieldModule,
+				MatInputModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<mat-form-field class=\"textarea-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <textarea\r\n    matInput\r\n    [formField]=\"field()\"\r\n    cdkTextareaAutosize\r\n    [cdkAutosizeMinRows]=\"isCode() ? 8 : 4\"\r\n    [class.textarea-field-code]=\"isCode()\"\r\n    [attr.spellcheck]=\"isCode() ? 'false' : null\"\r\n    (keydown)=\"onKeydown($event)\"\r\n  ></textarea>\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of field()().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+			styles: [":host{display:block}.textarea-field{width:100%}.textarea-field-code{font-family:Courier New,Consolas,monospace;font-size:.85rem;tab-size:2}\n"]
+		}]
+	}],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}]
+	}
+});
+var FieldSubscript = class FieldSubscript {
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	errors = computed(() => {
+		const byKind = /* @__PURE__ */ new Map();
+		for (const error of this.field()().errors()) {
+			const existing = byKind.get(error.kind);
+			if (!existing || !existing.message && error.message) byKind.set(error.kind, error);
+		}
+		return [...byKind.values()];
+	}, ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: FieldSubscript,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: FieldSubscript,
+		isStandalone: true,
+		selector: "app-field-subscript",
+		inputs: {
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "@let state = field()();\r\n@if (state.touched() && state.invalid()) {\r\n  @for (error of errors(); track error.kind) {\r\n    <mat-error class=\"field-subscript-error\">{{ error.message ?? error.kind }}</mat-error>\r\n  }\r\n} @else if (hint()) {\r\n  <div class=\"field-subscript-hint\">{{ hint() }}</div>\r\n}\r\n",
+		styles: [":host{display:block}.field-subscript-hint{font-size:12px;color:#0009;margin-top:4px;line-height:1.2}.field-subscript-error{display:block;margin-top:4px;font-size:12px;line-height:1.2}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: MatError,
+			selector: "mat-error, [matError]",
+			inputs: ["id"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: FieldSubscript,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-field-subscript",
+			standalone: true,
+			imports: [MatError],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@let state = field()();\r\n@if (state.touched() && state.invalid()) {\r\n  @for (error of errors(); track error.kind) {\r\n    <mat-error class=\"field-subscript-error\">{{ error.message ?? error.kind }}</mat-error>\r\n  }\r\n} @else if (hint()) {\r\n  <div class=\"field-subscript-hint\">{{ hint() }}</div>\r\n}\r\n",
+			styles: [":host{display:block}.field-subscript-hint{font-size:12px;color:#0009;margin-top:4px;line-height:1.2}.field-subscript-error{display:block;margin-top:4px;font-size:12px;line-height:1.2}\n"]
+		}]
+	}],
+	propDecorators: {
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}]
+	}
+});
+var CheckboxField = class CheckboxField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: CheckboxField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: CheckboxField,
+		isStandalone: true,
+		selector: "app-checkbox-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<mat-checkbox [formField]=\"field()\">\r\n  {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</mat-checkbox>\r\n<app-field-subscript class=\"checkbox-field-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
+		styles: [":host{display:block}.checkbox-field-subscript{padding-left:40px;margin-top:-4px}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "component",
+				type: MatCheckbox,
+				selector: "mat-checkbox",
+				inputs: [
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"aria-expanded",
+					"aria-controls",
+					"aria-owns",
+					"id",
+					"required",
+					"labelPosition",
+					"name",
+					"value",
+					"disableRipple",
+					"tabIndex",
+					"color",
+					"disabledInteractive",
+					"checked",
+					"disabled",
+					"indeterminate"
+				],
+				outputs: ["change", "indeterminateChange"],
+				exportAs: ["matCheckbox"]
+			},
+			{
+				kind: "component",
+				type: FieldSubscript,
+				selector: "app-field-subscript",
+				inputs: ["field", "hint"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: CheckboxField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-checkbox-field",
+			standalone: true,
+			imports: [
+				FormField,
+				MatCheckbox,
+				FieldSubscript
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<mat-checkbox [formField]=\"field()\">\r\n  {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</mat-checkbox>\r\n<app-field-subscript class=\"checkbox-field-subscript\" [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
+			styles: [":host{display:block}.checkbox-field-subscript{padding-left:40px;margin-top:-4px}\n"]
+		}]
+	}],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}]
+	}
+});
+let nextId$1 = 0;
+var RadioField = class RadioField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	labelId = `radio-field-label-${nextId$1++}`;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: RadioField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: RadioField,
+		isStandalone: true,
+		selector: "app-radio-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"radio-field-label\" [id]=\"labelId\">\r\n  {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</div>\r\n<mat-radio-group\r\n  class=\"radio-field-group\"\r\n  [class.radio-field-group-vertical]=\"fieldDef().orientation === 'vertical'\"\r\n  [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\r\n  [formField]=\"field()\"\r\n  [attr.aria-labelledby]=\"labelId\">\r\n  @for (option of fieldDef().options ?? []; track option.value) {\r\n    <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
+		styles: [":host{display:block}.radio-field-label{font-size:14px;color:#0009;margin-bottom:0}.radio-field-group{display:flex;flex-wrap:wrap;column-gap:8px}.radio-field-group-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "directive",
+				type: MatRadioGroup,
+				selector: "mat-radio-group",
+				inputs: [
+					"color",
+					"name",
+					"labelPosition",
+					"value",
+					"selected",
+					"disabled",
+					"required",
+					"disabledInteractive"
+				],
+				outputs: ["change"],
+				exportAs: ["matRadioGroup"]
+			},
+			{
+				kind: "component",
+				type: MatRadioButton,
+				selector: "mat-radio-button",
+				inputs: [
+					"id",
+					"name",
+					"aria-label",
+					"aria-labelledby",
+					"aria-describedby",
+					"disableRipple",
+					"tabIndex",
+					"checked",
+					"value",
+					"labelPosition",
+					"disabled",
+					"required",
+					"color",
+					"disabledInteractive"
+				],
+				outputs: ["change"],
+				exportAs: ["matRadioButton"]
+			},
+			{
+				kind: "component",
+				type: FieldSubscript,
+				selector: "app-field-subscript",
+				inputs: ["field", "hint"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: RadioField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-radio-field",
+			standalone: true,
+			imports: [
+				FormField,
+				MatRadioGroup,
+				MatRadioButton,
+				FieldSubscript
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"radio-field-label\" [id]=\"labelId\">\r\n  {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</div>\r\n<mat-radio-group\r\n  class=\"radio-field-group\"\r\n  [class.radio-field-group-vertical]=\"fieldDef().orientation === 'vertical'\"\r\n  [attr.aria-orientation]=\"fieldDef().orientation ?? 'horizontal'\"\r\n  [formField]=\"field()\"\r\n  [attr.aria-labelledby]=\"labelId\">\r\n  @for (option of fieldDef().options ?? []; track option.value) {\r\n    <mat-radio-button [value]=\"option.value\">{{ option.label }}</mat-radio-button>\r\n  }\r\n</mat-radio-group>\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
+			styles: [":host{display:block}.radio-field-label{font-size:14px;color:#0009;margin-bottom:0}.radio-field-group{display:flex;flex-wrap:wrap;column-gap:8px}.radio-field-group-vertical{flex-direction:column;flex-wrap:nowrap;align-items:flex-start}\n"]
+		}]
+	}],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}]
+	}
+});
+var SelectField = class SelectField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SelectField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SelectField,
+		isStandalone: true,
+		selector: "app-select-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<mat-form-field class=\"select-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <mat-select [formField]=\"field()\">\r\n    @for (option of fieldDef().options ?? []; track option.value) {\r\n      <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n    }\r\n  </mat-select>\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of field()().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+		styles: [":host{display:block}.select-field{width:100%}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i1.MatHint,
+				selector: "mat-hint",
+				inputs: ["align", "id"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatError,
+				selector: "mat-error, [matError]",
+				inputs: ["id"]
+			},
+			{
+				kind: "component",
+				type: MatSelect,
+				selector: "mat-select",
+				inputs: [
+					"aria-describedby",
+					"panelClass",
+					"disabled",
+					"disableRipple",
+					"tabIndex",
+					"hideSingleSelectionIndicator",
+					"placeholder",
+					"required",
+					"multiple",
+					"disableOptionCentering",
+					"compareWith",
+					"value",
+					"aria-label",
+					"aria-labelledby",
+					"errorStateMatcher",
+					"typeaheadDebounceInterval",
+					"sortComparator",
+					"id",
+					"panelWidth",
+					"canSelectNullableOptions"
+				],
+				outputs: [
+					"openedChange",
+					"opened",
+					"closed",
+					"selectionChange",
+					"valueChange"
+				],
+				exportAs: ["matSelect"]
+			},
+			{
+				kind: "component",
+				type: MatOption,
+				selector: "mat-option",
+				inputs: [
+					"value",
+					"id",
+					"disabled"
+				],
+				outputs: ["onSelectionChange"],
+				exportAs: ["matOption"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SelectField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-select-field",
+			standalone: true,
+			imports: [
+				FormField,
+				MatFormFieldModule,
+				MatSelect,
+				MatOption
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<mat-form-field class=\"select-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <mat-select [formField]=\"field()\">\r\n    @for (option of fieldDef().options ?? []; track option.value) {\r\n      <mat-option [value]=\"option.value\">{{ option.label }}</mat-option>\r\n    }\r\n  </mat-select>\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of field()().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+			styles: [":host{display:block}.select-field{width:100%}\n"]
+		}]
+	}],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}]
+	}
+});
+let nextId = 0;
+var SliderField = class SliderField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	labelId = `slider-field-label-${nextId++}`;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: SliderField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: SliderField,
+		isStandalone: true,
+		selector: "app-slider-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"slider-field-label\">\r\n  <span [id]=\"labelId\">\r\n    {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n  </span>\r\n  <span class=\"slider-field-value\">{{ field()().value() }}</span>\r\n</div>\r\n<mat-slider\r\n  class=\"slider-field-slider\"\r\n  discrete\r\n  [min]=\"fieldDef().min ?? 0\"\r\n  [max]=\"fieldDef().max ?? 100\"\r\n  [step]=\"fieldDef().step ?? 1\">\r\n  <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\r\n</mat-slider>\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
+		styles: [":host{display:block}.slider-field-label{font-size:14px;color:#0009;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.slider-field-value{font-size:14px;font-weight:600;color:var(--mat-sys-primary, #3f51b5)}.slider-field-slider{display:block;width:100%;margin:0}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: FormField,
+				selector: "[formField]",
+				inputs: ["formField"],
+				exportAs: ["formField"]
+			},
+			{
+				kind: "component",
+				type: MatSlider,
+				selector: "mat-slider",
+				inputs: [
+					"disabled",
+					"discrete",
+					"showTickMarks",
+					"min",
+					"color",
+					"disableRipple",
+					"max",
+					"step",
+					"displayWith"
+				],
+				exportAs: ["matSlider"]
+			},
+			{
+				kind: "directive",
+				type: MatSliderThumb,
+				selector: "input[matSliderThumb]",
+				inputs: ["value"],
+				outputs: [
+					"valueChange",
+					"dragStart",
+					"dragEnd"
+				],
+				exportAs: ["matSliderThumb"]
+			},
+			{
+				kind: "component",
+				type: FieldSubscript,
+				selector: "app-field-subscript",
+				inputs: ["field", "hint"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: SliderField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-slider-field",
+			standalone: true,
+			imports: [
+				FormField,
+				MatSlider,
+				MatSliderThumb,
+				FieldSubscript
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"slider-field-label\">\r\n  <span [id]=\"labelId\">\r\n    {{ fieldDef().label }}@if (field()().required()) {<span aria-hidden=\"true\"> *</span>}\r\n  </span>\r\n  <span class=\"slider-field-value\">{{ field()().value() }}</span>\r\n</div>\r\n<mat-slider\r\n  class=\"slider-field-slider\"\r\n  discrete\r\n  [min]=\"fieldDef().min ?? 0\"\r\n  [max]=\"fieldDef().max ?? 100\"\r\n  [step]=\"fieldDef().step ?? 1\">\r\n  <input matSliderThumb [formField]=\"field()\" [attr.aria-labelledby]=\"labelId\" />\r\n</mat-slider>\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
+			styles: [":host{display:block}.slider-field-label{font-size:14px;color:#0009;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0}.slider-field-value{font-size:14px;font-weight:600;color:var(--mat-sys-primary, #3f51b5)}.slider-field-slider{display:block;width:100%;margin:0}\n"]
+		}]
+	}],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}]
+	}
+});
+const NUMERIC_DATE = /^(\d{1,4})\D+(\d{1,2})\D+(\d{1,4})$/;
+var LocaleDateAdapter = class LocaleDateAdapter extends NativeDateAdapter {
+	parse(value, parseFormat) {
+		const match = typeof value === "string" ? value.trim().match(NUMERIC_DATE) : null;
+		if (!match) return super.parse(value, parseFormat);
+		const parts = {};
+		this.partOrder().forEach((part, index) => parts[part] = Number(match[index + 1]));
+		try {
+			return this.createDate(parts.year, parts.month - 1, parts.day);
+		} catch {
+			return this.invalid();
+		}
+	}
+	partOrder() {
+		return new Intl.DateTimeFormat(this.locale).formatToParts(new Date(2e3, 10, 22)).map((part) => part.type).filter((type) => type === "day" || type === "month" || type === "year");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LocaleDateAdapter,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: LocaleDateAdapter
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: LocaleDateAdapter,
+	decorators: [{ type: Injectable }]
+});
+function provideLocaleDateAdapter() {
+	return [{
+		provide: DateAdapter,
+		useClass: LocaleDateAdapter
+	}, {
+		provide: MAT_DATE_FORMATS,
+		useValue: MAT_NATIVE_DATE_FORMATS
+	}];
+}
+const INSTANT_DATE_TIME_INVALID_ERROR_LABEL = "Not a valid date and time.";
+const BUSINESS_DATE_INVALID_ERROR_LABEL = "Not a valid date.";
+const BUSINESS_TIME_INVALID_ERROR_LABEL = "Not a valid time.";
+function syncMatInputErrorState(inputs, state) {
+	effect(() => {
+		const hasError = state().touched() && state().invalid();
+		for (const input of inputs()) if (input.errorState !== hasError) {
+			input.errorState = hasError;
+			input.stateChanges.next();
+		}
+	});
+}
+function parseInstant(value) {
+	return tryParse(value, (v) => Temporal.Instant.from(v));
+}
+function parsePlainDate(value) {
+	return tryParse(value, (v) => Temporal.PlainDate.from(v));
+}
+function parsePlainTime(value) {
+	return tryParse(value, (v) => Temporal.PlainTime.from(v));
+}
+const DATE_TIME_RULES = {
+	[FormFieldType.INSTANT_DATE_TIME]: {
+		parse: parseInstant,
+		compare: Temporal.Instant.compare,
+		invalidMessage: INSTANT_DATE_TIME_INVALID_ERROR_LABEL
+	},
+	[FormFieldType.BUSINESS_DATE]: {
+		parse: parsePlainDate,
+		compare: Temporal.PlainDate.compare,
+		invalidMessage: BUSINESS_DATE_INVALID_ERROR_LABEL
+	},
+	[FormFieldType.BUSINESS_TIME]: {
+		parse: parsePlainTime,
+		compare: Temporal.PlainTime.compare,
+		invalidMessage: BUSINESS_TIME_INVALID_ERROR_LABEL
+	}
+};
+function isDateTimeField(type) {
+	return type in DATE_TIME_RULES;
+}
+function dateTimeError(value, fieldDef) {
+	const rule = DATE_TIME_RULES[fieldDef.type];
+	if (!rule || !value) return null;
+	const parsed = rule.parse(value);
+	if (!parsed) return {
+		kind: "invalidDateTime",
+		message: rule.invalidMessage
+	};
+	const min = fieldDef.dateTimeConfig?.min;
+	const parsedMin = rule.parse(min);
+	if (parsedMin && rule.compare(parsed, parsedMin) < 0) return {
+		kind: "minDateTime",
+		message: `${fieldDef.label} cannot be before ${min}`
+	};
+	const max = fieldDef.dateTimeConfig?.max;
+	const parsedMax = rule.parse(max);
+	if (parsedMax && rule.compare(parsed, parsedMax) > 0) return {
+		kind: "maxDateTime",
+		message: `${fieldDef.label} cannot be after ${max}`
+	};
+	return null;
+}
+function tryParse(value, parse) {
+	if (!value) return null;
+	try {
+		return parse(value);
+	} catch {
+		return null;
+	}
+}
+var BusinessDateField = class BusinessDateField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	dateAdapter = inject(DateAdapter);
+	state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	date = computed(() => toDate$1(this.state().value()), ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
+	minDate = computed(() => toDate$1(this.fieldDef().dateTimeConfig?.min), ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
+	maxDate = computed(() => toDate$1(this.fieldDef().dateTimeConfig?.max), ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
+	inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
+	constructor() {
+		syncMatInputErrorState(this.inputs, this.state);
+		effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || "en-GB"));
+	}
+	onDateChange(date) {
+		if (!date || isNaN(date.getTime())) {
+			this.state().value.set(null);
+			return;
+		}
+		this.state().value.set(Temporal.PlainDate.from({
+			year: date.getFullYear(),
+			month: date.getMonth() + 1,
+			day: date.getDate()
+		}).toString());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: BusinessDateField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: BusinessDateField,
+		isStandalone: true,
+		selector: "app-business-date-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		providers: [provideLocaleDateAdapter()],
+		viewQueries: [{
+			propertyName: "inputs",
+			predicate: MatInput,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<mat-form-field class=\"business-date-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <input\r\n    matInput\r\n    [matDatepicker]=\"datepicker\"\r\n    [value]=\"date()\"\r\n    [min]=\"minDate()\"\r\n    [max]=\"maxDate()\"\r\n    [required]=\"state().required()\"\r\n    [disabled]=\"state().disabled()\"\r\n    (blur)=\"state().markAsTouched()\"\r\n    (dateChange)=\"onDateChange($event.value)\"\r\n  />\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\r\n  <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of state().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+		styles: [":host{display:block}.business-date-field{width:100%}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i1.MatHint,
+				selector: "mat-hint",
+				inputs: ["align", "id"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatError,
+				selector: "mat-error, [matError]",
+				inputs: ["id"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatSuffix,
+				selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
+				inputs: ["matTextSuffix"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i2.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatDatepickerModule
+			},
+			{
+				kind: "component",
+				type: i3$1.MatDatepicker,
+				selector: "mat-datepicker",
+				exportAs: ["matDatepicker"]
+			},
+			{
+				kind: "directive",
+				type: i3$1.MatDatepickerInput,
+				selector: "input[matDatepicker]",
+				inputs: [
+					"matDatepicker",
+					"min",
+					"max",
+					"matDatepickerFilter"
+				],
+				exportAs: ["matDatepickerInput"]
+			},
+			{
+				kind: "component",
+				type: i3$1.MatDatepickerToggle,
+				selector: "mat-datepicker-toggle",
+				inputs: [
+					"for",
+					"tabIndex",
+					"aria-label",
+					"disabled",
+					"disableRipple"
+				],
+				exportAs: ["matDatepickerToggle"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: BusinessDateField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-business-date-field",
+			standalone: true,
+			imports: [
+				MatFormFieldModule,
+				MatInputModule,
+				MatDatepickerModule
+			],
+			providers: [provideLocaleDateAdapter()],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<mat-form-field class=\"business-date-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <input\r\n    matInput\r\n    [matDatepicker]=\"datepicker\"\r\n    [value]=\"date()\"\r\n    [min]=\"minDate()\"\r\n    [max]=\"maxDate()\"\r\n    [required]=\"state().required()\"\r\n    [disabled]=\"state().disabled()\"\r\n    (blur)=\"state().markAsTouched()\"\r\n    (dateChange)=\"onDateChange($event.value)\"\r\n  />\r\n  <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\r\n  <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of state().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+			styles: [":host{display:block}.business-date-field{width:100%}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		inputs: [{
+			type: i0.ViewChildren,
+			args: [i0.forwardRef(() => MatInput), { isSignal: true }]
+		}]
+	}
+});
+function toDate$1(value) {
+	const plainDate = parsePlainDate(value);
+	return plainDate ? new Date(plainDate.year, plainDate.month - 1, plainDate.day) : null;
+}
+var BusinessTimeField = class BusinessTimeField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	dateAdapter = inject(DateAdapter);
+	state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	time = computed(() => toDate(this.state().value()), ...ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []);
+	minTime = computed(() => toDate(this.fieldDef().dateTimeConfig?.min), ...ngDevMode ? [{ debugName: "minTime" }] : /* istanbul ignore next */ []);
+	maxTime = computed(() => toDate(this.fieldDef().dateTimeConfig?.max), ...ngDevMode ? [{ debugName: "maxTime" }] : /* istanbul ignore next */ []);
+	inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
+	constructor() {
+		syncMatInputErrorState(this.inputs, this.state);
+		effect(() => this.dateAdapter.setLocale(this.fieldDef().dateTimeConfig?.locale || "en-GB"));
+	}
+	onTimeChange(time) {
+		if (!time || isNaN(time.getTime())) {
+			this.state().value.set(null);
+			return;
+		}
+		this.state().value.set(Temporal.PlainTime.from({
+			hour: time.getHours(),
+			minute: time.getMinutes()
+		}).toString({ smallestUnit: "minute" }));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: BusinessTimeField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: BusinessTimeField,
+		isStandalone: true,
+		selector: "app-business-time-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		providers: [provideLocaleDateAdapter()],
+		viewQueries: [{
+			propertyName: "inputs",
+			predicate: MatInput,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<mat-form-field class=\"business-time-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <input\r\n    matInput\r\n    [matTimepicker]=\"timepicker\"\r\n    [matTimepickerMin]=\"minTime()\"\r\n    [matTimepickerMax]=\"maxTime()\"\r\n    [value]=\"time()\"\r\n    [required]=\"state().required()\"\r\n    [disabled]=\"state().disabled()\"\r\n    (blur)=\"state().markAsTouched()\"\r\n    (valueChange)=\"onTimeChange($event)\"\r\n  />\r\n  <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\r\n  <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of state().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+		styles: [":host{display:block}.business-time-field{width:100%}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i1.MatHint,
+				selector: "mat-hint",
+				inputs: ["align", "id"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatError,
+				selector: "mat-error, [matError]",
+				inputs: ["id"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatSuffix,
+				selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
+				inputs: ["matTextSuffix"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i2.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatTimepickerModule
+			},
+			{
+				kind: "component",
+				type: i3.MatTimepicker,
+				selector: "mat-timepicker",
+				inputs: [
+					"interval",
+					"options",
+					"disableRipple",
+					"aria-label",
+					"aria-labelledby",
+					"panelClass"
+				],
+				outputs: [
+					"selected",
+					"opened",
+					"closed"
+				],
+				exportAs: ["matTimepicker"]
+			},
+			{
+				kind: "directive",
+				type: i3.MatTimepickerInput,
+				selector: "input[matTimepicker]",
+				inputs: [
+					"value",
+					"matTimepicker",
+					"matTimepickerMin",
+					"matTimepickerMax",
+					"matTimepickerOpenOnClick",
+					"disabled"
+				],
+				outputs: ["valueChange"],
+				exportAs: ["matTimepickerInput"]
+			},
+			{
+				kind: "component",
+				type: i3.MatTimepickerToggle,
+				selector: "mat-timepicker-toggle",
+				inputs: [
+					"for",
+					"aria-label",
+					"aria-labelledby",
+					"disabled",
+					"tabIndex",
+					"disableRipple"
+				],
+				exportAs: ["matTimepickerToggle"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: BusinessTimeField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-business-time-field",
+			standalone: true,
+			imports: [
+				MatFormFieldModule,
+				MatInputModule,
+				MatTimepickerModule
+			],
+			providers: [provideLocaleDateAdapter()],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<mat-form-field class=\"business-time-field\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n  <mat-label>{{ fieldDef().label }}</mat-label>\r\n  <input\r\n    matInput\r\n    [matTimepicker]=\"timepicker\"\r\n    [matTimepickerMin]=\"minTime()\"\r\n    [matTimepickerMax]=\"maxTime()\"\r\n    [value]=\"time()\"\r\n    [required]=\"state().required()\"\r\n    [disabled]=\"state().disabled()\"\r\n    (blur)=\"state().markAsTouched()\"\r\n    (valueChange)=\"onTimeChange($event)\"\r\n  />\r\n  <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\r\n  <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\r\n\r\n  @if (fieldDef().hint) {\r\n    <mat-hint>{{ fieldDef().hint }}</mat-hint>\r\n  }\r\n\r\n  @for (error of state().errors(); track error.kind) {\r\n    <mat-error>{{ error.message }}</mat-error>\r\n  }\r\n</mat-form-field>\r\n",
+			styles: [":host{display:block}.business-time-field{width:100%}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		inputs: [{
+			type: i0.ViewChildren,
+			args: [i0.forwardRef(() => MatInput), { isSignal: true }]
+		}]
+	}
+});
+function toDate(value) {
+	const plainTime = parsePlainTime(value);
+	return plainTime ? new Date(2e3, 0, 1, plainTime.hour, plainTime.minute) : null;
+}
+var ZonedDateTimeService = class ZonedDateTimeService {
+	toDate(instant, timeZone) {
+		const zoned = this.toZoned(instant, timeZone);
+		if (!zoned) return null;
+		return new Date(zoned.year, zoned.month - 1, zoned.day, zoned.hour, zoned.minute);
+	}
+	toInstant(date, time, timeZone, disambiguation = "earlier") {
+		try {
+			const plainDateTime = Temporal.PlainDateTime.from({
+				year: date.getFullYear(),
+				month: date.getMonth() + 1,
+				day: date.getDate(),
+				hour: time.getHours(),
+				minute: time.getMinutes()
+			});
+			const earlier = plainDateTime.toZonedDateTime(timeZone, { disambiguation: "earlier" });
+			const later = plainDateTime.toZonedDateTime(timeZone, { disambiguation: "later" });
+			if (earlier.equals(later)) return {
+				instant: earlier.toInstant().toString(),
+				notice: null
+			};
+			if (!earlier.toPlainDateTime().equals(plainDateTime)) return {
+				instant: later.toInstant().toString(),
+				notice: `${formatWallClock(plainDateTime)} does not exist in ${timeZone} (clocks go forward). Using ${formatWallClock(later.toPlainDateTime())} (UTC${later.offset}) instead.`
+			};
+			const chosen = disambiguation === "later" ? later : earlier;
+			return {
+				instant: chosen.toInstant().toString(),
+				notice: `${formatWallClock(plainDateTime)} happens twice in ${timeZone} (clocks go back). Using the ${chosen === earlier ? "first" : "second"} occurrence (UTC${chosen.offset}).`
+			};
+		} catch {
+			return null;
+		}
+	}
+	offset(instant, timeZone) {
+		return this.toZoned(instant, timeZone)?.offset ?? null;
+	}
+	toZoned(instant, timeZone) {
+		try {
+			return parseInstant(instant)?.toZonedDateTimeISO(timeZone) ?? null;
+		} catch {
+			return null;
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ZonedDateTimeService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: ZonedDateTimeService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ZonedDateTimeService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+function formatWallClock(plainDateTime) {
+	return plainDateTime.toString({ smallestUnit: "minute" }).replace("T", " ");
+}
+var InstantDateTimeField = class InstantDateTimeField {
+	fieldDef = input.required(...ngDevMode ? [{ debugName: "fieldDef" }] : /* istanbul ignore next */ []);
+	field = input.required(...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	zonedDateTime = inject(ZonedDateTimeService);
+	dateAdapter = inject(DateAdapter);
+	notice = signal(null, ...ngDevMode ? [{ debugName: "notice" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.field()(), ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	config = computed(() => this.fieldDef().dateTimeConfig, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	timeZone = computed(() => this.config()?.timeZone || Temporal.Now.timeZoneId(), ...ngDevMode ? [{ debugName: "timeZone" }] : /* istanbul ignore next */ []);
+	offset = computed(() => this.zonedDateTime.offset(this.state().value(), this.timeZone()), ...ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []);
+	minDate = computed(() => this.zonedDateTime.toDate(this.config()?.min, this.timeZone()), ...ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []);
+	maxDate = computed(() => this.zonedDateTime.toDate(this.config()?.max, this.timeZone()), ...ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []);
+	wallClock = computed(() => this.zonedDateTime.toDate(this.state().value(), this.timeZone()), {
+		...ngDevMode ? { debugName: "wallClock" } : /* istanbul ignore next */ {},
+		equal: (a, b) => a?.getTime() === b?.getTime()
+	});
+	date = linkedSignal(() => this.wallClock(), ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
+	time = linkedSignal(() => this.wallClock(), ...ngDevMode ? [{ debugName: "time" }] : /* istanbul ignore next */ []);
+	inputs = viewChildren(MatInput, ...ngDevMode ? [{ debugName: "inputs" }] : /* istanbul ignore next */ []);
+	constructor() {
+		syncMatInputErrorState(this.inputs, this.state);
+		effect(() => this.dateAdapter.setLocale(this.config()?.locale || "en-GB"));
+	}
+	onDateChange(date) {
+		if (sameParts(date, this.date(), (d) => [
+			d.getFullYear(),
+			d.getMonth(),
+			d.getDate()
+		])) return;
+		this.date.set(date);
+		this.commit();
+	}
+	onTimeChange(time) {
+		if (sameParts(time, this.time(), (t) => [t.getHours(), t.getMinutes()])) return;
+		this.time.set(time);
+		this.commit();
+	}
+	commit() {
+		this.notice.set(null);
+		const date = this.date();
+		const time = this.time();
+		const value = this.state().value;
+		if (!isValidDate(date) || !isValidDate(time)) {
+			if (value() !== null) value.set(null);
+			return;
+		}
+		const result = this.zonedDateTime.toInstant(date, time, this.timeZone(), this.config()?.disambiguation);
+		value.set(result?.instant ?? null);
+		this.notice.set(result?.notice ?? null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: InstantDateTimeField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: InstantDateTimeField,
+		isStandalone: true,
+		selector: "app-instant-date-time-field",
+		inputs: {
+			fieldDef: {
+				classPropertyName: "fieldDef",
+				publicName: "fieldDef",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			field: {
+				classPropertyName: "field",
+				publicName: "field",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		providers: [provideLocaleDateAdapter()],
+		viewQueries: [{
+			propertyName: "inputs",
+			predicate: MatInput,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"instant-date-time-field-label\">\r\n  {{ fieldDef().label }}@if (state().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</div>\r\n\r\n<div class=\"instant-date-time-field-row\">\r\n  <mat-form-field class=\"instant-date-time-field-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n    <mat-label>Date</mat-label>\r\n    <input\r\n      matInput\r\n      [matDatepicker]=\"datepicker\"\r\n      [value]=\"date()\"\r\n      [min]=\"minDate()\"\r\n      [max]=\"maxDate()\"\r\n      [disabled]=\"state().disabled()\"\r\n      (blur)=\"state().markAsTouched()\"\r\n      (dateChange)=\"onDateChange($event.value)\"\r\n    />\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\r\n    <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\r\n  </mat-form-field>\r\n\r\n  <mat-form-field class=\"instant-date-time-field-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n    <mat-label>Time</mat-label>\r\n    <input\r\n      matInput\r\n      [matTimepicker]=\"timepicker\"\r\n      [value]=\"time()\"\r\n      [disabled]=\"state().disabled()\"\r\n      (blur)=\"state().markAsTouched()\"\r\n      (valueChange)=\"onTimeChange($event)\"\r\n    />\r\n    <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\r\n    <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\r\n  </mat-form-field>\r\n</div>\r\n\r\n<div class=\"instant-date-time-field-zone\">\r\n  {{ timeZone() }}@if (offset()) { (UTC{{ offset() }})}\r\n  @if (state().value()) {\r\n    · stored as {{ state().value() }}\r\n  }\r\n</div>\r\n\r\n@if (notice()) {\r\n  <div class=\"instant-date-time-field-notice\">{{ notice() }}</div>\r\n}\r\n\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
+		styles: [":host{display:block}.instant-date-time-field-label{margin-bottom:6px;font-size:14px;color:#0009}.instant-date-time-field-row{display:flex;gap:8px;width:100%}@media(max-width:400px){.instant-date-time-field-row{flex-direction:column}}.instant-date-time-field-date{flex:3;min-width:0}.instant-date-time-field-time{flex:2;min-width:0}.instant-date-time-field-zone{font-size:12px;color:#0009;margin-top:4px;line-height:1.2}.instant-date-time-field-notice{font-size:12px;color:#8a5a00;margin-top:4px}\n"],
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: MatFormFieldModule
+			},
+			{
+				kind: "component",
+				type: i1.MatFormField,
+				selector: "mat-form-field",
+				inputs: [
+					"hideRequiredMarker",
+					"color",
+					"floatLabel",
+					"appearance",
+					"subscriptSizing",
+					"hintLabel"
+				],
+				exportAs: ["matFormField"]
+			},
+			{
+				kind: "directive",
+				type: i1.MatLabel,
+				selector: "mat-label"
+			},
+			{
+				kind: "directive",
+				type: i1.MatSuffix,
+				selector: "[matSuffix], [matIconSuffix], [matTextSuffix]",
+				inputs: ["matTextSuffix"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatInputModule
+			},
+			{
+				kind: "directive",
+				type: i2.MatInput,
+				selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+				inputs: [
+					"disabled",
+					"id",
+					"placeholder",
+					"name",
+					"required",
+					"type",
+					"errorStateMatcher",
+					"aria-describedby",
+					"value",
+					"readonly",
+					"disabledInteractive"
+				],
+				exportAs: ["matInput"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatDatepickerModule
+			},
+			{
+				kind: "component",
+				type: i3$1.MatDatepicker,
+				selector: "mat-datepicker",
+				exportAs: ["matDatepicker"]
+			},
+			{
+				kind: "directive",
+				type: i3$1.MatDatepickerInput,
+				selector: "input[matDatepicker]",
+				inputs: [
+					"matDatepicker",
+					"min",
+					"max",
+					"matDatepickerFilter"
+				],
+				exportAs: ["matDatepickerInput"]
+			},
+			{
+				kind: "component",
+				type: i3$1.MatDatepickerToggle,
+				selector: "mat-datepicker-toggle",
+				inputs: [
+					"for",
+					"tabIndex",
+					"aria-label",
+					"disabled",
+					"disableRipple"
+				],
+				exportAs: ["matDatepickerToggle"]
+			},
+			{
+				kind: "ngmodule",
+				type: MatTimepickerModule
+			},
+			{
+				kind: "component",
+				type: i3.MatTimepicker,
+				selector: "mat-timepicker",
+				inputs: [
+					"interval",
+					"options",
+					"disableRipple",
+					"aria-label",
+					"aria-labelledby",
+					"panelClass"
+				],
+				outputs: [
+					"selected",
+					"opened",
+					"closed"
+				],
+				exportAs: ["matTimepicker"]
+			},
+			{
+				kind: "directive",
+				type: i3.MatTimepickerInput,
+				selector: "input[matTimepicker]",
+				inputs: [
+					"value",
+					"matTimepicker",
+					"matTimepickerMin",
+					"matTimepickerMax",
+					"matTimepickerOpenOnClick",
+					"disabled"
+				],
+				outputs: ["valueChange"],
+				exportAs: ["matTimepickerInput"]
+			},
+			{
+				kind: "component",
+				type: i3.MatTimepickerToggle,
+				selector: "mat-timepicker-toggle",
+				inputs: [
+					"for",
+					"aria-label",
+					"aria-labelledby",
+					"disabled",
+					"tabIndex",
+					"disableRipple"
+				],
+				exportAs: ["matTimepickerToggle"]
+			},
+			{
+				kind: "component",
+				type: FieldSubscript,
+				selector: "app-field-subscript",
+				inputs: ["field", "hint"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: InstantDateTimeField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-instant-date-time-field",
+			standalone: true,
+			imports: [
+				MatFormFieldModule,
+				MatInputModule,
+				MatDatepickerModule,
+				MatTimepickerModule,
+				FieldSubscript
+			],
+			providers: [provideLocaleDateAdapter()],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"instant-date-time-field-label\">\r\n  {{ fieldDef().label }}@if (state().required()) {<span aria-hidden=\"true\"> *</span>}\r\n</div>\r\n\r\n<div class=\"instant-date-time-field-row\">\r\n  <mat-form-field class=\"instant-date-time-field-date\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n    <mat-label>Date</mat-label>\r\n    <input\r\n      matInput\r\n      [matDatepicker]=\"datepicker\"\r\n      [value]=\"date()\"\r\n      [min]=\"minDate()\"\r\n      [max]=\"maxDate()\"\r\n      [disabled]=\"state().disabled()\"\r\n      (blur)=\"state().markAsTouched()\"\r\n      (dateChange)=\"onDateChange($event.value)\"\r\n    />\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"datepicker\" />\r\n    <mat-datepicker #datepicker (closed)=\"state().markAsTouched()\" />\r\n  </mat-form-field>\r\n\r\n  <mat-form-field class=\"instant-date-time-field-time\" appearance=\"outline\" subscriptSizing=\"dynamic\">\r\n    <mat-label>Time</mat-label>\r\n    <input\r\n      matInput\r\n      [matTimepicker]=\"timepicker\"\r\n      [value]=\"time()\"\r\n      [disabled]=\"state().disabled()\"\r\n      (blur)=\"state().markAsTouched()\"\r\n      (valueChange)=\"onTimeChange($event)\"\r\n    />\r\n    <mat-timepicker-toggle matIconSuffix [for]=\"timepicker\" />\r\n    <mat-timepicker #timepicker (closed)=\"state().markAsTouched()\" />\r\n  </mat-form-field>\r\n</div>\r\n\r\n<div class=\"instant-date-time-field-zone\">\r\n  {{ timeZone() }}@if (offset()) { (UTC{{ offset() }})}\r\n  @if (state().value()) {\r\n    · stored as {{ state().value() }}\r\n  }\r\n</div>\r\n\r\n@if (notice()) {\r\n  <div class=\"instant-date-time-field-notice\">{{ notice() }}</div>\r\n}\r\n\r\n<app-field-subscript [field]=\"field()\" [hint]=\"fieldDef().hint\" />\r\n",
+			styles: [":host{display:block}.instant-date-time-field-label{margin-bottom:6px;font-size:14px;color:#0009}.instant-date-time-field-row{display:flex;gap:8px;width:100%}@media(max-width:400px){.instant-date-time-field-row{flex-direction:column}}.instant-date-time-field-date{flex:3;min-width:0}.instant-date-time-field-time{flex:2;min-width:0}.instant-date-time-field-zone{font-size:12px;color:#0009;margin-top:4px;line-height:1.2}.instant-date-time-field-notice{font-size:12px;color:#8a5a00;margin-top:4px}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		fieldDef: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fieldDef",
+				required: true
+			}]
+		}],
+		field: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "field",
+				required: true
+			}]
+		}],
+		inputs: [{
+			type: i0.ViewChildren,
+			args: [i0.forwardRef(() => MatInput), { isSignal: true }]
+		}]
+	}
+});
+function isValidDate(value) {
+	return value instanceof Date && !isNaN(value.getTime());
+}
+function sameParts(a, b, parts) {
+	if (!isValidDate(a) || !isValidDate(b)) return a === b;
+	const bParts = parts(b);
+	return parts(a).every((part, index) => part === bParts[index]);
+}
+var DynamicForm = class DynamicForm {
+	metaInfo = input.required(...ngDevMode ? [{ debugName: "metaInfo" }] : /* istanbul ignore next */ []);
+	dynamicForm = input.required(...ngDevMode ? [{ debugName: "dynamicForm" }] : /* istanbul ignore next */ []);
+	onFormSubmit = output();
+	onFormClear = output();
+	handleSubmit() {
+		if (this.dynamicForm()().valid()) this.onFormSubmit.emit();
+	}
+	clearForm() {
+		this.onFormClear.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.0",
+		ngImport: i0,
+		type: DynamicForm,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.0",
+		type: DynamicForm,
+		isStandalone: true,
+		selector: "app-dynamic-form",
+		inputs: {
+			metaInfo: {
+				classPropertyName: "metaInfo",
+				publicName: "metaInfo",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			dynamicForm: {
+				classPropertyName: "dynamicForm",
+				publicName: "dynamicForm",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			onFormSubmit: "onFormSubmit",
+			onFormClear: "onFormClear"
+		},
+		ngImport: i0,
+		template: "<div class=\"dynamic-form-container\">\r\n  @for (fieldDef of metaInfo(); track fieldDef.name) {\r\n    @let field = $any(dynamicForm())[fieldDef.name];\r\n\r\n    @if (!fieldDef.hidden) {\r\n      <div class=\"dynamic-form-field\" [style.--field-max-width]=\"fieldDef.maxWidth\">\r\n        @switch (fieldDef.type) {\r\n          @case ('text') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('email') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('password') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('search') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('number') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('textarea') {\r\n            <app-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('code') {\r\n            <app-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('checkbox') {\r\n            <app-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('radio') {\r\n            <app-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('select') {\r\n            <app-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('range') {\r\n            <app-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('business-date') {\r\n            <app-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('business-time') {\r\n            <app-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('instant-date-time') {\r\n            <app-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <div class=\"dynamic-form-actions-container\">\r\n    <button mat-flat-button\r\n            [disabled]=\"dynamicForm()().invalid()\"\r\n            (click)=\"handleSubmit()\">Save\r\n    </button>\r\n    <button matButton=\"outlined\" (click)=\"clearForm()\">Clear</button>\r\n  </div>\r\n</div>\r\n",
+		styles: [".dynamic-form-container{padding:2rem 3rem;display:flex;flex-direction:column;align-items:center;width:100%;gap:16px;box-sizing:border-box}.dynamic-form-field{display:flex;flex-direction:column;max-width:var(--field-max-width, 400px);width:100%;margin:0 auto;font-family:Roboto,Helvetica Neue,sans-serif}.dynamic-form-actions-container{display:flex;gap:20px}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: MatButton,
+				selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ",
+				inputs: ["matButton"],
+				exportAs: ["matButton", "matAnchor"]
+			},
+			{
+				kind: "component",
+				type: TextField,
+				selector: "app-text-field",
+				inputs: ["fieldDef", "field"]
+			},
+			{
+				kind: "component",
+				type: TextareaField,
+				selector: "app-textarea-field",
+				inputs: ["fieldDef", "field"]
+			},
+			{
+				kind: "component",
+				type: CheckboxField,
+				selector: "app-checkbox-field",
+				inputs: ["fieldDef", "field"]
+			},
+			{
+				kind: "component",
+				type: RadioField,
+				selector: "app-radio-field",
+				inputs: ["fieldDef", "field"]
+			},
+			{
+				kind: "component",
+				type: SelectField,
+				selector: "app-select-field",
+				inputs: ["fieldDef", "field"]
+			},
+			{
+				kind: "component",
+				type: SliderField,
+				selector: "app-slider-field",
+				inputs: ["fieldDef", "field"]
+			},
+			{
+				kind: "component",
+				type: BusinessDateField,
+				selector: "app-business-date-field",
+				inputs: ["fieldDef", "field"]
+			},
+			{
+				kind: "component",
+				type: BusinessTimeField,
+				selector: "app-business-time-field",
+				inputs: ["fieldDef", "field"]
+			},
+			{
+				kind: "component",
+				type: InstantDateTimeField,
+				selector: "app-instant-date-time-field",
+				inputs: ["fieldDef", "field"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: DynamicForm,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "app-dynamic-form",
+			standalone: true,
+			imports: [
+				MatButton,
+				TextField,
+				TextareaField,
+				CheckboxField,
+				RadioField,
+				SelectField,
+				SliderField,
+				BusinessDateField,
+				BusinessTimeField,
+				InstantDateTimeField
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"dynamic-form-container\">\r\n  @for (fieldDef of metaInfo(); track fieldDef.name) {\r\n    @let field = $any(dynamicForm())[fieldDef.name];\r\n\r\n    @if (!fieldDef.hidden) {\r\n      <div class=\"dynamic-form-field\" [style.--field-max-width]=\"fieldDef.maxWidth\">\r\n        @switch (fieldDef.type) {\r\n          @case ('text') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('email') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('password') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('search') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('number') {\r\n            <app-text-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('textarea') {\r\n            <app-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('code') {\r\n            <app-textarea-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('checkbox') {\r\n            <app-checkbox-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('radio') {\r\n            <app-radio-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('select') {\r\n            <app-select-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('range') {\r\n            <app-slider-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('business-date') {\r\n            <app-business-date-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('business-time') {\r\n            <app-business-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n          @case ('instant-date-time') {\r\n            <app-instant-date-time-field [fieldDef]=\"fieldDef\" [field]=\"field\" />\r\n          }\r\n        }\r\n      </div>\r\n    }\r\n  }\r\n\r\n  <div class=\"dynamic-form-actions-container\">\r\n    <button mat-flat-button\r\n            [disabled]=\"dynamicForm()().invalid()\"\r\n            (click)=\"handleSubmit()\">Save\r\n    </button>\r\n    <button matButton=\"outlined\" (click)=\"clearForm()\">Clear</button>\r\n  </div>\r\n</div>\r\n",
+			styles: [".dynamic-form-container{padding:2rem 3rem;display:flex;flex-direction:column;align-items:center;width:100%;gap:16px;box-sizing:border-box}.dynamic-form-field{display:flex;flex-direction:column;max-width:var(--field-max-width, 400px);width:100%;margin:0 auto;font-family:Roboto,Helvetica Neue,sans-serif}.dynamic-form-actions-container{display:flex;gap:20px}\n"]
+		}]
+	}],
+	propDecorators: {
+		metaInfo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "metaInfo",
+				required: true
+			}]
+		}],
+		dynamicForm: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dynamicForm",
+				required: true
+			}]
+		}],
+		onFormSubmit: [{
+			type: i0.Output,
+			args: ["onFormSubmit"]
+		}],
+		onFormClear: [{
+			type: i0.Output,
+			args: ["onFormClear"]
+		}]
+	}
+});
+function defineSchema(config) {
+	return config;
+}
+function createEmptyEntity(schemaType, defaults) {
+	return {
+		id: "",
+		schemaType,
+		...defaults
+	};
+}
+function toSchema(meta) {
+	return schema((path) => {
+		for (const fieldDef of meta) {
+			const fieldPath = path[fieldDef.name];
+			if (!fieldPath) continue;
+			if (fieldDef.disabled) disabled(fieldPath);
+			if (fieldDef.required) required(fieldPath, { message: `${fieldDef.label} is required` });
+			if (typeof fieldDef.minLength !== "undefined") minLength(fieldPath, fieldDef.minLength, { message: `${fieldDef.label} must be at least ${fieldDef.minLength} characters` });
+			if (typeof fieldDef.maxLength !== "undefined") maxLength(fieldPath, fieldDef.maxLength, { message: `${fieldDef.label} cannot exceed ${fieldDef.maxLength} characters` });
+			if (fieldDef.type === FormFieldType.EMAIL) email(fieldPath, { message: `${fieldDef.label} must be a valid email address` });
+			if (typeof fieldDef.pattern !== "undefined") pattern(fieldPath, toRegExp(fieldDef.pattern), { message: fieldDef.patternMessage ?? `${fieldDef.label} is not in the expected format` });
+			if (typeof fieldDef.min !== "undefined") min(fieldPath, fieldDef.min, { message: `${fieldDef.label} must be at least ${fieldDef.min}` });
+			if (typeof fieldDef.max !== "undefined") max(fieldPath, fieldDef.max, { message: `${fieldDef.label} cannot exceed ${fieldDef.max}` });
+			if (isDateTimeField(fieldDef.type)) validate(fieldPath, (ctx) => dateTimeError(ctx.value(), fieldDef));
+		}
+	});
+}
+function toRegExp(value) {
+	return value instanceof RegExp ? value : new RegExp(`^(?:${value})$`);
+}
+var FormConfigBuilder = class {
+	schemaType;
+	fieldDefs = [];
+	constructor(schemaType) {
+		this.schemaType = schemaType;
+	}
+	text(name, label, options) {
+		return this.add(FormFieldType.TEXT, name, label, options);
+	}
+	email(name, label, options) {
+		return this.add(FormFieldType.EMAIL, name, label, options);
+	}
+	password(name, label, options) {
+		return this.add(FormFieldType.PASSWORD, name, label, options);
+	}
+	search(name, label, options) {
+		return this.add(FormFieldType.SEARCH, name, label, options);
+	}
+	number(name, label, options) {
+		return this.add(FormFieldType.NUMBER, name, label, options);
+	}
+	textarea(name, label, options) {
+		return this.add(FormFieldType.TEXTAREA, name, label, options);
+	}
+	code(name, label, options) {
+		return this.add(FormFieldType.CODE, name, label, options);
+	}
+	checkbox(name, label, options) {
+		return this.add(FormFieldType.CHECKBOX, name, label, options);
+	}
+	range(name, label, options) {
+		return this.add(FormFieldType.RANGE, name, label, options);
+	}
+	radio(name, label, choices, options) {
+		return this.add(FormFieldType.RADIO, name, label, {
+			...options,
+			options: choices
+		});
+	}
+	select(name, label, choices, options) {
+		return this.add(FormFieldType.SELECT, name, label, {
+			...options,
+			options: choices
+		});
+	}
+	businessDate(name, label, options) {
+		return this.add(FormFieldType.BUSINESS_DATE, name, label, options);
+	}
+	businessTime(name, label, options) {
+		return this.add(FormFieldType.BUSINESS_TIME, name, label, options);
+	}
+	instantDateTime(name, label, options) {
+		return this.add(FormFieldType.INSTANT_DATE_TIME, name, label, options);
+	}
+	hidden(name, options) {
+		return this.add(FormFieldType.TEXT, name, name, {
+			...options,
+			hidden: true
+		});
+	}
+	fields() {
+		return [...this.fieldDefs];
+	}
+	build(initialValue) {
+		return {
+			schemaType: this.schemaType,
+			fields: this.fields(),
+			initialValue: createEmptyEntity(this.schemaType, initialValue)
+		};
+	}
+	add(type, name, label, options) {
+		this.fieldDefs.push({
+			...options,
+			name,
+			type,
+			label
+		});
+		return this;
+	}
+};
+function formConfig(schemaType) {
+	return new FormConfigBuilder(schemaType);
+}
+export { BusinessDateField, BusinessTimeField, CheckboxField, DynamicForm, FormConfigBuilder, FormFieldType, InstantDateTimeField, RadioField, SelectField, SliderField, TextField, TextareaField, ZonedDateTimeService, createEmptyEntity, defineSchema, formConfig, toSchema };
+
+//# sourceMappingURL=wiltech-labs-ngx-forms.mjs.map