@zhunam/form-builder 2.0.0 → 3.1.0

package/fesm2022/zhunam-form-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { InjectionToken, input, output, inject, signal, linkedSignal, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 
@@ -56,11 +56,83 @@ function branchesOverlap(a, b) {
     return a.startsWith(b) || b.startsWith(a);
 }
 
+/**
+ * Default English messages. Used when no `FORM_BUILDER_MESSAGES` provider
+ * is registered.
+ */
+const FORM_BUILDER_MESSAGES_EN = {
+    required: () => 'This field is required.',
+    email: () => 'Enter a valid email address.',
+    min: (min) => `The value must be at least ${min}.`,
+    max: (max) => `The value must be at most ${max}.`,
+    minLength: (requiredLength) => `Must be at least ${requiredLength} characters.`,
+    maxLength: (requiredLength) => `Must be at most ${requiredLength} characters.`,
+    pattern: () => 'The format is not valid.',
+    submit: () => 'Submit',
+    showPassword: () => 'Show password',
+    hidePassword: () => 'Hide password',
+};
+/**
+ * Spanish preset, ready to pass to `provideFormBuilderMessages()`.
+ * @example
+ * providers: [provideFormBuilderMessages(FORM_BUILDER_MESSAGES_ES)]
+ */
+const FORM_BUILDER_MESSAGES_ES = {
+    required: () => 'Este campo es obligatorio.',
+    email: () => 'El email no es válido.',
+    min: (min) => `El valor debe ser como mínimo ${min}.`,
+    max: (max) => `El valor debe ser como máximo ${max}.`,
+    minLength: (requiredLength) => `Debe tener al menos ${requiredLength} caracteres.`,
+    maxLength: (requiredLength) => `Debe tener como máximo ${requiredLength} caracteres.`,
+    pattern: () => 'El formato no es válido.',
+    submit: () => 'Enviar',
+    showPassword: () => 'Mostrar contraseña',
+    hidePassword: () => 'Ocultar contraseña',
+};
+
+/**
+ * DI token for the active `FormBuilderMessages` set. Defaults to
+ * `FORM_BUILDER_MESSAGES_EN` when no provider is registered.
+ *
+ * A per-field `FieldValidatorConfig.errorMessages` override, when set,
+ * still takes precedence over this token for that specific field: this
+ * token supplies the message only when the field itself doesn't override
+ * that validator's text.
+ *
+ * Prefer `provideFormBuilderMessages()` over providing this token
+ * directly, it merges your overrides on top of the English defaults
+ * instead of requiring every message to be re-specified.
+ */
+const FORM_BUILDER_MESSAGES = new InjectionToken('FORM_BUILDER_MESSAGES', {
+    providedIn: 'root',
+    factory: () => FORM_BUILDER_MESSAGES_EN,
+});
+/**
+ * Registers a `FormBuilderMessages` override, merged on top of the
+ * English defaults so a partial override (e.g. only `submit`) leaves the
+ * rest in English instead of requiring the full set.
+ *
+ * @param overrides Messages to override. Any member left out falls back
+ * to `FORM_BUILDER_MESSAGES_EN`.
+ * @example
+ * // Full preset:
+ * providers: [provideFormBuilderMessages(FORM_BUILDER_MESSAGES_ES)]
+ * @example
+ * // Partial override, everything else stays in English:
+ * providers: [provideFormBuilderMessages({ min: () => 'Must be greater than 0' })]
+ */
+function provideFormBuilderMessages(overrides) {
+    return {
+        provide: FORM_BUILDER_MESSAGES,
+        useValue: { ...FORM_BUILDER_MESSAGES_EN, ...overrides },
+    };
+}
+
 // 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.
+// 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.
+// uses, this bridges the two so consumer-facing config can stay camelCase.
 const RAW_ERROR_KEY_MAP = {
     required: 'required',
     min: 'min',
@@ -70,15 +142,6 @@ const RAW_ERROR_KEY_MAP = {
     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.
@@ -165,8 +228,49 @@ class FormBuilder {
      * <lib-form-builder [fields]="fields" [serverErrors]="serverErrors()" (formSubmit)="onFormSubmit($event)" />
      */
     serverErrors = input({}, ...(ngDevMode ? [{ debugName: "serverErrors" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom label for the submit button, instead of the injected
+     * FORM_BUILDER_MESSAGES `submit()` text. Takes precedence over both
+     * the messages token and the default English label.
+     * @example
+     * <lib-form-builder [fields]="fields" submitLabel="Create account" />
+     */
+    submitLabel = input(...(ngDevMode ? [undefined, { debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Hides the internal submit button entirely, for a consumer that
+     * triggers submission from its own UI instead, via the public
+     * `submit()` method.
+     * @default false
+     * @example
+     * <lib-form-builder #form [fields]="fields" [hideSubmit]="true" />
+     * <button (click)="form.submit()">Continue</button>
+     */
+    hideSubmit = input(false, ...(ngDevMode ? [{ debugName: "hideSubmit" }] : /* istanbul ignore next */ []));
+    /**
+     * Disables the internal submit button and makes the public `submit()`
+     * method a no-op while `true`, e.g. during an in-flight request.
+     * @default false
+     * @example
+     * <lib-form-builder [fields]="fields" [loading]="saving()" (formSubmit)="onSave($event)" />
+     */
+    loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /**
+     * External value applied to the form without recreating it. Every
+     * time this receives a new, non-`undefined` value (including the
+     * first one), it's patched into the current form
+     * (`emitEvent: false`, so it never triggers `valueChange` in `'live'`
+     * mode). Rebuilding `fields()` afterward keeps whatever was patched,
+     * the same as any other value the user typed.
+     * @example
+     * <lib-form-builder [fields]="fields" [value]="presetValue()" />
+     */
+    value = input(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
+    messages = inject(FORM_BUILDER_MESSAGES);
     submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : /* istanbul ignore next */ []));
     crossFieldErrors = signal({}, ...(ngDevMode ? [{ debugName: "crossFieldErrors" }] : /* istanbul ignore next */ []));
+    // Keys of password fields currently showing plain text instead of
+    // dots, toggled per-field by the user via the show/hide button.
+    visiblePasswordFields = signal(new Set(), ...(ngDevMode ? [{ debugName: "visiblePasswordFields" }] : /* 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
@@ -175,13 +279,13 @@ class FormBuilder {
     // 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 */ []));
+    // FormGroup is derived rather than built once in the constructor: it's
+    // rebuilt only when the `fields()` array reference changes. `linkedSignal`
+    // (not `computed()`) so `buildFormGroup` can read the previous FormGroup
+    // and carry forward the current value of every control whose key still
+    // exists in the new `fields()`, instead of resetting it to `defaultValue`.
+    formGroup = linkedSignal({ ...(ngDevMode ? { debugName: "formGroup" } : /* istanbul ignore next */ {}), source: this.fields,
+        computation: (fields, previous) => this.buildFormGroup(fields, previous?.value) });
     static instanceCounter = 0;
     instanceId = ++FormBuilder.instanceCounter;
     constructor() {
@@ -224,12 +328,29 @@ class FormBuilder {
             const subscription = group.valueChanges.subscribe(emitIfValid);
             onCleanup(() => subscription.unsubscribe());
         });
+        // Applies an external `value()` to whichever FormGroup is current at
+        // that moment, without recreating it. `formGroup()` is deliberately
+        // read via `untracked()` so this effect only reacts to `value()`
+        // itself changing, never to a `fields()`-triggered rebuild: `patchValue`
+        // with `emitEvent: false` also means `valueChange` never fires from this.
+        effect(() => {
+            const value = this.value();
+            if (value === undefined) {
+                return;
+            }
+            const group = untracked(() => this.formGroup());
+            group.patchValue(value, { emitEvent: false });
+        });
     }
-    buildFormGroup(fields) {
+    buildFormGroup(fields, previous) {
         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));
+            const key = String(field.key);
+            const previousControl = previous?.get(key);
+            const initialValue = previousControl
+                ? previousControl.value
+                : (field.defaultValue ?? (field.type === 'checkbox' ? false : null));
+            controls[key] = new FormControl({ value: initialValue, disabled: !!field.disabled }, this.buildValidators(field));
         }
         return new FormGroup(controls);
     }
@@ -273,6 +394,26 @@ class FormBuilder {
     optionsFor(field) {
         return field.options ?? [];
     }
+    showPasswordToggleFor(field) {
+        return field.showPasswordToggle ?? true;
+    }
+    isPasswordVisible(field) {
+        return this.visiblePasswordFields().has(String(field.key));
+    }
+    passwordInputType(field) {
+        return this.isPasswordVisible(field) ? 'text' : 'password';
+    }
+    togglePasswordVisibility(field) {
+        const key = String(field.key);
+        const next = new Set(this.visiblePasswordFields());
+        if (next.has(key)) {
+            next.delete(key);
+        }
+        else {
+            next.add(key);
+        }
+        this.visiblePasswordFields.set(next);
+    }
     // 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`
@@ -285,11 +426,36 @@ class FormBuilder {
         if (!control.errors || (!control.touched && !this.submitted())) {
             return null;
         }
-        const errorKey = RAW_ERROR_KEY_MAP[Object.keys(control.errors)[0]];
+        const rawKey = Object.keys(control.errors)[0];
+        const errorKey = RAW_ERROR_KEY_MAP[rawKey];
         if (!errorKey) {
             return null;
         }
-        return field.validators?.errorMessages?.[errorKey] ?? DEFAULT_ERROR_MESSAGES[errorKey];
+        // Precedence: a per-field override always wins, then the injected
+        // FORM_BUILDER_MESSAGES token (English by default), evaluated fresh
+        // here so a message reading a signal (e.g. a language switcher)
+        // updates live.
+        const fieldMessage = field.validators?.errorMessages?.[errorKey];
+        if (fieldMessage) {
+            return fieldMessage;
+        }
+        const errorDetail = control.errors[rawKey];
+        switch (errorKey) {
+            case 'required':
+                return this.messages.required();
+            case 'email':
+                return this.messages.email();
+            case 'min':
+                return this.messages.min(errorDetail.min);
+            case 'max':
+                return this.messages.max(errorDetail.max);
+            case 'minLength':
+                return this.messages.minLength(errorDetail.requiredLength);
+            case 'maxLength':
+                return this.messages.maxLength(errorDetail.requiredLength);
+            case 'pattern':
+                return this.messages.pattern();
+        }
     }
     serverErrorFor(field) {
         const message = this.serverErrors()[field.key];
@@ -307,7 +473,7 @@ class FormBuilder {
         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
+    // 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) {
@@ -319,16 +485,82 @@ class FormBuilder {
     legendId(field) {
         return `${this.fieldId(field)}-legend`;
     }
+    hintId(field) {
+        return `${this.fieldId(field)}-hint`;
+    }
+    optionDescriptionId(field, option) {
+        return `${this.fieldId(field)}-option-${String(option.value)}-description`;
+    }
+    /**
+     * `aria-describedby` for the field's own control: the error's id when
+     * one is currently shown, otherwise the hint's id when `hint` is set,
+     * otherwise `null`. Never both at once, mirroring `activeErrorFor`
+     * being the single source of truth for whether an error is visible.
+     */
+    describedByFor(field) {
+        if (this.activeErrorFor(field)) {
+            return this.errorId(field);
+        }
+        if (field.hint) {
+            return this.hintId(field);
+        }
+        return null;
+    }
+    /**
+     * `aria-describedby` for one `radio` option's own control: combines
+     * the field-level id (`describedByFor`) with that option's own
+     * description id when it has one, space-separated (the real HTML/ARIA
+     * syntax for referencing more than one describing element), or just
+     * whichever of the two is actually present, or `null` if neither is.
+     */
+    optionDescribedByFor(field, option) {
+        const ids = [
+            this.describedByFor(field),
+            option.description ? this.optionDescriptionId(field, option) : null,
+        ].filter((id) => id !== null);
+        return ids.length > 0 ? ids.join(' ') : null;
+    }
+    /**
+     * Whether `field` renders as a switch instead of a native checkbox
+     * box. `false` for any `type` other than `'checkbox'`, regardless of
+     * `appearance`.
+     */
+    isSwitch(field) {
+        return field.type === 'checkbox' && field.appearance === 'switch';
+    }
+    /**
+     * Whether `field`'s options render as a row of pills instead of a
+     * vertical list of native radios. `false` for any `type` other than
+     * `'radio'`, regardless of `appearance`.
+     */
+    isSegmented(field) {
+        return field.type === 'radio' && field.appearance === 'segmented';
+    }
     isSubmitDisabled() {
-        return this.formGroup().invalid || Object.keys(this.crossFieldErrors()).length > 0;
+        return this.loading() || this.formGroup().invalid || Object.keys(this.crossFieldErrors()).length > 0;
+    }
+    /**
+     * Triggers the exact same submit logic the internal button triggers:
+     * marks the form as submitted, runs validation, and emits `formSubmit`
+     * if it passes. Works identically whether `hideSubmit` is `true` or
+     * `false`, and is a no-op while `loading` is `true`.
+     * @example
+     * <lib-form-builder #form [fields]="fields" [hideSubmit]="true" />
+     * <button (click)="form.submit()">Continue</button>
+     */
+    submit() {
+        this.performSubmit();
     }
-    onSubmit() {
+    performSubmit() {
+        if (this.loading()) {
+            return;
+        }
         this.submitted.set(true);
         const group = this.formGroup();
         if (group.invalid) {
             return;
         }
-        // `.value` excludes disabled controls entirely — `getRawValue()` keeps
+        // `.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());
@@ -346,7 +578,7 @@ class FormBuilder {
     // 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
+    // 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) {
@@ -377,12 +609,12 @@ class FormBuilder {
         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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, serverErrors: { classPropertyName: "serverErrors", publicName: "serverErrors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit", valueChange: "valueChange" }, 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{--zhunam-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;--zhunam-font-size: .9375rem;--zhunam-text: #1f2937;--zhunam-text-secondary: #374151;--zhunam-border: #d1d5db;--zhunam-error: #dc2626;--zhunam-primary: #3b82f6;--zhunam-primary-content: #fff;--zhunam-focus: var(--zhunam-primary, #3b82f6);--zhunam-radius: .5rem;--zhunam-spacing: 1rem;--zhunam-form-control-padding-y: .5rem;--zhunam-form-control-padding-x: .75rem;--zhunam-transition-duration: .15s;display:block;font-family:var(--zhunam-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);font-size:var(--zhunam-font-size, .9375rem);color:var(--zhunam-text, #1f2937)}.fb-form{display:flex;flex-direction:column;gap:var(--zhunam-spacing, 1rem);width:100%}.fb-fields-grid{display:grid;grid-template-columns:repeat(var(--fb-columns, 1),1fr);gap:var(--zhunam-spacing, 1rem)}.fb-field{display:flex;flex-direction:column;gap:calc(var(--zhunam-spacing, 1rem) / 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(--zhunam-text-secondary, #374151);padding:0;border:none}.fb-control{box-sizing:border-box;width:100%;font:inherit;color:inherit;padding:var(--zhunam-form-control-padding-y, .5rem) var(--zhunam-form-control-padding-x, .75rem);border:1px solid var(--zhunam-border, #d1d5db);border-radius:var(--zhunam-radius, .5rem);background:transparent;transition:border-color var(--zhunam-transition-duration, .15s) ease}.fb-control:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:-1px;border-color:var(--zhunam-focus, var(--zhunam-primary, #3b82f6))}textarea.fb-control{min-height:5rem;resize:vertical}select.fb-control{cursor:pointer}.fb-radio-group{display:flex;flex-direction:column;gap:calc(var(--zhunam-spacing, 1rem) / 2.5)}.fb-radio-option,.fb-checkbox-option{display:inline-flex;align-items:center;gap:.5rem;font-weight:400;color:var(--zhunam-text, #1f2937);cursor:pointer}.fb-radio-option input,.fb-checkbox-option input{accent-color:var(--zhunam-primary, #3b82f6)}.fb-radio-option input:focus-visible,.fb-checkbox-option input:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.fb-error{margin:0;font-size:.8125rem;color:var(--zhunam-error, #dc2626)}.fb-submit{appearance:none;align-self:flex-start;border:none;border-radius:var(--zhunam-radius, .5rem);background:var(--zhunam-primary, #3b82f6);color:var(--zhunam-primary-content, #fff);padding:var(--zhunam-form-control-padding-y, .5rem) 1.25rem;font:inherit;font-weight:600;cursor:pointer;transition:opacity var(--zhunam-transition-duration, .15s) ease}.fb-submit:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));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 });
+    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 }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, serverErrors: { classPropertyName: "serverErrors", publicName: "serverErrors", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, hideSubmit: { classPropertyName: "hideSubmit", publicName: "hideSubmit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formSubmit: "formSubmit", valueChange: "valueChange" }, ngImport: i0, template: "<form class=\"fb-form\" [formGroup]=\"formGroup()\" (ngSubmit)=\"performSubmit()\" 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\" [class.fb-switch-option]=\"isSwitch(field)\">\r\n              <input\r\n                type=\"checkbox\"\r\n                class=\"fb-checkbox-input\"\r\n                [class.sr-only]=\"isSwitch(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]=\"describedByFor(field)\"\r\n              />\r\n              @if (isSwitch(field)) {\r\n                <span class=\"fb-switch-track\" aria-hidden=\"true\">\r\n                  <span class=\"fb-switch-thumb\"></span>\r\n                </span>\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              [class.fb-segmented-group]=\"isSegmented(field)\"\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\" [class.fb-segmented-option]=\"isSegmented(field)\">\r\n                  <input\r\n                    type=\"radio\"\r\n                    class=\"fb-radio-input\"\r\n                    [class.sr-only]=\"isSegmented(field)\"\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]=\"optionDescribedByFor(field, option)\"\r\n                  />\r\n                  @if (isSegmented(field)) {\r\n                    <span class=\"fb-segmented-pill\">{{ option.label }}</span>\r\n                  } @else {\r\n                    {{ option.label }}\r\n                  }\r\n                  @if (option.description; as description) {\r\n                    <span class=\"fb-option-description\" [id]=\"optionDescriptionId(field, option)\">{{ description }}</span>\r\n                  }\r\n                </label>\r\n              }\r\n            </fieldset>\r\n          }\r\n          @case ('password') {\r\n            <div class=\"fb-password-wrapper\">\r\n              <input\r\n                class=\"fb-control\"\r\n                [id]=\"fieldId(field)\"\r\n                [type]=\"passwordInputType(field)\"\r\n                [formControl]=\"controlFor(field)\"\r\n                [placeholder]=\"field.placeholder ?? ''\"\r\n                [disabled]=\"!!field.disabled\"\r\n                [readOnly]=\"!!field.readonly\"\r\n                [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n                [attr.aria-describedby]=\"describedByFor(field)\"\r\n              />\r\n              @if (showPasswordToggleFor(field)) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-password-toggle\"\r\n                  [attr.aria-pressed]=\"isPasswordVisible(field)\"\r\n                  [attr.aria-label]=\"isPasswordVisible(field) ? messages.hidePassword() : messages.showPassword()\"\r\n                  (click)=\"togglePasswordVisibility(field)\"\r\n                >\r\n                  @if (isPasswordVisible(field)) {\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 3l18 18M10.58 10.58a2 2 0 002.83 2.83M9.88 4.24A9.9 9.9 0 0112 4c5 0 9 4 10 8-.32 1.12-.86 2.19-1.57 3.14M6.6 6.6C3.9 8.14 2.06 10.6 2 12c.66 2.34 2.19 4.34 4.19 5.68M14.12 14.12A3 3 0 019.88 9.88\" />\r\n                    </svg>\r\n                  } @else {\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\r\n                      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  }\r\n                </button>\r\n              }\r\n            </div>\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              [readOnly]=\"!!field.readonly\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"describedByFor(field)\"\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]=\"describedByFor(field)\"\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              [readOnly]=\"!!field.readonly\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"describedByFor(field)\"\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        } @else if (field.hint) {\r\n          <p class=\"fb-hint\" [id]=\"hintId(field)\">{{ field.hint }}</p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (!hideSubmit()) {\r\n    <button type=\"submit\" class=\"fb-submit\" [disabled]=\"isSubmitDisabled()\">{{ submitLabel() ?? messages.submit() }}</button>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;font-family:var(--zhunam-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);font-size:var(--zhunam-font-size, .9375rem);color:var(--zhunam-text, #1f2937)}.fb-form{display:flex;flex-direction:column;gap:var(--zhunam-spacing, 1rem);width:100%}.fb-fields-grid{display:grid;grid-template-columns:repeat(var(--fb-columns, 1),1fr);gap:var(--zhunam-spacing, 1rem)}.fb-field{display:flex;flex-direction:column;gap:calc(var(--zhunam-spacing, 1rem) / 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(--zhunam-text-secondary, #374151);padding:0;border:none}.fb-control{box-sizing:border-box;width:100%;font:inherit;color:inherit;padding:var(--zhunam-form-control-padding-y, .5rem) var(--zhunam-form-control-padding-x, .75rem);border:1px solid var(--zhunam-border, #d1d5db);border-radius:var(--zhunam-radius, .5rem);background:transparent;transition:border-color var(--zhunam-transition-duration, .15s) ease}.fb-control:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:-1px;border-color:var(--zhunam-focus, var(--zhunam-primary, #3b82f6))}textarea.fb-control{min-height:5rem;resize:vertical}select.fb-control{cursor:pointer}.fb-radio-group{display:flex;flex-direction:column;gap:calc(var(--zhunam-spacing, 1rem) / 2.5)}.fb-radio-option,.fb-checkbox-option{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-weight:400;color:var(--zhunam-text, #1f2937);cursor:pointer}.fb-radio-option input,.fb-checkbox-option input{accent-color:var(--zhunam-accent, var(--zhunam-primary, #3b82f6))}.fb-radio-option input:focus-visible,.fb-checkbox-option input:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fb-switch-track{position:relative;display:inline-block;flex-shrink:0;width:2.25rem;height:1.25rem;border-radius:9999px;background:var(--zhunam-border, #d1d5db);transition:background-color var(--zhunam-transition-duration, .15s) ease}.fb-switch-thumb{position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;border-radius:50%;background:#fff;transition:transform var(--zhunam-transition-duration, .15s) ease}.fb-checkbox-input:checked+.fb-switch-track{background:var(--zhunam-accent, var(--zhunam-primary, #3b82f6))}.fb-checkbox-input:checked+.fb-switch-track .fb-switch-thumb{transform:translate(1rem)}.fb-checkbox-input:focus-visible+.fb-switch-track{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.fb-segmented-group{flex-direction:row;flex-wrap:wrap;gap:.5rem}.fb-segmented-pill{display:inline-flex;align-items:center;padding:.375rem .875rem;border-radius:9999px;background:var(--zhunam-segmented-bg, #fff);color:var(--zhunam-text-secondary, #374151);font-weight:600;box-shadow:0 2px 10px #0f252a14;transition:background-color .3s ease,color .3s ease}.fb-radio-input:checked+.fb-segmented-pill{background:var(--zhunam-primary, #3b82f6);color:var(--zhunam-primary-content, #fff)}.fb-radio-input:focus-visible+.fb-segmented-pill{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.fb-hint{margin:0;font-size:.8125rem;color:var(--zhunam-text-secondary, #374151)}.fb-option-description{flex-basis:100%;font-size:.8125rem;color:var(--zhunam-text-secondary, #374151)}@media(prefers-reduced-motion:reduce){.fb-switch-track,.fb-switch-thumb,.fb-segmented-pill{transition-duration:.01ms}}.fb-password-wrapper{position:relative;display:flex}.fb-password-wrapper .fb-control{padding-right:calc(var(--zhunam-form-control-padding-x, .75rem) + 1.75rem)}.fb-password-toggle{appearance:none;position:absolute;top:50%;right:var(--zhunam-form-control-padding-x, .75rem);transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--zhunam-text-secondary, #374151);padding:0;cursor:pointer;line-height:0}.fb-password-toggle svg{width:1.125rem;height:1.125rem}.fb-password-toggle:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.fb-error{margin:0;font-size:.8125rem;color:var(--zhunam-error-text, var(--zhunam-error, #dc2626))}.fb-submit{appearance:none;align-self:flex-start;width:var(--zhunam-submit-width, auto);border:none;border-radius:var(--zhunam-radius, .5rem);background:var(--zhunam-primary, #3b82f6);color:var(--zhunam-primary-content, #fff);padding:var(--zhunam-form-control-padding-y, .5rem) 1.25rem;font:inherit;font-weight:600;cursor:pointer;transition:opacity var(--zhunam-transition-duration, .15s) ease}.fb-submit:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));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{--zhunam-font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;--zhunam-font-size: .9375rem;--zhunam-text: #1f2937;--zhunam-text-secondary: #374151;--zhunam-border: #d1d5db;--zhunam-error: #dc2626;--zhunam-primary: #3b82f6;--zhunam-primary-content: #fff;--zhunam-focus: var(--zhunam-primary, #3b82f6);--zhunam-radius: .5rem;--zhunam-spacing: 1rem;--zhunam-form-control-padding-y: .5rem;--zhunam-form-control-padding-x: .75rem;--zhunam-transition-duration: .15s;display:block;font-family:var(--zhunam-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);font-size:var(--zhunam-font-size, .9375rem);color:var(--zhunam-text, #1f2937)}.fb-form{display:flex;flex-direction:column;gap:var(--zhunam-spacing, 1rem);width:100%}.fb-fields-grid{display:grid;grid-template-columns:repeat(var(--fb-columns, 1),1fr);gap:var(--zhunam-spacing, 1rem)}.fb-field{display:flex;flex-direction:column;gap:calc(var(--zhunam-spacing, 1rem) / 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(--zhunam-text-secondary, #374151);padding:0;border:none}.fb-control{box-sizing:border-box;width:100%;font:inherit;color:inherit;padding:var(--zhunam-form-control-padding-y, .5rem) var(--zhunam-form-control-padding-x, .75rem);border:1px solid var(--zhunam-border, #d1d5db);border-radius:var(--zhunam-radius, .5rem);background:transparent;transition:border-color var(--zhunam-transition-duration, .15s) ease}.fb-control:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:-1px;border-color:var(--zhunam-focus, var(--zhunam-primary, #3b82f6))}textarea.fb-control{min-height:5rem;resize:vertical}select.fb-control{cursor:pointer}.fb-radio-group{display:flex;flex-direction:column;gap:calc(var(--zhunam-spacing, 1rem) / 2.5)}.fb-radio-option,.fb-checkbox-option{display:inline-flex;align-items:center;gap:.5rem;font-weight:400;color:var(--zhunam-text, #1f2937);cursor:pointer}.fb-radio-option input,.fb-checkbox-option input{accent-color:var(--zhunam-primary, #3b82f6)}.fb-radio-option input:focus-visible,.fb-checkbox-option input:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.fb-error{margin:0;font-size:.8125rem;color:var(--zhunam-error, #dc2626)}.fb-submit{appearance:none;align-self:flex-start;border:none;border-radius:var(--zhunam-radius, .5rem);background:var(--zhunam-primary, #3b82f6);color:var(--zhunam-primary-content, #fff);padding:var(--zhunam-form-control-padding-y, .5rem) 1.25rem;font:inherit;font-weight:600;cursor:pointer;transition:opacity var(--zhunam-transition-duration, .15s) ease}.fb-submit:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));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"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], serverErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverErrors", required: false }] }] } });
+            args: [{ selector: 'lib-form-builder', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<form class=\"fb-form\" [formGroup]=\"formGroup()\" (ngSubmit)=\"performSubmit()\" 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\" [class.fb-switch-option]=\"isSwitch(field)\">\r\n              <input\r\n                type=\"checkbox\"\r\n                class=\"fb-checkbox-input\"\r\n                [class.sr-only]=\"isSwitch(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]=\"describedByFor(field)\"\r\n              />\r\n              @if (isSwitch(field)) {\r\n                <span class=\"fb-switch-track\" aria-hidden=\"true\">\r\n                  <span class=\"fb-switch-thumb\"></span>\r\n                </span>\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              [class.fb-segmented-group]=\"isSegmented(field)\"\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\" [class.fb-segmented-option]=\"isSegmented(field)\">\r\n                  <input\r\n                    type=\"radio\"\r\n                    class=\"fb-radio-input\"\r\n                    [class.sr-only]=\"isSegmented(field)\"\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]=\"optionDescribedByFor(field, option)\"\r\n                  />\r\n                  @if (isSegmented(field)) {\r\n                    <span class=\"fb-segmented-pill\">{{ option.label }}</span>\r\n                  } @else {\r\n                    {{ option.label }}\r\n                  }\r\n                  @if (option.description; as description) {\r\n                    <span class=\"fb-option-description\" [id]=\"optionDescriptionId(field, option)\">{{ description }}</span>\r\n                  }\r\n                </label>\r\n              }\r\n            </fieldset>\r\n          }\r\n          @case ('password') {\r\n            <div class=\"fb-password-wrapper\">\r\n              <input\r\n                class=\"fb-control\"\r\n                [id]=\"fieldId(field)\"\r\n                [type]=\"passwordInputType(field)\"\r\n                [formControl]=\"controlFor(field)\"\r\n                [placeholder]=\"field.placeholder ?? ''\"\r\n                [disabled]=\"!!field.disabled\"\r\n                [readOnly]=\"!!field.readonly\"\r\n                [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n                [attr.aria-describedby]=\"describedByFor(field)\"\r\n              />\r\n              @if (showPasswordToggleFor(field)) {\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"fb-password-toggle\"\r\n                  [attr.aria-pressed]=\"isPasswordVisible(field)\"\r\n                  [attr.aria-label]=\"isPasswordVisible(field) ? messages.hidePassword() : messages.showPassword()\"\r\n                  (click)=\"togglePasswordVisibility(field)\"\r\n                >\r\n                  @if (isPasswordVisible(field)) {\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M3 3l18 18M10.58 10.58a2 2 0 002.83 2.83M9.88 4.24A9.9 9.9 0 0112 4c5 0 9 4 10 8-.32 1.12-.86 2.19-1.57 3.14M6.6 6.6C3.9 8.14 2.06 10.6 2 12c.66 2.34 2.19 4.34 4.19 5.68M14.12 14.12A3 3 0 019.88 9.88\" />\r\n                    </svg>\r\n                  } @else {\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\r\n                      <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\" />\r\n                      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n                    </svg>\r\n                  }\r\n                </button>\r\n              }\r\n            </div>\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              [readOnly]=\"!!field.readonly\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"describedByFor(field)\"\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]=\"describedByFor(field)\"\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              [readOnly]=\"!!field.readonly\"\r\n              [attr.aria-invalid]=\"activeErrorFor(field) ? true : null\"\r\n              [attr.aria-describedby]=\"describedByFor(field)\"\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        } @else if (field.hint) {\r\n          <p class=\"fb-hint\" [id]=\"hintId(field)\">{{ field.hint }}</p>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  @if (!hideSubmit()) {\r\n    <button type=\"submit\" class=\"fb-submit\" [disabled]=\"isSubmitDisabled()\">{{ submitLabel() ?? messages.submit() }}</button>\r\n  }\r\n</form>\r\n", styles: [":host{display:block;font-family:var(--zhunam-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);font-size:var(--zhunam-font-size, .9375rem);color:var(--zhunam-text, #1f2937)}.fb-form{display:flex;flex-direction:column;gap:var(--zhunam-spacing, 1rem);width:100%}.fb-fields-grid{display:grid;grid-template-columns:repeat(var(--fb-columns, 1),1fr);gap:var(--zhunam-spacing, 1rem)}.fb-field{display:flex;flex-direction:column;gap:calc(var(--zhunam-spacing, 1rem) / 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(--zhunam-text-secondary, #374151);padding:0;border:none}.fb-control{box-sizing:border-box;width:100%;font:inherit;color:inherit;padding:var(--zhunam-form-control-padding-y, .5rem) var(--zhunam-form-control-padding-x, .75rem);border:1px solid var(--zhunam-border, #d1d5db);border-radius:var(--zhunam-radius, .5rem);background:transparent;transition:border-color var(--zhunam-transition-duration, .15s) ease}.fb-control:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:-1px;border-color:var(--zhunam-focus, var(--zhunam-primary, #3b82f6))}textarea.fb-control{min-height:5rem;resize:vertical}select.fb-control{cursor:pointer}.fb-radio-group{display:flex;flex-direction:column;gap:calc(var(--zhunam-spacing, 1rem) / 2.5)}.fb-radio-option,.fb-checkbox-option{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-weight:400;color:var(--zhunam-text, #1f2937);cursor:pointer}.fb-radio-option input,.fb-checkbox-option input{accent-color:var(--zhunam-accent, var(--zhunam-primary, #3b82f6))}.fb-radio-option input:focus-visible,.fb-checkbox-option input:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.fb-switch-track{position:relative;display:inline-block;flex-shrink:0;width:2.25rem;height:1.25rem;border-radius:9999px;background:var(--zhunam-border, #d1d5db);transition:background-color var(--zhunam-transition-duration, .15s) ease}.fb-switch-thumb{position:absolute;top:.125rem;left:.125rem;width:1rem;height:1rem;border-radius:50%;background:#fff;transition:transform var(--zhunam-transition-duration, .15s) ease}.fb-checkbox-input:checked+.fb-switch-track{background:var(--zhunam-accent, var(--zhunam-primary, #3b82f6))}.fb-checkbox-input:checked+.fb-switch-track .fb-switch-thumb{transform:translate(1rem)}.fb-checkbox-input:focus-visible+.fb-switch-track{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.fb-segmented-group{flex-direction:row;flex-wrap:wrap;gap:.5rem}.fb-segmented-pill{display:inline-flex;align-items:center;padding:.375rem .875rem;border-radius:9999px;background:var(--zhunam-segmented-bg, #fff);color:var(--zhunam-text-secondary, #374151);font-weight:600;box-shadow:0 2px 10px #0f252a14;transition:background-color .3s ease,color .3s ease}.fb-radio-input:checked+.fb-segmented-pill{background:var(--zhunam-primary, #3b82f6);color:var(--zhunam-primary-content, #fff)}.fb-radio-input:focus-visible+.fb-segmented-pill{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.fb-hint{margin:0;font-size:.8125rem;color:var(--zhunam-text-secondary, #374151)}.fb-option-description{flex-basis:100%;font-size:.8125rem;color:var(--zhunam-text-secondary, #374151)}@media(prefers-reduced-motion:reduce){.fb-switch-track,.fb-switch-thumb,.fb-segmented-pill{transition-duration:.01ms}}.fb-password-wrapper{position:relative;display:flex}.fb-password-wrapper .fb-control{padding-right:calc(var(--zhunam-form-control-padding-x, .75rem) + 1.75rem)}.fb-password-toggle{appearance:none;position:absolute;top:50%;right:var(--zhunam-form-control-padding-x, .75rem);transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--zhunam-text-secondary, #374151);padding:0;cursor:pointer;line-height:0}.fb-password-toggle svg{width:1.125rem;height:1.125rem}.fb-password-toggle:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));outline-offset:2px}.fb-error{margin:0;font-size:.8125rem;color:var(--zhunam-error-text, var(--zhunam-error, #dc2626))}.fb-submit{appearance:none;align-self:flex-start;width:var(--zhunam-submit-width, auto);border:none;border-radius:var(--zhunam-radius, .5rem);background:var(--zhunam-primary, #3b82f6);color:var(--zhunam-primary-content, #fff);padding:var(--zhunam-form-control-padding-y, .5rem) 1.25rem;font:inherit;font-weight:600;cursor:pointer;transition:opacity var(--zhunam-transition-duration, .15s) ease}.fb-submit:focus-visible{outline:2px solid var(--zhunam-focus, var(--zhunam-primary, #3b82f6));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"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], serverErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "serverErrors", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], hideSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSubmit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }] } });
 
 /**
  * NgModule wrapper for `FormBuilder<T>`, for consumers still on a
@@ -419,5 +651,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { FormBuilder, FormBuilderModule };
+export { FORM_BUILDER_MESSAGES, FORM_BUILDER_MESSAGES_EN, FORM_BUILDER_MESSAGES_ES, FormBuilder, FormBuilderModule, provideFormBuilderMessages };
 //# sourceMappingURL=zhunam-form-builder.mjs.map