@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-field.mjs

@@ -0,0 +1,583 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, InjectionToken, ViewEncapsulation, booleanAttribute, computed, inject, input, signal } from "@angular/core";
+import { VdIcon } from "@vadem/ui/icon";
+import { NgControl, Validators } from "@angular/forms";
+import { FormField } from "@angular/forms/signals";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+var VdChoice = class VdChoice {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdChoice,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: VdChoice,
+		isStandalone: true,
+		selector: "label[vdChoice]",
+		host: { classAttribute: "vd-choice" },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdChoice,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "label[vdChoice]",
+			host: { class: "vd-choice" }
+		}]
+	}]
+});
+const VD_FIELD = new InjectionToken("VD_FIELD");
+let nextId = 0;
+function vdUniqueId(prefix) {
+	return `${prefix}-${nextId++}`;
+}
+var VdField = class VdField {
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	hint = input(...ngDevMode ? [void 0, { debugName: "hint" }] : /* istanbul ignore next */ []);
+	descriptionIds = input(...ngDevMode ? [void 0, { debugName: "descriptionIds" }] : /* istanbul ignore next */ []);
+	error = input(...ngDevMode ? [void 0, { debugName: "error" }] : /* istanbul ignore next */ []);
+	control = signal(null, ...ngDevMode ? [{ debugName: "control" }] : /* istanbul ignore next */ []);
+	hintId = vdUniqueId("vd-field-hint");
+	errorId = vdUniqueId("vd-field-error");
+	showError = computed(() => !!this.error() && !!this.control()?.invalid(), ...ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		const ids = [this.showError() ? this.errorId : this.hint() ? this.hintId : "", this.descriptionIds() ?? ""].join(" ").split(/\s+/).filter(Boolean);
+		return [...new Set(ids)].join(" ") || null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	register(control) {
+		this.control.set(control);
+	}
+	unregister(control) {
+		if (this.control() === control) this.control.set(null);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdField,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdField,
+		isStandalone: true,
+		selector: "vd-field",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			descriptionIds: {
+				classPropertyName: "descriptionIds",
+				publicName: "descriptionIds",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-invalid": "showError() ? \"\" : null",
+				"attr.data-disabled": "control()?.disabled() ? \"\" : null"
+			},
+			classAttribute: "vd-field"
+		},
+		providers: [{
+			provide: VD_FIELD,
+			useExisting: VdField
+		}],
+		ngImport: i0,
+		template: `
+    @if (label()) {
+      <label class="vd-field__label" [attr.for]="control()?.id()">
+        {{ label() }}
+        @if (control()?.required()) {
+          <span class="vd-field__required" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+    <ng-content />
+    @if (showError()) {
+      <p class="vd-field__error" [id]="errorId">
+        <vd-icon name="alert-circle" />
+        <span>{{ error() }}</span>
+      </p>
+    } @else if (hint()) {
+      <p class="vd-field__hint" [id]="hintId">{{ hint() }}</p>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdField,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-field",
+			imports: [VdIcon],
+			template: `
+    @if (label()) {
+      <label class="vd-field__label" [attr.for]="control()?.id()">
+        {{ label() }}
+        @if (control()?.required()) {
+          <span class="vd-field__required" aria-hidden="true">*</span>
+        }
+      </label>
+    }
+    <ng-content />
+    @if (showError()) {
+      <p class="vd-field__error" [id]="errorId">
+        <vd-icon name="alert-circle" />
+        <span>{{ error() }}</span>
+      </p>
+    } @else if (hint()) {
+      <p class="vd-field__hint" [id]="hintId">{{ hint() }}</p>
+    }
+  `,
+			host: {
+				class: "vd-field",
+				"[attr.data-invalid]": "showError() ? \"\" : null",
+				"[attr.data-disabled]": "control()?.disabled() ? \"\" : null"
+			},
+			providers: [{
+				provide: VD_FIELD,
+				useExisting: VdField
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		descriptionIds: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "descriptionIds",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}]
+	}
+});
+var VdFieldset = class VdFieldset {
+	legend = input(...ngDevMode ? [void 0, { debugName: "legend" }] : /* istanbul ignore next */ []);
+	hint = input(...ngDevMode ? [void 0, { debugName: "hint" }] : /* istanbul ignore next */ []);
+	error = input(...ngDevMode ? [void 0, { debugName: "error" }] : /* istanbul ignore next */ []);
+	orientation = input("vertical", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	controls = signal([], ...ngDevMode ? [{ debugName: "controls" }] : /* istanbul ignore next */ []);
+	hintId = vdUniqueId("vd-fieldset-hint");
+	errorId = vdUniqueId("vd-fieldset-error");
+	required = computed(() => this.controls().some((c) => c.required()), ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	showError = computed(() => !!this.error() && this.controls().some((c) => c.invalid()), ...ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []);
+	groupDescribedBy = computed(() => [this.hint() ? this.hintId : null, this.showError() ? this.errorId : null].filter(Boolean).join(" ") || null, ...ngDevMode ? [{ debugName: "groupDescribedBy" }] : /* istanbul ignore next */ []);
+	describedBy = signal(null).asReadonly();
+	register(control) {
+		this.controls.update((list) => [...list, control]);
+	}
+	unregister(control) {
+		this.controls.update((list) => list.filter((c) => c !== control));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdFieldset,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdFieldset,
+		isStandalone: true,
+		selector: "fieldset[vdFieldset]",
+		inputs: {
+			legend: {
+				classPropertyName: "legend",
+				publicName: "legend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			properties: {
+				"attr.data-orientation": "orientation()",
+				"attr.data-invalid": "showError() ? \"\" : null",
+				"attr.aria-describedby": "groupDescribedBy()"
+			},
+			classAttribute: "vd-fieldset"
+		},
+		providers: [{
+			provide: VD_FIELD,
+			useExisting: VdFieldset
+		}],
+		ngImport: i0,
+		template: `
+    @if (legend()) {
+      <legend class="vd-fieldset__legend">
+        {{ legend() }}
+        @if (required()) {
+          <span class="vd-field__required" aria-hidden="true">*</span>
+        }
+      </legend>
+    }
+    @if (hint()) {
+      <p class="vd-field__hint" [id]="hintId">{{ hint() }}</p>
+    }
+    @if (showError()) {
+      <p class="vd-field__error" [id]="errorId">
+        <vd-icon name="alert-circle" />
+        <span>{{ error() }}</span>
+      </p>
+    }
+    <div class="vd-fieldset__options"><ng-content /></div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdFieldset,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "fieldset[vdFieldset]",
+			imports: [VdIcon],
+			template: `
+    @if (legend()) {
+      <legend class="vd-fieldset__legend">
+        {{ legend() }}
+        @if (required()) {
+          <span class="vd-field__required" aria-hidden="true">*</span>
+        }
+      </legend>
+    }
+    @if (hint()) {
+      <p class="vd-field__hint" [id]="hintId">{{ hint() }}</p>
+    }
+    @if (showError()) {
+      <p class="vd-field__error" [id]="errorId">
+        <vd-icon name="alert-circle" />
+        <span>{{ error() }}</span>
+      </p>
+    }
+    <div class="vd-fieldset__options"><ng-content /></div>
+  `,
+			host: {
+				class: "vd-fieldset",
+				"[attr.data-orientation]": "orientation()",
+				"[attr.data-invalid]": "showError() ? \"\" : null",
+				"[attr.aria-describedby]": "groupDescribedBy()"
+			},
+			providers: [{
+				provide: VD_FIELD,
+				useExisting: VdFieldset
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		legend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "legend",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}]
+	}
+});
+const EMPTY = {
+	invalid: false,
+	touched: false,
+	disabled: false,
+	required: false
+};
+function vdNgControlState(ngControl, destroyRef) {
+	const control = ngControl?.control;
+	const state = signal(EMPTY, ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	if (!control?.events) return state;
+	const sync = () => state.set({
+		invalid: control.invalid,
+		touched: control.touched,
+		disabled: control.disabled,
+		required: control.hasValidator(Validators.required) || control.hasValidator(Validators.requiredTrue)
+	});
+	sync();
+	control.events.pipe(takeUntilDestroyed(destroyRef)).subscribe(sync);
+	return state;
+}
+var VdFieldControlBase = class VdFieldControlBase {
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(void 0, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	id = input(vdUniqueId("vd-control"), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	field = inject(VD_FIELD, { optional: true });
+	ngControl = inject(NgControl, {
+		self: true,
+		optional: true
+	});
+	formField = inject(FormField, {
+		self: true,
+		optional: true
+	});
+	destroyRef = inject(DestroyRef);
+	ngSource = signal(null, ...ngDevMode ? [{ debugName: "ngSource" }] : /* istanbul ignore next */ []);
+	ngState = computed(() => this.ngSource()?.() ?? {
+		invalid: false,
+		touched: false,
+		disabled: false,
+		required: false
+	}, ...ngDevMode ? [{ debugName: "ngState" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => {
+		if (this.invalid() && this.touched() !== false) return true;
+		const ng = this.ngState();
+		return ng.invalid && ng.touched;
+	}, ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	fieldControl = {
+		id: this.id,
+		invalid: this.showInvalid,
+		required: computed(() => this.required() || this.ngState().required || !!this.formField?.state().required()),
+		disabled: computed(() => this.ngState().disabled || !!this.formField?.state().disabled())
+	};
+	constructor() {
+		this.field?.register(this.fieldControl);
+		this.destroyRef.onDestroy(() => this.field?.unregister(this.fieldControl));
+	}
+	ngOnInit() {
+		if (!this.formField) this.ngSource.set(vdNgControlState(this.ngControl, this.destroyRef));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdFieldControlBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdFieldControlBase,
+		isStandalone: true,
+		inputs: {
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			id: {
+				classPropertyName: "id",
+				publicName: "id",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"id": "id()",
+			"attr.data-invalid": "showInvalid() ? \"\" : null",
+			"attr.aria-invalid": "showInvalid() ? \"true\" : null",
+			"attr.aria-describedby": "field?.describedBy() ?? null",
+			"attr.required": "required() ? \"\" : null"
+		} },
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdFieldControlBase,
+	decorators: [{
+		type: Directive,
+		args: [{ host: {
+			"[id]": "id()",
+			"[attr.data-invalid]": "showInvalid() ? \"\" : null",
+			"[attr.aria-invalid]": "showInvalid() ? \"true\" : null",
+			"[attr.aria-describedby]": "field?.describedBy() ?? null",
+			"[attr.required]": "required() ? \"\" : null"
+		} }]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		id: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "id",
+				required: false
+			}]
+		}]
+	}
+});
+export { VD_FIELD, VdChoice, VdField, VdFieldControlBase, VdFieldset, vdNgControlState, vdUniqueId };
+
+//# sourceMappingURL=vadem-ui-field.mjs.map

package/fesm2022/vadem-ui-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vadem-ui-field.mjs","names":[],"sources":["../../../projects/ui/field/src/choice.ts","../../../projects/ui/field/src/field-control.ts","../../../projects/ui/field/src/field.ts","../../../projects/ui/field/src/fieldset.ts","../../../projects/ui/field/src/ng-control-state.ts","../../../projects/ui/field/src/field-control-base.ts"],"sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Label that wraps a checkbox, switch or radio and its text. The whole label is the hit area;\n * the text is the control's accessible name. Spec: specs/checkbox.md\n */\n@Directive({\n  selector: 'label[vdChoice]',\n  host: { class: 'vd-choice' },\n})\nexport class VdChoice {}\n","import { InjectionToken, Signal } from '@angular/core';\n\n/** What a form control exposes to its surrounding `vd-field`. */\nexport interface VdFieldControl {\n  readonly id: Signal<string>;\n  readonly invalid: Signal<boolean>;\n  readonly required: Signal<boolean>;\n  readonly disabled: Signal<boolean>;\n}\n\n/** What `vd-field` exposes to the control inside it. */\nexport interface VdFieldContext {\n  /** Space-separated ids for `aria-describedby` (hint or error), or null. */\n  readonly describedBy: Signal<string | null>;\n  register(control: VdFieldControl): void;\n  unregister(control: VdFieldControl): void;\n}\n\nexport const VD_FIELD = new InjectionToken<VdFieldContext>('VD_FIELD');\n\nlet nextId = 0;\n/** Deterministic per-app id. Same creation order on server and client keeps hydration stable. */\nexport function vdUniqueId(prefix: string): string {\n  return `${prefix}-${nextId++}`;\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n  signal,\n} from '@angular/core';\nimport { VdIcon } from '@vadem/ui/icon';\nimport { VD_FIELD, VdFieldContext, VdFieldControl, vdUniqueId } from './field-control';\n\n/**\n * Label, hint and error around one form control. Wires `for`, `aria-describedby`,\n * and the required marker automatically. Spec: specs/field.md\n */\n@Component({\n  selector: 'vd-field',\n  imports: [VdIcon],\n  template: `\n    @if (label()) {\n      <label class=\"vd-field__label\" [attr.for]=\"control()?.id()\">\n        {{ label() }}\n        @if (control()?.required()) {\n          <span class=\"vd-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </label>\n    }\n    <ng-content />\n    @if (showError()) {\n      <p class=\"vd-field__error\" [id]=\"errorId\">\n        <vd-icon name=\"alert-circle\" />\n        <span>{{ error() }}</span>\n      </p>\n    } @else if (hint()) {\n      <p class=\"vd-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n    }\n  `,\n  host: {\n    class: 'vd-field',\n    '[attr.data-invalid]': 'showError() ? \"\" : null',\n    '[attr.data-disabled]': 'control()?.disabled() ? \"\" : null',\n  },\n  providers: [{ provide: VD_FIELD, useExisting: VdField }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdField implements VdFieldContext {\n  readonly label = input<string>();\n  readonly hint = input<string>();\n  /** Additional descriptive IDs, e.g. a character counter; retained beside hint/error. */\n  readonly descriptionIds = input<string>();\n  /** Message shown while the control is invalid. Replaces the hint. */\n  readonly error = input<string>();\n\n  protected readonly control = signal<VdFieldControl | null>(null);\n  protected readonly hintId = vdUniqueId('vd-field-hint');\n  protected readonly errorId = vdUniqueId('vd-field-error');\n\n  protected readonly showError = computed(() => !!this.error() && !!this.control()?.invalid());\n\n  readonly describedBy = computed(() => {\n    const primary = this.showError() ? this.errorId : this.hint() ? this.hintId : '';\n    const ids = [primary, this.descriptionIds() ?? ''].join(' ').split(/\\s+/).filter(Boolean);\n    return [...new Set(ids)].join(' ') || null;\n  });\n\n  register(control: VdFieldControl): void {\n    this.control.set(control);\n  }\n\n  unregister(control: VdFieldControl): void {\n    if (this.control() === control) this.control.set(null);\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n  signal,\n} from '@angular/core';\nimport { VdIcon } from '@vadem/ui/icon';\nimport { VD_FIELD, VdFieldContext, VdFieldControl, vdUniqueId } from './field-control';\n\nexport type VdFieldsetOrientation = 'vertical' | 'horizontal';\n\n/**\n * Legend, hint and error around a group of choices (radios, checkboxes). The group is named by\n * the legend; hint and error describe the fieldset itself, so they are announced once when the\n * group is entered, not on every option. Spec: specs/field.md\n */\n@Component({\n  // Attribute selector: the native fieldset keeps its group semantics.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'fieldset[vdFieldset]',\n  imports: [VdIcon],\n  template: `\n    @if (legend()) {\n      <legend class=\"vd-fieldset__legend\">\n        {{ legend() }}\n        @if (required()) {\n          <span class=\"vd-field__required\" aria-hidden=\"true\">*</span>\n        }\n      </legend>\n    }\n    @if (hint()) {\n      <p class=\"vd-field__hint\" [id]=\"hintId\">{{ hint() }}</p>\n    }\n    @if (showError()) {\n      <p class=\"vd-field__error\" [id]=\"errorId\">\n        <vd-icon name=\"alert-circle\" />\n        <span>{{ error() }}</span>\n      </p>\n    }\n    <div class=\"vd-fieldset__options\"><ng-content /></div>\n  `,\n  host: {\n    class: 'vd-fieldset',\n    '[attr.data-orientation]': 'orientation()',\n    '[attr.data-invalid]': 'showError() ? \"\" : null',\n    '[attr.aria-describedby]': 'groupDescribedBy()',\n  },\n  providers: [{ provide: VD_FIELD, useExisting: VdFieldset }],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class VdFieldset implements VdFieldContext {\n  readonly legend = input<string>();\n  readonly hint = input<string>();\n  /** Shown while any control in the group is displayed invalid. */\n  readonly error = input<string>();\n  readonly orientation = input<VdFieldsetOrientation>('vertical');\n\n  protected readonly controls = signal<readonly VdFieldControl[]>([]);\n  protected readonly hintId = vdUniqueId('vd-fieldset-hint');\n  protected readonly errorId = vdUniqueId('vd-fieldset-error');\n\n  protected readonly required = computed(() => this.controls().some((c) => c.required()));\n  protected readonly showError = computed(\n    () => !!this.error() && this.controls().some((c) => c.invalid()),\n  );\n  protected readonly groupDescribedBy = computed(\n    () =>\n      [this.hint() ? this.hintId : null, this.showError() ? this.errorId : null]\n        .filter(Boolean)\n        .join(' ') || null,\n  );\n\n  /** Controls aren't described individually: the fieldset carries the description. */\n  readonly describedBy = signal<string | null>(null).asReadonly();\n\n  register(control: VdFieldControl): void {\n    this.controls.update((list) => [...list, control]);\n  }\n\n  unregister(control: VdFieldControl): void {\n    this.controls.update((list) => list.filter((c) => c !== control));\n  }\n}\n","import { DestroyRef, Signal, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgControl, Validators } from '@angular/forms';\n\nexport interface VdNgControlState {\n  invalid: boolean;\n  touched: boolean;\n  disabled: boolean;\n  required: boolean;\n}\n\nconst EMPTY: VdNgControlState = {\n  invalid: false,\n  touched: false,\n  disabled: false,\n  required: false,\n};\n\n/**\n * Mirrors a Reactive/Template forms control into a signal (NgControl isn't signal-based).\n * Call once the control is resolved (ngOnInit or later). Returns a static empty state when\n * there's no control or it's a Signal Forms shim without `events`.\n */\nexport function vdNgControlState(\n  ngControl: NgControl | null,\n  destroyRef: DestroyRef,\n): Signal<VdNgControlState> {\n  const control = ngControl?.control;\n  const state = signal(EMPTY);\n  if (!control?.events) return state;\n  const sync = () =>\n    state.set({\n      invalid: control.invalid,\n      touched: control.touched,\n      disabled: control.disabled,\n      required:\n        control.hasValidator(Validators.required) || control.hasValidator(Validators.requiredTrue),\n    });\n  sync();\n  control.events.pipe(takeUntilDestroyed(destroyRef)).subscribe(sync);\n  return state;\n}\n","import {\n  DestroyRef,\n  Directive,\n  OnInit,\n  Signal,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { FormField } from '@angular/forms/signals';\nimport { VD_FIELD, VdFieldControl, vdUniqueId } from './field-control';\nimport { VdNgControlState, vdNgControlState } from './ng-control-state';\n\n/**\n * Shared behavior for controls on native form elements (input, checkbox, switch):\n * displayed validity from Reactive/Template forms or Signal Forms, `vd-field` registration,\n * and the ARIA/data attributes that go with it. Not part of the styling contract.\n */\n@Directive({\n  host: {\n    '[id]': 'id()',\n    '[attr.data-invalid]': 'showInvalid() ? \"\" : null',\n    '[attr.aria-invalid]': 'showInvalid() ? \"true\" : null',\n    '[attr.aria-describedby]': 'field?.describedBy() ?? null',\n    '[attr.required]': 'required() ? \"\" : null',\n  },\n})\nexport abstract class VdFieldControlBase implements OnInit {\n  /** Invalid state (e.g. a server error). Reactive/Template form validity is detected on its own. */\n  readonly invalid = input(false, { transform: booleanAttribute });\n  /**\n   * Optional gate for `invalid`: when explicitly false the error isn't shown yet. Signal Forms\n   * binds `invalid`, `touched` and `required` here automatically (FormUiControl contract).\n   */\n  readonly touched = input<boolean | undefined>(undefined);\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly id = input(vdUniqueId('vd-control'));\n\n  protected readonly field = inject(VD_FIELD, { optional: true });\n  private readonly ngControl = inject(NgControl, { self: true, optional: true });\n  private readonly formField = inject(FormField, { self: true, optional: true });\n  private readonly destroyRef = inject(DestroyRef);\n\n  /** Mirrored Reactive/Template forms state; set once the control is resolved (ngOnInit). */\n  private readonly ngSource = signal<Signal<VdNgControlState> | null>(null);\n  private readonly ngState = computed(\n    () =>\n      this.ngSource()?.() ?? { invalid: false, touched: false, disabled: false, required: false },\n  );\n\n  /** Invalid as displayed: forced, or form-invalid after the user has touched the control. */\n  readonly showInvalid = computed(() => {\n    if (this.invalid() && this.touched() !== false) return true;\n    const ng = this.ngState();\n    return ng.invalid && ng.touched;\n  });\n\n  private readonly fieldControl: VdFieldControl = {\n    id: this.id,\n    invalid: this.showInvalid,\n    required: computed(\n      () => this.required() || this.ngState().required || !!this.formField?.state().required(),\n    ),\n    disabled: computed(() => this.ngState().disabled || !!this.formField?.state().disabled()),\n  };\n\n  constructor() {\n    this.field?.register(this.fieldControl);\n    this.destroyRef.onDestroy(() => this.field?.unregister(this.fieldControl));\n  }\n\n  ngOnInit(): void {\n    // NgControl resolves its control only after init. Signal Forms provides an NgControl shim\n    // too; its state arrives through the inputs instead.\n    if (!this.formField) this.ngSource.set(vdNgControlState(this.ngControl, this.destroyRef));\n  }\n}\n"],"mappings":"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"}