@zhunam/form-builder 1.0.0

package/README.md

@@ -0,0 +1,82 @@
+# @zhunam/form-builder
+
+A declarative Angular form renderer — reactive validation, cross-field
+checks, and server error handling from a plain config array, no CSS
+framework dependency, no runtime dependencies beyond Angular itself.
+
+## Installation
+
+```bash
+npm install @zhunam/form-builder
+```
+
+## Usage
+
+```typescript
+import { FormBuilder, FieldConfig } from '@zhunam/form-builder';
+
+interface User { name: string; email: string; }
+const fields: FieldConfig<User>[] = [
+  { key: 'name', label: 'Name', type: 'text', validators: { required: true } },
+  { key: 'email', label: 'Email', type: 'email', validators: { required: true, email: true } },
+];
+```
+
+```html
+<lib-form-builder [fields]="fields" (formSubmit)="onSubmit($event)" />
+```
+
+## API
+
+### `FormBuilder<T>`
+
+| Name                  | Type                                        | Default      | Description                                                                          |
+| --------------------- | -------------------------------------------- | ------------ | ------------------------------------------------------------------------------------- |
+| `fields`               | `input.required<FieldConfig<T>[]>`           | — (required) | Declarative configuration of the fields to render, in display order.                 |
+| `crossFieldValidators` | `input<CrossFieldValidator<T>[]>`            | `[]`         | Form-level validators that check values across multiple fields (e.g. confirming a password). |
+| `columns`              | `input<number>`                              | `1`          | Number of grid columns fields are laid out in on desktop; always collapses to 1 column on mobile. |
+| `serverErrors`         | `input<Partial<Record<keyof T, string>>>`    | `{}`         | Errors returned by the backend after a submit, keyed by field; auto-clears once the user edits that field. |
+| `formSubmit`           | `output<T>`                                  | —            | Emitted with the typed form values, only when the native form and every `crossFieldValidators` check pass. |
+
+### `FieldConfig<T>`
+
+| Property      | Type                   | Default      | Description                                                                 |
+| ------------- | ---------------------- | ------------ | ---------------------------------------------------------------------------- |
+| `key`         | `keyof T`               | — (required) | Property of `T` this field reads and writes its value from.                 |
+| `label`       | `string`                | — (required) | Text displayed as the field's label.                                        |
+| `type`        | `FieldType`             | — (required) | Input type this field renders as: `text`, `number`, `email`, `password`, `textarea`, `select`, `radio`, `checkbox`, or `date`. |
+| `placeholder` | `string`                | —            | Placeholder text shown when the field is empty.                             |
+| `options`     | `FieldOption[]`         | —            | Choices available for `select` and `radio` fields.                          |
+| `validators`  | `FieldValidatorConfig`  | —            | Native Angular validation rules for this field: `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `email`, plus optional custom `errorMessages`. |
+| `defaultValue`| `T[keyof T]`            | —            | Initial value assigned to the field before user interaction.                |
+| `colSpan`     | `1 \| 2`                | `1`          | How many grid columns this field spans, when the component's `columns` input is 2 or more. |
+| `disabled`    | `boolean`               | `false`      | Renders the control disabled from the start; still included in the value `formSubmit` emits. |
+
+## Compatibility
+
+`@angular/core` and `@angular/forms` `^20.0.0 || ^21.0.0 || ^22.0.0`.
+
+## Why this one
+
+- Declarative validation, per-field and cross-field (e.g. confirming a
+  password), without ever exposing Angular's `ValidatorFn` or
+  `AbstractControl` in the public API.
+- Heuristic ReDoS protection on validation `pattern`s, with dedicated
+  tests — a catastrophic-backtracking regex in your config throws
+  instead of hanging the browser.
+- Sanitization guaranteed by interpolation, never `innerHTML` — safe to
+  render even if your field config ends up sourced from outside your
+  own codebase.
+- Accessible by default: `aria-invalid`/`aria-describedby` stay in sync
+  with whichever error message is actually visible, and radio groups
+  get a correctly labelled `radiogroup` role.
+- Server-side error handling with automatic clearing — show a backend
+  rejection per field with one input, no manual cleanup wiring.
+
+## License
+
+MIT
+
+---
+
+Built by Ariana Mora — [LinkedIn](https://www.linkedin.com/in/ariana-andreina-mora) · [GitHub](https://github.com/zhunam)

package/fesm2022/zhunam-form-builder.mjs

@@ -0,0 +1,342 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+
+const MAX_PATTERN_LENGTH = 300;
+/** Matches a group that repeats another quantifier, e.g. `(x+)+`, `(x*)*`. */
+const NESTED_QUANTIFIER = /\([^()]*[+*][^()]*\)[+*]/;
+/** Matches a repeated group so its alternated branches can be compared. */
+const REPEATED_GROUP = /\(([^()]*)\)[+*]/g;
+/**
+ * Validates that a regex `pattern` string is safe enough to compile into
+ * a `RegExp` for form validation.
+ *
+ * This is a heuristic, not a mathematical guarantee of ReDoS-safety: it
+ * rejects the pattern shapes most commonly responsible for catastrophic
+ * backtracking (nested quantifiers, overlapping alternation inside a
+ * repeated group) and enforces a length cap, but a maliciously crafted
+ * pattern could still slip through undetected. Never accept `pattern`
+ * values from a fully untrusted source without your own review.
+ *
+ * @throws {Error} If `pattern` is longer than 300 characters, or matches
+ * a known catastrophic-backtracking shape.
+ */
+function assertSafePattern(pattern) {
+    if (pattern.length > MAX_PATTERN_LENGTH) {
+        throw new Error(`Unsafe regex pattern: exceeds the ${MAX_PATTERN_LENGTH}-character limit.`);
+    }
+    if (NESTED_QUANTIFIER.test(pattern)) {
+        throw new Error('Unsafe regex pattern: nested quantifiers detected (e.g. (x+)+), a known catastrophic-backtracking shape.');
+    }
+    if (hasOverlappingAlternation(pattern)) {
+        throw new Error('Unsafe regex pattern: overlapping alternation inside a repeated group detected (e.g. (a|a)+), a known catastrophic-backtracking shape.');
+    }
+}
+function hasOverlappingAlternation(pattern) {
+    const repeatedGroup = new RegExp(REPEATED_GROUP);
+    let match;
+    while ((match = repeatedGroup.exec(pattern)) !== null) {
+        const branches = match[1].split('|');
+        for (let i = 0; i < branches.length; i++) {
+            for (let j = i + 1; j < branches.length; j++) {
+                if (branchesOverlap(branches[i], branches[j])) {
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+}
+function branchesOverlap(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b)
+        return false;
+    return a.startsWith(b) || b.startsWith(a);
+}
+
+// NUNCA usar [innerHTML], bypassSecurityTrustHtml, ni ningún mecanismo de inserción de HTML crudo en el DOM del componente.
+// label, placeholder, errorMessages, y FieldOption.label se renderizan siempre con interpolación {{ }} normal de Angular — nunca vía binding de propiedad que inserte HTML.
+// Angular's built-in validators report `minlength`/`maxlength` (all lowercase)
+// on `control.errors`, not the camelCase keys `FieldValidatorConfig.errorMessages`
+// uses — this bridges the two so consumer-facing config can stay camelCase.
+const RAW_ERROR_KEY_MAP = {
+    required: 'required',
+    min: 'min',
+    max: 'max',
+    minlength: 'minLength',
+    maxlength: 'maxLength',
+    pattern: 'pattern',
+    email: 'email',
+};
+const DEFAULT_ERROR_MESSAGES = {
+    required: 'Este campo es obligatorio.',
+    min: 'El valor es menor al mínimo permitido.',
+    max: 'El valor supera el máximo permitido.',
+    minLength: 'El valor es demasiado corto.',
+    maxLength: 'El valor es demasiado largo.',
+    pattern: 'El formato no es válido.',
+    email: 'Ingresá un email válido.',
+};
+class FormBuilder {
+    /**
+     * Declarative configuration of the fields to render, in display order.
+     * @example
+     * fields: FieldConfig<User>[] = [
+     *   { key: 'email', label: 'Email', type: 'email', validators: { required: true, email: true } },
+     * ];
+     */
+    fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    /**
+     * Number of grid columns fields are laid out in on desktop. Always
+     * collapses to a single column below a mobile breakpoint, regardless
+     * of this value — mobile-first, like the rest of the library.
+     * @default 1
+     * @example
+     * <lib-form-builder [fields]="fields" [columns]="2" />
+     */
+    columns = input(1, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /**
+     * Form-level validators that check values across multiple fields (e.g.
+     * confirming a password). Run separately from Angular's native
+     * per-control validation, only when the native `FormGroup` is valid.
+     * @default []
+     * @example
+     * crossFieldValidators: CrossFieldValidator<User>[] = [
+     *   {
+     *     validate: (value) =>
+     *       value.password !== value.confirmPassword
+     *         ? { confirmPassword: 'Passwords must match' }
+     *         : null,
+     *   },
+     * ];
+     */
+    crossFieldValidators = input([], ...(ngDevMode ? [{ debugName: "crossFieldValidators" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted with the typed form values, only when both the native
+     * `FormGroup` and every `crossFieldValidators` check pass.
+     * @example
+     * <lib-form-builder [fields]="fields" (formSubmit)="onSubmit($event)" />
+     */
+    formSubmit = output();
+    /**
+     * Errors returned by the backend after a submit attempt (e.g. "email
+     * already registered"), keyed by field. Shown as soon as they're set,
+     * regardless of whether the field has been touched or the form
+     * submitted locally — receiving one implies a submit already
+     * happened. Each message clears itself automatically the moment the
+     * user edits that field again, so there's no need to clear this input
+     * back to `{}` manually after showing it once.
+     * @default {}
+     * @example
+     * // In the consumer's component:
+     * protected readonly serverErrors = signal<Partial<Record<keyof User, string>>>({});
+     *
+     * onFormSubmit(value: User) {
+     *   this.api.register(value).subscribe({
+     *     error: () => this.serverErrors.set({ email: 'This email is already registered.' }),
+     *   });
+     * }
+     * // Template:
+     * <lib-form-builder [fields]="fields" [serverErrors]="serverErrors()" (formSubmit)="onFormSubmit($event)" />
+     */
+    serverErrors = input({}, ...(ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []));
+    submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
+    crossFieldErrors = signal({}, ...(ngDevMode ? [{ debugName: "crossFieldErrors" }] : /* istanbul ignore next */ []));
+    // Snapshot of each server-error field's value at the moment that error
+    // appeared. A server error is only ever about a rejected backend
+    // observation of the exact value the user submitted — the instant the
+    // control's live value no longer matches this snapshot, the message is
+    // stale and `serverErrorFor` stops showing it, without the consumer
+    // having to clear `serverErrors` themselves.
+    serverErrorSnapshot = signal({}, ...(ngDevMode ? [{ debugName: "serverErrorSnapshot" }] : /* istanbul ignore next */ []));
+    // `fields()` can change at runtime (e.g. a wizard swapping steps), so the
+    // FormGroup is derived with `computed()` rather than built once in the
+    // constructor: it's rebuilt only when the `fields()` array reference
+    // changes. `computed()` fits better than an `effect()` here because
+    // building a FormGroup is a pure derivation with no teardown to manage,
+    // and `computed()` already memoizes it — the same instance is returned
+    // across change-detection cycles until `fields()` itself changes.
+    formGroup = computed(() => this.buildFormGroup(this.fields()), ...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+    static instanceCounter = 0;
+    instanceId = ++FormBuilder.instanceCounter;
+    constructor() {
+        // Runs whenever a new `serverErrors()` value comes in and captures
+        // each mentioned field's current value — the baseline `serverErrorFor`
+        // compares against to decide whether that message is still relevant.
+        effect(() => {
+            const errors = this.serverErrors();
+            const group = this.formGroup();
+            const snapshot = {};
+            for (const key of Object.keys(errors)) {
+                snapshot[key] = group.get(String(key))?.value;
+            }
+            this.serverErrorSnapshot.set(snapshot);
+        });
+    }
+    buildFormGroup(fields) {
+        const controls = {};
+        for (const field of fields) {
+            const initialValue = field.defaultValue ?? (field.type === 'checkbox' ? false : null);
+            controls[String(field.key)] = new FormControl({ value: initialValue, disabled: !!field.disabled }, this.buildValidators(field));
+        }
+        return new FormGroup(controls);
+    }
+    buildValidators(field) {
+        const config = field.validators;
+        if (!config) {
+            return [];
+        }
+        const validators = [];
+        if (config.required) {
+            // A checkbox's "empty" value is `false`, which Validators.required
+            // doesn't treat as empty — requiredTrue is the correct check for it.
+            validators.push(field.type === 'checkbox' ? Validators.requiredTrue : Validators.required);
+        }
+        if (config.min !== undefined) {
+            validators.push(Validators.min(config.min));
+        }
+        if (config.max !== undefined) {
+            validators.push(Validators.max(config.max));
+        }
+        if (config.minLength !== undefined) {
+            validators.push(Validators.minLength(config.minLength));
+        }
+        if (config.maxLength !== undefined) {
+            validators.push(Validators.maxLength(config.maxLength));
+        }
+        if (config.pattern !== undefined) {
+            // An unsafe pattern is a bug in the consumer's config, not a runtime
+            // condition to recover from — let it throw instead of swallowing it.
+            assertSafePattern(config.pattern);
+            validators.push(Validators.pattern(config.pattern));
+        }
+        if (config.email) {
+            validators.push(Validators.email);
+        }
+        return validators;
+    }
+    controlFor(field) {
+        return this.formGroup().get(String(field.key));
+    }
+    optionsFor(field) {
+        return field.options ?? [];
+    }
+    // Shared by the label's `for`, the control's `id`, and (for radio groups)
+    // the `name` that keeps this field's radios from being grouped with
+    // another field's — RadioControlValueAccessor matches radios by `name`
+    // plus parent FormGroup, and every field here shares the same FormGroup.
+    fieldId(field) {
+        return `fb-${this.instanceId}-${String(field.key)}`;
+    }
+    errorMessageFor(field) {
+        const control = this.controlFor(field);
+        if (!control.errors || (!control.touched && !this.submitted())) {
+            return null;
+        }
+        const errorKey = RAW_ERROR_KEY_MAP[Object.keys(control.errors)[0]];
+        if (!errorKey) {
+            return null;
+        }
+        return field.validators?.errorMessages?.[errorKey] ?? DEFAULT_ERROR_MESSAGES[errorKey];
+    }
+    serverErrorFor(field) {
+        const message = this.serverErrors()[field.key];
+        if (!message) {
+            return null;
+        }
+        const currentValue = this.controlFor(field).value;
+        const snapshotValue = this.serverErrorSnapshot()[field.key];
+        return currentValue === snapshotValue ? message : null;
+    }
+    crossFieldErrorFor(field) {
+        if (!this.submitted()) {
+            return null;
+        }
+        return this.crossFieldErrors()[String(field.key)] ?? null;
+    }
+    // Single source of truth for "is an error currently shown for this
+    // field, and what does it say" — both the visible `.fb-error` message
+    // and its ARIA wiring (aria-invalid, aria-describedby) read from this,
+    // so the two can never drift out of sync with each other.
+    activeErrorFor(field) {
+        return this.errorMessageFor(field) ?? this.serverErrorFor(field) ?? this.crossFieldErrorFor(field);
+    }
+    errorId(field) {
+        return `${this.fieldId(field)}-error`;
+    }
+    legendId(field) {
+        return `${this.fieldId(field)}-legend`;
+    }
+    isSubmitDisabled() {
+        return this.formGroup().invalid || Object.keys(this.crossFieldErrors()).length > 0;
+    }
+    onSubmit() {
+        this.submitted.set(true);
+        const group = this.formGroup();
+        if (group.invalid) {
+            return;
+        }
+        // `.value` excludes disabled controls entirely — `getRawValue()` keeps
+        // them, so a disabled field with a `defaultValue` still comes through
+        // as a complete `T` instead of a hole in the emitted object.
+        const value = this.coerceNumberFields(group.getRawValue());
+        const errors = this.runCrossFieldValidators(value);
+        this.crossFieldErrors.set(errors);
+        if (Object.keys(errors).length > 0) {
+            return;
+        }
+        this.formSubmit.emit(value);
+    }
+    // Native `<input type="number">` always reports its value as a string
+    // through the DOM. Angular's NumberValueAccessor would normally parse it
+    // for us, but that accessor only activates for a *static* `type="number"`
+    // attribute in the template — this component binds `[type]="field.type"`
+    // dynamically, so it never matches, and DefaultValueAccessor (string in,
+    // string out) handles the control instead. Fixed up here, at the point
+    // the value leaves the component, rather than in how the FormControl
+    // stores it — Validators.min/max already parseFloat internally either
+    // way, so correcting the stored value would change nothing there but
+    // would still need this same conversion for the emitted object.
+    coerceNumberFields(rawValue) {
+        const value = { ...rawValue };
+        for (const field of this.fields()) {
+            if (field.type !== 'number') {
+                continue;
+            }
+            const key = String(field.key);
+            const current = value[key];
+            if (current === '' || current === null || current === undefined) {
+                value[key] = null;
+            }
+            else if (typeof current === 'string') {
+                value[key] = Number(current);
+            }
+        }
+        return value;
+    }
+    runCrossFieldValidators(value) {
+        const errors = {};
+        for (const validator of this.crossFieldValidators()) {
+            const result = validator.validate(value);
+            if (result) {
+                Object.assign(errors, result);
+            }
+        }
+        return errors;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FormBuilder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: FormBuilder, isStandalone: true, selector: "lib-form-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, crossFieldValidators: { classPropertyName: "crossFieldValidators", publicName: "crossFieldValidators", isSignal: true, isRequired: false, transformFunction: null }, serverErrors: { classPropertyName: "serverErrors", publicName: "serverErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<form class=\"fb-form\" [formGroup]=\"formGroup()\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n  <div class=\"fb-fields-grid\" [style.--fb-columns]=\"columns()\">\r\n    @for (field of fields(); track field.key) {\r\n      <div class=\"fb-field\" [class.fb-field--span-2]=\"field.colSpan === 2\">\r\n        @if (field.type !== 'checkbox' && field.type !== 'radio') {\r\n          <label class=\"fb-label\" [attr.for]=\"fieldId(field)\">{{ field.label }}</label>\r\n        }\r\n\r\n        @switch (field.type) {\r\n          @case ('checkbox') {\r\n            <label class=\"fb-checkbox-option\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [formControl]=\"controlFor(field)\"\r\n                [disabled]=\"!!field.disabled\"\r\n                [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n                [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n              />\r\n              {{ field.label }}\r\n            </label>\r\n          }\r\n          @case ('radio') {\r\n            <fieldset\r\n              class=\"fb-radio-group\"\r\n              role=\"radiogroup\"\r\n              [attr.aria-labelledby]=\"legendId(field)\"\r\n            >\r\n              <legend class=\"fb-label\" [id]=\"legendId(field)\">{{ field.label }}</legend>\r\n              @for (option of optionsFor(field); track option.value) {\r\n                <label class=\"fb-radio-option\">\r\n                  <input\r\n                    type=\"radio\"\r\n                    [formControl]=\"controlFor(field)\"\r\n                    [name]=\"fieldId(field)\"\r\n                    [value]=\"option.value\"\r\n                    [disabled]=\"!!field.disabled\"\r\n                    [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n                    [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n                  />\r\n                  {{ option.label }}\r\n                </label>\r\n              }\r\n            </fieldset>\r\n          }\r\n          @case ('textarea') {\r\n            <textarea\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [placeholder]=\"field.placeholder ?? ''\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            ></textarea>\r\n          }\r\n          @case ('select') {\r\n            <select\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            >\r\n              @for (option of optionsFor(field); track option.value) {\r\n                <option [ngValue]=\"option.value\">{{ option.label }}</option>\r\n              }\r\n            </select>\r\n          }\r\n          @default {\r\n            <input\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [type]=\"field.type\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [placeholder]=\"field.placeholder ?? ''\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            />\r\n          }\r\n        }\r\n\r\n        @if (activeErrorFor(field); as message) {\r\n          <p class=\"fb-error\" [id]=\"errorId(field)\">{{ message }}</p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <button type=\"submit\" class=\"fb-submit\" [disabled]=\"isSubmitDisabled()\">Submit</button>\r\n</form>\r\n", styles: [":host{--fb-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;--fb-font-size: .9375rem;--fb-text-color: #1f2937;--fb-label-color: #374151;--fb-border-color: #d1d5db;--fb-error-color: #dc2626;--fb-primary-color: #3b82f6;--fb-focus-color: var(--fb-primary-color);--fb-border-radius: .5rem;--fb-spacing: 1rem;--fb-control-padding-y: .5rem;--fb-control-padding-x: .75rem;--fb-transition-duration: .15s;display:block;font-family:var(--fb-font-family);font-size:var(--fb-font-size);color:var(--fb-text-color)}.fb-form{display:flex;flex-direction:column;gap:var(--fb-spacing);width:100%}.fb-fields-grid{display:grid;grid-template-columns:repeat(var(--fb-columns, 1),1fr);gap:var(--fb-spacing)}.fb-field{display:flex;flex-direction:column;gap:calc(var(--fb-spacing) / 2.5);min-width:0}.fb-field--span-2{grid-column:span 2}@media(max-width:640px){.fb-fields-grid{grid-template-columns:1fr}.fb-field--span-2{grid-column:span 1}}.fb-label{font-weight:600;color:var(--fb-label-color);padding:0;border:none}.fb-control{box-sizing:border-box;width:100%;font:inherit;color:inherit;padding:var(--fb-control-padding-y) var(--fb-control-padding-x);border:1px solid var(--fb-border-color);border-radius:var(--fb-border-radius);background:transparent;transition:border-color var(--fb-transition-duration) ease}.fb-control:focus-visible{outline:2px solid var(--fb-focus-color);outline-offset:-1px;border-color:var(--fb-focus-color)}textarea.fb-control{min-height:5rem;resize:vertical}select.fb-control{cursor:pointer}.fb-radio-group{display:flex;flex-direction:column;gap:calc(var(--fb-spacing) / 2.5)}.fb-radio-option,.fb-checkbox-option{display:inline-flex;align-items:center;gap:.5rem;font-weight:400;color:var(--fb-text-color);cursor:pointer}.fb-radio-option input,.fb-checkbox-option input{accent-color:var(--fb-primary-color)}.fb-radio-option input:focus-visible,.fb-checkbox-option input:focus-visible{outline:2px solid var(--fb-focus-color);outline-offset:2px}.fb-error{margin:0;font-size:.8125rem;color:var(--fb-error-color)}.fb-submit{appearance:none;align-self:flex-start;border:none;border-radius:var(--fb-border-radius);background:var(--fb-primary-color);color:#fff;padding:var(--fb-control-padding-y) 1.25rem;font:inherit;font-weight:600;cursor:pointer;transition:opacity var(--fb-transition-duration) ease}.fb-submit:focus-visible{outline:2px solid var(--fb-focus-color);outline-offset:2px}.fb-submit:disabled{opacity:.45;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: FormBuilder, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-builder', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<form class=\"fb-form\" [formGroup]=\"formGroup()\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n  <div class=\"fb-fields-grid\" [style.--fb-columns]=\"columns()\">\r\n    @for (field of fields(); track field.key) {\r\n      <div class=\"fb-field\" [class.fb-field--span-2]=\"field.colSpan === 2\">\r\n        @if (field.type !== 'checkbox' && field.type !== 'radio') {\r\n          <label class=\"fb-label\" [attr.for]=\"fieldId(field)\">{{ field.label }}</label>\r\n        }\r\n\r\n        @switch (field.type) {\r\n          @case ('checkbox') {\r\n            <label class=\"fb-checkbox-option\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [formControl]=\"controlFor(field)\"\r\n                [disabled]=\"!!field.disabled\"\r\n                [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n                [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n              />\r\n              {{ field.label }}\r\n            </label>\r\n          }\r\n          @case ('radio') {\r\n            <fieldset\r\n              class=\"fb-radio-group\"\r\n              role=\"radiogroup\"\r\n              [attr.aria-labelledby]=\"legendId(field)\"\r\n            >\r\n              <legend class=\"fb-label\" [id]=\"legendId(field)\">{{ field.label }}</legend>\r\n              @for (option of optionsFor(field); track option.value) {\r\n                <label class=\"fb-radio-option\">\r\n                  <input\r\n                    type=\"radio\"\r\n                    [formControl]=\"controlFor(field)\"\r\n                    [name]=\"fieldId(field)\"\r\n                    [value]=\"option.value\"\r\n                    [disabled]=\"!!field.disabled\"\r\n                    [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n                    [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n                  />\r\n                  {{ option.label }}\r\n                </label>\r\n              }\r\n            </fieldset>\r\n          }\r\n          @case ('textarea') {\r\n            <textarea\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [placeholder]=\"field.placeholder ?? ''\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            ></textarea>\r\n          }\r\n          @case ('select') {\r\n            <select\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            >\r\n              @for (option of optionsFor(field); track option.value) {\r\n                <option [ngValue]=\"option.value\">{{ option.label }}</option>\r\n              }\r\n            </select>\r\n          }\r\n          @default {\r\n            <input\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [type]=\"field.type\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [placeholder]=\"field.placeholder ?? ''\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            />\r\n          }\r\n        }\r\n\r\n        @if (activeErrorFor(field); as message) {\r\n          <p class=\"fb-error\" [id]=\"errorId(field)\">{{ message }}</p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <button type=\"submit\" class=\"fb-submit\" [disabled]=\"isSubmitDisabled()\">Submit</button>\r\n</form>\r\n", styles: [":host{--fb-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;--fb-font-size: .9375rem;--fb-text-color: #1f2937;--fb-label-color: #374151;--fb-border-color: #d1d5db;--fb-error-color: #dc2626;--fb-primary-color: #3b82f6;--fb-focus-color: var(--fb-primary-color);--fb-border-radius: .5rem;--fb-spacing: 1rem;--fb-control-padding-y: .5rem;--fb-control-padding-x: .75rem;--fb-transition-duration: .15s;display:block;font-family:var(--fb-font-family);font-size:var(--fb-font-size);color:var(--fb-text-color)}.fb-form{display:flex;flex-direction:column;gap:var(--fb-spacing);width:100%}.fb-fields-grid{display:grid;grid-template-columns:repeat(var(--fb-columns, 1),1fr);gap:var(--fb-spacing)}.fb-field{display:flex;flex-direction:column;gap:calc(var(--fb-spacing) / 2.5);min-width:0}.fb-field--span-2{grid-column:span 2}@media(max-width:640px){.fb-fields-grid{grid-template-columns:1fr}.fb-field--span-2{grid-column:span 1}}.fb-label{font-weight:600;color:var(--fb-label-color);padding:0;border:none}.fb-control{box-sizing:border-box;width:100%;font:inherit;color:inherit;padding:var(--fb-control-padding-y) var(--fb-control-padding-x);border:1px solid var(--fb-border-color);border-radius:var(--fb-border-radius);background:transparent;transition:border-color var(--fb-transition-duration) ease}.fb-control:focus-visible{outline:2px solid var(--fb-focus-color);outline-offset:-1px;border-color:var(--fb-focus-color)}textarea.fb-control{min-height:5rem;resize:vertical}select.fb-control{cursor:pointer}.fb-radio-group{display:flex;flex-direction:column;gap:calc(var(--fb-spacing) / 2.5)}.fb-radio-option,.fb-checkbox-option{display:inline-flex;align-items:center;gap:.5rem;font-weight:400;color:var(--fb-text-color);cursor:pointer}.fb-radio-option input,.fb-checkbox-option input{accent-color:var(--fb-primary-color)}.fb-radio-option input:focus-visible,.fb-checkbox-option input:focus-visible{outline:2px solid var(--fb-focus-color);outline-offset:2px}.fb-error{margin:0;font-size:.8125rem;color:var(--fb-error-color)}.fb-submit{appearance:none;align-self:flex-start;border:none;border-radius:var(--fb-border-radius);background:var(--fb-primary-color);color:#fff;padding:var(--fb-control-padding-y) 1.25rem;font:inherit;font-weight:600;cursor:pointer;transition:opacity var(--fb-transition-duration) ease}.fb-submit:focus-visible{outline:2px solid var(--fb-focus-color);outline-offset:2px}.fb-submit:disabled{opacity:.45;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], crossFieldValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "crossFieldValidators", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], serverErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverErrors", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormBuilder };
+//# sourceMappingURL=zhunam-form-builder.mjs.map

package/fesm2022/zhunam-form-builder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"zhunam-form-builder.mjs","sources":["../../../../libs/form-builder/src/lib/utils/safe-pattern.ts","../../../../libs/form-builder/src/lib/form-builder/form-builder.ts","../../../../libs/form-builder/src/lib/form-builder/form-builder.html","../../../../libs/form-builder/src/zhunam-form-builder.ts"],"sourcesContent":["const MAX_PATTERN_LENGTH = 300;\r\n\r\n/** Matches a group that repeats another quantifier, e.g. `(x+)+`, `(x*)*`. */\r\nconst NESTED_QUANTIFIER = /\\([^()]*[+*][^()]*\\)[+*]/;\r\n\r\n/** Matches a repeated group so its alternated branches can be compared. */\r\nconst REPEATED_GROUP = /\\(([^()]*)\\)[+*]/g;\r\n\r\n/**\r\n * Validates that a regex `pattern` string is safe enough to compile into\r\n * a `RegExp` for form validation.\r\n *\r\n * This is a heuristic, not a mathematical guarantee of ReDoS-safety: it\r\n * rejects the pattern shapes most commonly responsible for catastrophic\r\n * backtracking (nested quantifiers, overlapping alternation inside a\r\n * repeated group) and enforces a length cap, but a maliciously crafted\r\n * pattern could still slip through undetected. Never accept `pattern`\r\n * values from a fully untrusted source without your own review.\r\n *\r\n * @throws {Error} If `pattern` is longer than 300 characters, or matches\r\n * a known catastrophic-backtracking shape.\r\n */\r\nexport function assertSafePattern(pattern: string): void {\r\n  if (pattern.length > MAX_PATTERN_LENGTH) {\r\n    throw new Error(\r\n      `Unsafe regex pattern: exceeds the ${MAX_PATTERN_LENGTH}-character limit.`,\r\n    );\r\n  }\r\n\r\n  if (NESTED_QUANTIFIER.test(pattern)) {\r\n    throw new Error(\r\n      'Unsafe regex pattern: nested quantifiers detected (e.g. (x+)+), a known catastrophic-backtracking shape.',\r\n    );\r\n  }\r\n\r\n  if (hasOverlappingAlternation(pattern)) {\r\n    throw new Error(\r\n      'Unsafe regex pattern: overlapping alternation inside a repeated group detected (e.g. (a|a)+), a known catastrophic-backtracking shape.',\r\n    );\r\n  }\r\n}\r\n\r\nfunction hasOverlappingAlternation(pattern: string): boolean {\r\n  const repeatedGroup = new RegExp(REPEATED_GROUP);\r\n  let match: RegExpExecArray | null;\r\n\r\n  while ((match = repeatedGroup.exec(pattern)) !== null) {\r\n    const branches = match[1].split('|');\r\n    for (let i = 0; i < branches.length; i++) {\r\n      for (let j = i + 1; j < branches.length; j++) {\r\n        if (branchesOverlap(branches[i], branches[j])) {\r\n          return true;\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  return false;\r\n}\r\n\r\nfunction branchesOverlap(a: string, b: string): boolean {\r\n  if (a === b) return true;\r\n  if (!a || !b) return false;\r\n  return a.startsWith(b) || b.startsWith(a);\r\n}\r\n","// NUNCA usar [innerHTML], bypassSecurityTrustHtml, ni ningún mecanismo de inserción de HTML crudo en el DOM del componente.\r\n// label, placeholder, errorMessages, y FieldOption.label se renderizan siempre con interpolación {{ }} normal de Angular — nunca vía binding de propiedad que inserte HTML.\r\n\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  input,\r\n  output,\r\n  signal,\r\n  ViewEncapsulation,\r\n} from '@angular/core';\r\nimport { FormControl, FormGroup, ReactiveFormsModule, ValidatorFn, Validators } from '@angular/forms';\r\nimport { CrossFieldValidator, FieldConfig, FieldOption } from '../models/field-config';\r\nimport { assertSafePattern } from '../utils/safe-pattern';\r\n\r\ntype ErrorKey = 'required' | 'min' | 'max' | 'minLength' | 'maxLength' | 'pattern' | 'email';\r\n\r\n// Angular's built-in validators report `minlength`/`maxlength` (all lowercase)\r\n// on `control.errors`, not the camelCase keys `FieldValidatorConfig.errorMessages`\r\n// uses — this bridges the two so consumer-facing config can stay camelCase.\r\nconst RAW_ERROR_KEY_MAP: Record<string, ErrorKey> = {\r\n  required: 'required',\r\n  min: 'min',\r\n  max: 'max',\r\n  minlength: 'minLength',\r\n  maxlength: 'maxLength',\r\n  pattern: 'pattern',\r\n  email: 'email',\r\n};\r\n\r\nconst DEFAULT_ERROR_MESSAGES: Record<ErrorKey, string> = {\r\n  required: 'Este campo es obligatorio.',\r\n  min: 'El valor es menor al mínimo permitido.',\r\n  max: 'El valor supera el máximo permitido.',\r\n  minLength: 'El valor es demasiado corto.',\r\n  maxLength: 'El valor es demasiado largo.',\r\n  pattern: 'El formato no es válido.',\r\n  email: 'Ingresá un email válido.',\r\n};\r\n\r\n@Component({\r\n  selector: 'lib-form-builder',\r\n  imports: [ReactiveFormsModule],\r\n  templateUrl: './form-builder.html',\r\n  styleUrl: './form-builder.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n})\r\nexport class FormBuilder<T> {\r\n  /**\r\n   * Declarative configuration of the fields to render, in display order.\r\n   * @example\r\n   * fields: FieldConfig<User>[] = [\r\n   *   { key: 'email', label: 'Email', type: 'email', validators: { required: true, email: true } },\r\n   * ];\r\n   */\r\n  fields = input.required<FieldConfig<T>[]>();\r\n\r\n  /**\r\n   * Number of grid columns fields are laid out in on desktop. Always\r\n   * collapses to a single column below a mobile breakpoint, regardless\r\n   * of this value — mobile-first, like the rest of the library.\r\n   * @default 1\r\n   * @example\r\n   * <lib-form-builder [fields]=\"fields\" [columns]=\"2\" />\r\n   */\r\n  columns = input<number>(1);\r\n\r\n  /**\r\n   * Form-level validators that check values across multiple fields (e.g.\r\n   * confirming a password). Run separately from Angular's native\r\n   * per-control validation, only when the native `FormGroup` is valid.\r\n   * @default []\r\n   * @example\r\n   * crossFieldValidators: CrossFieldValidator<User>[] = [\r\n   *   {\r\n   *     validate: (value) =>\r\n   *       value.password !== value.confirmPassword\r\n   *         ? { confirmPassword: 'Passwords must match' }\r\n   *         : null,\r\n   *   },\r\n   * ];\r\n   */\r\n  crossFieldValidators = input<CrossFieldValidator<T>[]>([]);\r\n\r\n  /**\r\n   * Emitted with the typed form values, only when both the native\r\n   * `FormGroup` and every `crossFieldValidators` check pass.\r\n   * @example\r\n   * <lib-form-builder [fields]=\"fields\" (formSubmit)=\"onSubmit($event)\" />\r\n   */\r\n  formSubmit = output<T>();\r\n\r\n  /**\r\n   * Errors returned by the backend after a submit attempt (e.g. \"email\r\n   * already registered\"), keyed by field. Shown as soon as they're set,\r\n   * regardless of whether the field has been touched or the form\r\n   * submitted locally — receiving one implies a submit already\r\n   * happened. Each message clears itself automatically the moment the\r\n   * user edits that field again, so there's no need to clear this input\r\n   * back to `{}` manually after showing it once.\r\n   * @default {}\r\n   * @example\r\n   * // In the consumer's component:\r\n   * protected readonly serverErrors = signal<Partial<Record<keyof User, string>>>({});\r\n   *\r\n   * onFormSubmit(value: User) {\r\n   *   this.api.register(value).subscribe({\r\n   *     error: () => this.serverErrors.set({ email: 'This email is already registered.' }),\r\n   *   });\r\n   * }\r\n   * // Template:\r\n   * <lib-form-builder [fields]=\"fields\" [serverErrors]=\"serverErrors()\" (formSubmit)=\"onFormSubmit($event)\" />\r\n   */\r\n  serverErrors = input<Partial<Record<keyof T, string>>>({});\r\n\r\n  protected readonly submitted = signal(false);\r\n  protected readonly crossFieldErrors = signal<Record<string, string>>({});\r\n\r\n  // Snapshot of each server-error field's value at the moment that error\r\n  // appeared. A server error is only ever about a rejected backend\r\n  // observation of the exact value the user submitted — the instant the\r\n  // control's live value no longer matches this snapshot, the message is\r\n  // stale and `serverErrorFor` stops showing it, without the consumer\r\n  // having to clear `serverErrors` themselves.\r\n  private readonly serverErrorSnapshot = signal<Partial<Record<keyof T, unknown>>>({});\r\n\r\n  // `fields()` can change at runtime (e.g. a wizard swapping steps), so the\r\n  // FormGroup is derived with `computed()` rather than built once in the\r\n  // constructor: it's rebuilt only when the `fields()` array reference\r\n  // changes. `computed()` fits better than an `effect()` here because\r\n  // building a FormGroup is a pure derivation with no teardown to manage,\r\n  // and `computed()` already memoizes it — the same instance is returned\r\n  // across change-detection cycles until `fields()` itself changes.\r\n  protected readonly formGroup = computed(() => this.buildFormGroup(this.fields()));\r\n\r\n  private static instanceCounter = 0;\r\n  private readonly instanceId = ++FormBuilder.instanceCounter;\r\n\r\n  constructor() {\r\n    // Runs whenever a new `serverErrors()` value comes in and captures\r\n    // each mentioned field's current value — the baseline `serverErrorFor`\r\n    // compares against to decide whether that message is still relevant.\r\n    effect(() => {\r\n      const errors = this.serverErrors();\r\n      const group = this.formGroup();\r\n      const snapshot: Partial<Record<keyof T, unknown>> = {};\r\n      for (const key of Object.keys(errors) as (keyof T)[]) {\r\n        snapshot[key] = group.get(String(key))?.value;\r\n      }\r\n      this.serverErrorSnapshot.set(snapshot);\r\n    });\r\n  }\r\n\r\n  private buildFormGroup(fields: FieldConfig<T>[]): FormGroup {\r\n    const controls: Record<string, FormControl<unknown>> = {};\r\n    for (const field of fields) {\r\n      const initialValue = field.defaultValue ?? (field.type === 'checkbox' ? false : null);\r\n      controls[String(field.key)] = new FormControl<unknown>(\r\n        { value: initialValue, disabled: !!field.disabled },\r\n        this.buildValidators(field),\r\n      );\r\n    }\r\n    return new FormGroup(controls);\r\n  }\r\n\r\n  private buildValidators(field: FieldConfig<T>): ValidatorFn[] {\r\n    const config = field.validators;\r\n    if (!config) {\r\n      return [];\r\n    }\r\n\r\n    const validators: ValidatorFn[] = [];\r\n    if (config.required) {\r\n      // A checkbox's \"empty\" value is `false`, which Validators.required\r\n      // doesn't treat as empty — requiredTrue is the correct check for it.\r\n      validators.push(field.type === 'checkbox' ? Validators.requiredTrue : Validators.required);\r\n    }\r\n    if (config.min !== undefined) {\r\n      validators.push(Validators.min(config.min));\r\n    }\r\n    if (config.max !== undefined) {\r\n      validators.push(Validators.max(config.max));\r\n    }\r\n    if (config.minLength !== undefined) {\r\n      validators.push(Validators.minLength(config.minLength));\r\n    }\r\n    if (config.maxLength !== undefined) {\r\n      validators.push(Validators.maxLength(config.maxLength));\r\n    }\r\n    if (config.pattern !== undefined) {\r\n      // An unsafe pattern is a bug in the consumer's config, not a runtime\r\n      // condition to recover from — let it throw instead of swallowing it.\r\n      assertSafePattern(config.pattern);\r\n      validators.push(Validators.pattern(config.pattern));\r\n    }\r\n    if (config.email) {\r\n      validators.push(Validators.email);\r\n    }\r\n    return validators;\r\n  }\r\n\r\n  protected controlFor(field: FieldConfig<T>): FormControl {\r\n    return this.formGroup().get(String(field.key)) as FormControl;\r\n  }\r\n\r\n  protected optionsFor(field: FieldConfig<T>): FieldOption[] {\r\n    return field.options ?? [];\r\n  }\r\n\r\n  // Shared by the label's `for`, the control's `id`, and (for radio groups)\r\n  // the `name` that keeps this field's radios from being grouped with\r\n  // another field's — RadioControlValueAccessor matches radios by `name`\r\n  // plus parent FormGroup, and every field here shares the same FormGroup.\r\n  protected fieldId(field: FieldConfig<T>): string {\r\n    return `fb-${this.instanceId}-${String(field.key)}`;\r\n  }\r\n\r\n  protected errorMessageFor(field: FieldConfig<T>): string | null {\r\n    const control = this.controlFor(field);\r\n    if (!control.errors || (!control.touched && !this.submitted())) {\r\n      return null;\r\n    }\r\n\r\n    const errorKey = RAW_ERROR_KEY_MAP[Object.keys(control.errors)[0]];\r\n    if (!errorKey) {\r\n      return null;\r\n    }\r\n\r\n    return field.validators?.errorMessages?.[errorKey] ?? DEFAULT_ERROR_MESSAGES[errorKey];\r\n  }\r\n\r\n  protected serverErrorFor(field: FieldConfig<T>): string | null {\r\n    const message = this.serverErrors()[field.key];\r\n    if (!message) {\r\n      return null;\r\n    }\r\n\r\n    const currentValue = this.controlFor(field).value;\r\n    const snapshotValue = this.serverErrorSnapshot()[field.key];\r\n    return currentValue === snapshotValue ? message : null;\r\n  }\r\n\r\n  protected crossFieldErrorFor(field: FieldConfig<T>): string | null {\r\n    if (!this.submitted()) {\r\n      return null;\r\n    }\r\n    return this.crossFieldErrors()[String(field.key)] ?? null;\r\n  }\r\n\r\n  // Single source of truth for \"is an error currently shown for this\r\n  // field, and what does it say\" — both the visible `.fb-error` message\r\n  // and its ARIA wiring (aria-invalid, aria-describedby) read from this,\r\n  // so the two can never drift out of sync with each other.\r\n  protected activeErrorFor(field: FieldConfig<T>): string | null {\r\n    return this.errorMessageFor(field) ?? this.serverErrorFor(field) ?? this.crossFieldErrorFor(field);\r\n  }\r\n\r\n  protected errorId(field: FieldConfig<T>): string {\r\n    return `${this.fieldId(field)}-error`;\r\n  }\r\n\r\n  protected legendId(field: FieldConfig<T>): string {\r\n    return `${this.fieldId(field)}-legend`;\r\n  }\r\n\r\n  protected isSubmitDisabled(): boolean {\r\n    return this.formGroup().invalid || Object.keys(this.crossFieldErrors()).length > 0;\r\n  }\r\n\r\n  protected onSubmit(): void {\r\n    this.submitted.set(true);\r\n    const group = this.formGroup();\r\n\r\n    if (group.invalid) {\r\n      return;\r\n    }\r\n\r\n    // `.value` excludes disabled controls entirely — `getRawValue()` keeps\r\n    // them, so a disabled field with a `defaultValue` still comes through\r\n    // as a complete `T` instead of a hole in the emitted object.\r\n    const value = this.coerceNumberFields(group.getRawValue());\r\n    const errors = this.runCrossFieldValidators(value);\r\n    this.crossFieldErrors.set(errors);\r\n\r\n    if (Object.keys(errors).length > 0) {\r\n      return;\r\n    }\r\n\r\n    this.formSubmit.emit(value);\r\n  }\r\n\r\n  // Native `<input type=\"number\">` always reports its value as a string\r\n  // through the DOM. Angular's NumberValueAccessor would normally parse it\r\n  // for us, but that accessor only activates for a *static* `type=\"number\"`\r\n  // attribute in the template — this component binds `[type]=\"field.type\"`\r\n  // dynamically, so it never matches, and DefaultValueAccessor (string in,\r\n  // string out) handles the control instead. Fixed up here, at the point\r\n  // the value leaves the component, rather than in how the FormControl\r\n  // stores it — Validators.min/max already parseFloat internally either\r\n  // way, so correcting the stored value would change nothing there but\r\n  // would still need this same conversion for the emitted object.\r\n  private coerceNumberFields(rawValue: unknown): T {\r\n    const value = { ...(rawValue as Record<string, unknown>) };\r\n    for (const field of this.fields()) {\r\n      if (field.type !== 'number') {\r\n        continue;\r\n      }\r\n\r\n      const key = String(field.key);\r\n      const current = value[key];\r\n      if (current === '' || current === null || current === undefined) {\r\n        value[key] = null;\r\n      } else if (typeof current === 'string') {\r\n        value[key] = Number(current);\r\n      }\r\n    }\r\n    return value as T;\r\n  }\r\n\r\n  private runCrossFieldValidators(value: T): Record<string, string> {\r\n    const errors: Record<string, string> = {};\r\n    for (const validator of this.crossFieldValidators()) {\r\n      const result = validator.validate(value);\r\n      if (result) {\r\n        Object.assign(errors, result);\r\n      }\r\n    }\r\n    return errors;\r\n  }\r\n}\r\n","<form class=\"fb-form\" [formGroup]=\"formGroup()\" (ngSubmit)=\"onSubmit()\" novalidate>\r\n  <div class=\"fb-fields-grid\" [style.--fb-columns]=\"columns()\">\r\n    @for (field of fields(); track field.key) {\r\n      <div class=\"fb-field\" [class.fb-field--span-2]=\"field.colSpan === 2\">\r\n        @if (field.type !== 'checkbox' && field.type !== 'radio') {\r\n          <label class=\"fb-label\" [attr.for]=\"fieldId(field)\">{{ field.label }}</label>\r\n        }\r\n\r\n        @switch (field.type) {\r\n          @case ('checkbox') {\r\n            <label class=\"fb-checkbox-option\">\r\n              <input\r\n                type=\"checkbox\"\r\n                [formControl]=\"controlFor(field)\"\r\n                [disabled]=\"!!field.disabled\"\r\n                [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n                [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n              />\r\n              {{ field.label }}\r\n            </label>\r\n          }\r\n          @case ('radio') {\r\n            <fieldset\r\n              class=\"fb-radio-group\"\r\n              role=\"radiogroup\"\r\n              [attr.aria-labelledby]=\"legendId(field)\"\r\n            >\r\n              <legend class=\"fb-label\" [id]=\"legendId(field)\">{{ field.label }}</legend>\r\n              @for (option of optionsFor(field); track option.value) {\r\n                <label class=\"fb-radio-option\">\r\n                  <input\r\n                    type=\"radio\"\r\n                    [formControl]=\"controlFor(field)\"\r\n                    [name]=\"fieldId(field)\"\r\n                    [value]=\"option.value\"\r\n                    [disabled]=\"!!field.disabled\"\r\n                    [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n                    [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n                  />\r\n                  {{ option.label }}\r\n                </label>\r\n              }\r\n            </fieldset>\r\n          }\r\n          @case ('textarea') {\r\n            <textarea\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [placeholder]=\"field.placeholder ?? ''\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            ></textarea>\r\n          }\r\n          @case ('select') {\r\n            <select\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            >\r\n              @for (option of optionsFor(field); track option.value) {\r\n                <option [ngValue]=\"option.value\">{{ option.label }}</option>\r\n              }\r\n            </select>\r\n          }\r\n          @default {\r\n            <input\r\n              class=\"fb-control\"\r\n              [id]=\"fieldId(field)\"\r\n              [type]=\"field.type\"\r\n              [formControl]=\"controlFor(field)\"\r\n              [placeholder]=\"field.placeholder ?? ''\"\r\n              [disabled]=\"!!field.disabled\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"activeErrorFor(field) ? errorId(field) : null\"\r\n            />\r\n          }\r\n        }\r\n\r\n        @if (activeErrorFor(field); as message) {\r\n          <p class=\"fb-error\" [id]=\"errorId(field)\">{{ message }}</p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <button type=\"submit\" class=\"fb-submit\" [disabled]=\"isSubmitDisabled()\">Submit</button>\r\n</form>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@zhunam/form-builder",
+  "version": "1.0.0",
+  "peerDependencies": {
+    "@angular/core": "^20.0.0 || ^21.0.0 || ^22.0.0",
+    "@angular/forms": "^20.0.0 || ^21.0.0 || ^22.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/zhunam-form-builder.mjs",
+  "typings": "types/zhunam-form-builder.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/zhunam-form-builder.d.ts",
+      "default": "./fesm2022/zhunam-form-builder.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/zhunam-form-builder.d.ts

@@ -0,0 +1,221 @@
+import * as _angular_core from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+
+/**
+ * Supported input types a `FieldConfig` can render.
+ */
+type FieldType = 'text' | 'number' | 'email' | 'password' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date';
+/**
+ * A single selectable choice for `select` and `radio` fields.
+ */
+interface FieldOption {
+    /**
+     * Value submitted when this option is selected.
+     */
+    value: string | number;
+    /**
+     * Text displayed to the user for this option.
+     */
+    label: string;
+}
+/**
+ * Native Angular validation rules applied to a single field.
+ */
+interface FieldValidatorConfig {
+    /**
+     * Whether the field must have a value.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Minimum numeric value allowed.
+     */
+    min?: number;
+    /**
+     * Maximum numeric value allowed.
+     */
+    max?: number;
+    /**
+     * Minimum string length allowed.
+     */
+    minLength?: number;
+    /**
+     * Maximum string length allowed.
+     */
+    maxLength?: number;
+    /**
+     * Regex pattern as a string (never a RegExp object — keeps config
+     * serializable). Validated internally against a length limit and a
+     * catastrophic-backtracking heuristic before use; throws if rejected.
+     * This is a heuristic, not a mathematical guarantee — never accept
+     * `pattern` values from a fully untrusted source without your own
+     * review.
+     */
+    pattern?: string;
+    /**
+     * Whether the value must be a well-formed email address.
+     * @default false
+     */
+    email?: boolean;
+    /**
+     * Custom error message per validator, shown instead of the built-in
+     * default when that validator fails.
+     */
+    errorMessages?: Partial<Record<'required' | 'min' | 'max' | 'minLength' | 'maxLength' | 'pattern' | 'email', string>>;
+}
+/**
+ * Declarative configuration for a single form field rendered by
+ * `FormBuilder`.
+ */
+interface FieldConfig<T> {
+    /**
+     * Property of `T` this field reads and writes its value from.
+     */
+    key: keyof T;
+    /**
+     * Text displayed as the field's label.
+     */
+    label: string;
+    /**
+     * Input type this field renders as.
+     */
+    type: FieldType;
+    /**
+     * Placeholder text shown when the field is empty.
+     */
+    placeholder?: string;
+    /**
+     * Choices available for `select` and `radio` fields.
+     */
+    options?: FieldOption[];
+    /**
+     * Native Angular validation rules applied to this field.
+     */
+    validators?: FieldValidatorConfig;
+    /**
+     * Initial value assigned to the field before user interaction.
+     */
+    defaultValue?: T[keyof T];
+    /**
+     * How many grid columns this field spans, when the component's
+     * `columns` input is 2 or more. Has no effect at 1 column (the
+     * default) or below the mobile breakpoint, where every field always
+     * spans the full row.
+     * @default 1
+     */
+    colSpan?: 1 | 2;
+    /**
+     * Renders the control disabled from the start and excludes it from
+     * native validation, matching Angular's own disabled-control
+     * semantics. Still included in the object `formSubmit` emits
+     * (`FormBuilder` reads the raw form value, not the disabled-excluding
+     * one) — useful for a read-only field seeded via `defaultValue`.
+     * @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Declarative form-level validator that checks values across multiple
+ * fields (e.g. confirming a password), without exposing Angular's
+ * `ValidatorFn`/`AbstractControl` to the consumer.
+ */
+interface CrossFieldValidator<T> {
+    /**
+     * Runs the cross-field check against the current form value.
+     * @returns A map of error keys to messages when invalid, or `null`
+     * when valid.
+     */
+    validate: (value: Partial<T>) => Record<string, string> | null;
+}
+
+declare class FormBuilder<T> {
+    /**
+     * Declarative configuration of the fields to render, in display order.
+     * @example
+     * fields: FieldConfig<User>[] = [
+     *   { key: 'email', label: 'Email', type: 'email', validators: { required: true, email: true } },
+     * ];
+     */
+    fields: _angular_core.InputSignal<FieldConfig<T>[]>;
+    /**
+     * Number of grid columns fields are laid out in on desktop. Always
+     * collapses to a single column below a mobile breakpoint, regardless
+     * of this value — mobile-first, like the rest of the library.
+     * @default 1
+     * @example
+     * <lib-form-builder [fields]="fields" [columns]="2" />
+     */
+    columns: _angular_core.InputSignal<number>;
+    /**
+     * Form-level validators that check values across multiple fields (e.g.
+     * confirming a password). Run separately from Angular's native
+     * per-control validation, only when the native `FormGroup` is valid.
+     * @default []
+     * @example
+     * crossFieldValidators: CrossFieldValidator<User>[] = [
+     *   {
+     *     validate: (value) =>
+     *       value.password !== value.confirmPassword
+     *         ? { confirmPassword: 'Passwords must match' }
+     *         : null,
+     *   },
+     * ];
+     */
+    crossFieldValidators: _angular_core.InputSignal<CrossFieldValidator<T>[]>;
+    /**
+     * Emitted with the typed form values, only when both the native
+     * `FormGroup` and every `crossFieldValidators` check pass.
+     * @example
+     * <lib-form-builder [fields]="fields" (formSubmit)="onSubmit($event)" />
+     */
+    formSubmit: _angular_core.OutputEmitterRef<T>;
+    /**
+     * Errors returned by the backend after a submit attempt (e.g. "email
+     * already registered"), keyed by field. Shown as soon as they're set,
+     * regardless of whether the field has been touched or the form
+     * submitted locally — receiving one implies a submit already
+     * happened. Each message clears itself automatically the moment the
+     * user edits that field again, so there's no need to clear this input
+     * back to `{}` manually after showing it once.
+     * @default {}
+     * @example
+     * // In the consumer's component:
+     * protected readonly serverErrors = signal<Partial<Record<keyof User, string>>>({});
+     *
+     * onFormSubmit(value: User) {
+     *   this.api.register(value).subscribe({
+     *     error: () => this.serverErrors.set({ email: 'This email is already registered.' }),
+     *   });
+     * }
+     * // Template:
+     * <lib-form-builder [fields]="fields" [serverErrors]="serverErrors()" (formSubmit)="onFormSubmit($event)" />
+     */
+    serverErrors: _angular_core.InputSignal<Partial<Record<keyof T, string>>>;
+    protected readonly submitted: _angular_core.WritableSignal<boolean>;
+    protected readonly crossFieldErrors: _angular_core.WritableSignal<Record<string, string>>;
+    private readonly serverErrorSnapshot;
+    protected readonly formGroup: _angular_core.Signal<FormGroup<any>>;
+    private static instanceCounter;
+    private readonly instanceId;
+    constructor();
+    private buildFormGroup;
+    private buildValidators;
+    protected controlFor(field: FieldConfig<T>): FormControl;
+    protected optionsFor(field: FieldConfig<T>): FieldOption[];
+    protected fieldId(field: FieldConfig<T>): string;
+    protected errorMessageFor(field: FieldConfig<T>): string | null;
+    protected serverErrorFor(field: FieldConfig<T>): string | null;
+    protected crossFieldErrorFor(field: FieldConfig<T>): string | null;
+    protected activeErrorFor(field: FieldConfig<T>): string | null;
+    protected errorId(field: FieldConfig<T>): string;
+    protected legendId(field: FieldConfig<T>): string;
+    protected isSubmitDisabled(): boolean;
+    protected onSubmit(): void;
+    private coerceNumberFields;
+    private runCrossFieldValidators;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormBuilder<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormBuilder<any>, "lib-form-builder", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "crossFieldValidators": { "alias": "crossFieldValidators"; "required": false; "isSignal": true; }; "serverErrors": { "alias": "serverErrors"; "required": false; "isSignal": true; }; }, { "formSubmit": "formSubmit"; }, never, never, true, never>;
+}
+
+export { FormBuilder };
+export type { CrossFieldValidator, FieldConfig, FieldOption, FieldType, FieldValidatorConfig };