@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-dynamic-form.mjs

@@ -0,0 +1,1581 @@
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, Injector, ElementRef, contentChildren, model, booleanAttribute, output, computed, signal, effect, untracked, DestroyRef, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { Validators, FormGroup, FormArray, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { injectCbTranslation, cbFormat } from '@caribeng/ui';
+import { CbButton } from '@caribeng/ui/button';
+import { CbCheckbox } from '@caribeng/ui/checkbox';
+import { CbChips } from '@caribeng/ui/chips';
+import { CbColorPicker } from '@caribeng/ui/colorpicker';
+import { CbDatepicker } from '@caribeng/ui/datepicker';
+import { CbIcon } from '@caribeng/ui/icon';
+import { CbInput } from '@caribeng/ui/input';
+import { CbInputMask } from '@caribeng/ui/inputmask';
+import { CbInputNumber } from '@caribeng/ui/input-number';
+import { CbMultiSelect } from '@caribeng/ui/multiselect';
+import { CbPassword } from '@caribeng/ui/password';
+import { CbRadio, CbRadioGroup } from '@caribeng/ui/radio';
+import { CbRating } from '@caribeng/ui/rating';
+import { CbSelect } from '@caribeng/ui/select';
+import { CbSelectButton } from '@caribeng/ui/selectbutton';
+import { CbSlider } from '@caribeng/ui/slider';
+import { CbTextarea } from '@caribeng/ui/textarea';
+import { CbToggle } from '@caribeng/ui/toggle';
+
+/** Tipos que son solo diseño (no tienen valor). */
+const LAYOUT_TYPES = new Set(['heading', 'paragraph', 'divider']);
+function isLayout(field) {
+    return LAYOUT_TYPES.has(field.type ?? '');
+}
+/** Pasos del esquema (sin `steps`, un único paso con todo). */
+function stepsOf(schema) {
+    if (schema.steps?.length)
+        return schema.steps;
+    return [{ title: '', fields: schema.fields, sections: schema.sections }];
+}
+/** Secciones de un paso (los campos sueltos forman una sección sin título), con los campos en su orden. */
+function sectionsOf(step) {
+    const out = [];
+    if (step.fields?.length)
+        out.push({ fields: step.fields });
+    return [...out, ...(step.sections ?? [])].map((s) => ({ ...s, fields: ordered(s.fields) }));
+}
+/** Campos ordenados por `order` (los que no lo tienen, en su posición). */
+function ordered(fields) {
+    return fields
+        .map((f, i) => ({ f, i }))
+        .sort((a, b) => (a.f.order ?? a.i) - (b.f.order ?? b.i) || a.i - b.i)
+        .map((x) => x.f);
+}
+/** Todos los campos de valor del primer nivel del esquema (en todos los pasos). */
+function fieldsOf(schema) {
+    return stepsOf(schema)
+        .flatMap((s) => sectionsOf(s))
+        .flatMap((s) => s.fields)
+        .filter((f) => !isLayout(f) && !!f.key);
+}
+/** Valor responsive resuelto en los cuatro tamaños (cada uno hereda el anterior). */
+function responsive(value, fallback) {
+    if (value === undefined || value === null)
+        return { base: fallback, sm: fallback, md: fallback, lg: fallback };
+    if (typeof value !== 'object')
+        return { base: value, sm: value, md: value, lg: value };
+    const v = value;
+    const base = v.base ?? fallback;
+    const sm = v.sm ?? base;
+    const md = v.md ?? sm;
+    const lg = v.lg ?? md;
+    return { base, sm, md, lg };
+}
+function isFilled(value) {
+    if (value === null || value === undefined || value === '' || value === false)
+        return false;
+    if (Array.isArray(value))
+        return value.length > 0;
+    return true;
+}
+function sameValue(a, b) {
+    if (a instanceof Date && b instanceof Date)
+        return a.getTime() === b.getTime();
+    return a === b;
+}
+/** Evalúa una condición contra el valor actual del formulario. */
+function matches(condition, value) {
+    if (!condition)
+        return true;
+    if (typeof condition === 'function')
+        return condition(value);
+    const rules = Array.isArray(condition) ? condition : [condition];
+    return rules.every((rule) => {
+        const v = value[rule.field];
+        if ('equals' in rule && !(Array.isArray(v) ? v.includes(rule.equals) : sameValue(v, rule.equals)))
+            return false;
+        if ('notEquals' in rule && sameValue(v, rule.notEquals))
+            return false;
+        if (rule.in && !rule.in.some((x) => sameValue(x, v)))
+            return false;
+        if (rule.filled !== undefined && isFilled(v) !== rule.filled)
+            return false;
+        return true;
+    });
+}
+/** Valor inicial de un campo, convertido al tipo de su control. */
+function initialValue(field) {
+    const v = field.default;
+    switch (field.type ?? 'text') {
+        case 'checkbox':
+        case 'toggle':
+            return !!v;
+        case 'multiselect':
+        case 'chips':
+            return Array.isArray(v) ? [...v] : [];
+        case 'number':
+        case 'slider':
+        case 'rating':
+            return typeof v === 'number' ? v : field.type === 'number' ? null : (field.min ?? 0);
+        case 'date': {
+            if (v instanceof Date)
+                return v;
+            const m = typeof v === 'string' ? /^(\d{4})-(\d{2})-(\d{2})/.exec(v) : null;
+            return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
+        }
+        case 'select':
+        case 'radio':
+        case 'buttons':
+            return v ?? null;
+        case 'color':
+            return typeof v === 'string' ? v : '#2563eb';
+        default:
+            return typeof v === 'string' ? v : v == null ? '' : v;
+    }
+}
+/** Obligatorio que entiende casillas (`true`) y listas (al menos un elemento). */
+const requiredValidator = (c) => (isFilled(c.value) ? null : { required: true });
+/** Validadores de un campo según su esquema (`required` aparte, porque puede ser condicional). */
+function validatorsOf(field, required) {
+    const v = [];
+    if (required)
+        v.push(requiredValidator);
+    const type = field.type ?? 'text';
+    if (field.min !== undefined && (type === 'number' || type === 'slider'))
+        v.push(Validators.min(field.min));
+    if (field.max !== undefined && (type === 'number' || type === 'slider'))
+        v.push(Validators.max(field.max));
+    if (field.minLength !== undefined)
+        v.push(Validators.minLength(field.minLength));
+    if (field.maxLength !== undefined)
+        v.push(Validators.maxLength(field.maxLength));
+    if (type === 'email')
+        v.push(Validators.email);
+    if (type === 'url')
+        v.push(Validators.pattern(/^https?:\/\/\S+\.\S+$/));
+    if (field.pattern)
+        v.push(Validators.pattern(field.pattern));
+    if (field.validators)
+        v.push(...field.validators);
+    return v;
+}
+/** Comparable de una regla (fecha → tiempo, texto numérico → número). */
+function comparable(v) {
+    if (v === null || v === undefined || v === '')
+        return null;
+    if (v instanceof Date)
+        return v.getTime();
+    if (typeof v === 'number')
+        return v;
+    const n = Number(v);
+    return Number.isFinite(n) && String(v).trim() !== '' ? n : String(v);
+}
+/** Error de la primera regla entre campos que no se cumple (o `null`). */
+function checkRules(rules, value, scope) {
+    if (!rules?.length || !isFilled(value))
+        return null;
+    const a = comparable(value);
+    for (const r of rules) {
+        const other = (k) => (k ? comparable(scope[k]) : null);
+        if (r.equalsField && !sameValue(value, scope[r.equalsField]) && a !== other(r.equalsField))
+            return r;
+        if (r.notEqualsField && (sameValue(value, scope[r.notEqualsField]) || a === other(r.notEqualsField)))
+            return r;
+        const cmp = (k, ok) => {
+            const b = other(k);
+            return k && a !== null && b !== null && !ok(a, b);
+        };
+        if (cmp(r.gteField, (x, y) => x >= y))
+            return r;
+        if (cmp(r.lteField, (x, y) => x <= y))
+            return r;
+        if (cmp(r.gtField, (x, y) => x > y))
+            return r;
+        if (cmp(r.ltField, (x, y) => x < y))
+            return r;
+    }
+    return null;
+}
+/** Mensaje del primer error de un control (`tr` traduce los textos del esquema). */
+function errorMessage(field, errors, texts, tr = (t) => (typeof t === 'string' ? t : '')) {
+    if (!errors)
+        return null;
+    const key = Object.keys(errors)[0];
+    const custom = field.messages?.[key];
+    if (custom)
+        return tr(custom);
+    const e = errors[key];
+    switch (key) {
+        case 'required':
+            return texts.required;
+        case 'min':
+            return texts.min.replace('{0}', String(e.min));
+        case 'max':
+            return texts.max.replace('{0}', String(e.max));
+        case 'minlength':
+            return field.messages?.['minLength'] ? tr(field.messages['minLength']) : texts.minLength.replace('{0}', String(e.requiredLength));
+        case 'maxlength':
+            return field.messages?.['maxLength'] ? tr(field.messages['maxLength']) : texts.maxLength.replace('{0}', String(e.requiredLength));
+        case 'email':
+            return texts.email;
+        case 'pattern':
+            return texts.pattern;
+        case 'rule':
+            return typeof e === 'string' ? e : texts.invalid;
+        default:
+            return typeof e === 'string' ? e : texts.invalid;
+    }
+}
+function tokenize(src) {
+    const out = [];
+    let i = 0;
+    while (i < src.length) {
+        const ch = src[i];
+        if (/\s/.test(ch)) {
+            i++;
+        }
+        else if (/[0-9.]/.test(ch)) {
+            let j = i;
+            while (j < src.length && /[0-9.]/.test(src[j]))
+                j++;
+            out.push({ t: 'num', v: Number(src.slice(i, j)) });
+            i = j;
+        }
+        else if (/[A-Za-z_]/.test(ch)) {
+            let j = i;
+            while (j < src.length && /[A-Za-z0-9_.]/.test(src[j]))
+                j++;
+            out.push({ t: 'id', v: src.slice(i, j) });
+            i = j;
+        }
+        else if ('+-*/(),'.includes(ch)) {
+            out.push({ t: 'op', v: ch });
+            i++;
+        }
+        else
+            throw new Error(`Carácter no válido en la fórmula: ${ch}`);
+    }
+    return out;
+}
+function num(v) {
+    if (typeof v === 'number')
+        return Number.isFinite(v) ? v : 0;
+    if (v instanceof Date)
+        return v.getTime();
+    const n = Number(v);
+    return Number.isFinite(n) ? n : 0;
+}
+/** Valor de un identificador (`precio`, `lineas.subtotal` → lista). */
+function lookup(name, scope) {
+    const [head, ...rest] = name.split('.');
+    let v = scope[head];
+    for (const part of rest) {
+        v = Array.isArray(v) ? v.map((x) => x?.[part]) : v?.[part];
+    }
+    return v;
+}
+const FUNCS = {
+    round: ([x, d]) => {
+        const f = 10 ** num(d ?? 0);
+        return Math.round(num(x) * f) / f;
+    },
+    floor: ([x]) => Math.floor(num(x)),
+    ceil: ([x]) => Math.ceil(num(x)),
+    abs: ([x]) => Math.abs(num(x)),
+    min: (args) => Math.min(...args.flatMap((a) => (Array.isArray(a) ? a.map(num) : [num(a)]))),
+    max: (args) => Math.max(...args.flatMap((a) => (Array.isArray(a) ? a.map(num) : [num(a)]))),
+    sum: (args) => args.flatMap((a) => (Array.isArray(a) ? a.map(num) : [num(a)])).reduce((s, x) => s + x, 0),
+    count: (args) => args.flatMap((a) => (Array.isArray(a) ? a : [a])).filter(isFilled).length,
+};
+/**
+ * Evalúa una fórmula aritmética de forma segura (sin `eval`): números, campos,
+ * `+ - * /`, paréntesis y las funciones `round`, `floor`, `ceil`, `abs`, `min`,
+ * `max`, `sum` y `count` (estas tres aceptan listas: `sum(lineas.subtotal)`).
+ */
+function evaluateFormula(formula, scope) {
+    const tokens = tokenize(formula);
+    let pos = 0;
+    const peek = () => tokens[pos];
+    const take = (v) => {
+        const tk = tokens[pos++];
+        if (!tk || (v !== undefined && (tk.t !== 'op' || tk.v !== v)))
+            throw new Error(`Fórmula no válida: ${formula}`);
+        return tk;
+    };
+    const expr = () => {
+        let left = term();
+        while (peek()?.t === 'op' && (peek().v === '+' || peek().v === '-')) {
+            const op = take().v;
+            const right = term();
+            left = op === '+' ? num(left) + num(right) : num(left) - num(right);
+        }
+        return left;
+    };
+    const term = () => {
+        let left = factor();
+        while (peek()?.t === 'op' && (peek().v === '*' || peek().v === '/')) {
+            const op = take().v;
+            const right = factor();
+            left = op === '*' ? num(left) * num(right) : num(right) === 0 ? 0 : num(left) / num(right);
+        }
+        return left;
+    };
+    const factor = () => {
+        const tk = take();
+        if (tk.t === 'num')
+            return tk.v;
+        if (tk.t === 'op' && tk.v === '-')
+            return -num(factor());
+        if (tk.t === 'op' && tk.v === '(') {
+            const v = expr();
+            take(')');
+            return v;
+        }
+        if (tk.t === 'id') {
+            if (peek()?.t === 'op' && peek().v === '(') {
+                const fn = FUNCS[tk.v.toLowerCase()];
+                if (!fn)
+                    throw new Error(`Función desconocida: ${tk.v}`);
+                take('(');
+                const args = [];
+                if (!(peek()?.t === 'op' && peek().v === ')')) {
+                    args.push(expr());
+                    while (peek()?.t === 'op' && peek().v === ',') {
+                        take(',');
+                        args.push(expr());
+                    }
+                }
+                take(')');
+                return fn(args);
+            }
+            return lookup(tk.v, scope);
+        }
+        throw new Error(`Fórmula no válida: ${formula}`);
+    };
+    const result = expr();
+    if (pos < tokens.length)
+        throw new Error(`Fórmula no válida: ${formula}`);
+    return Math.round(num(result) * 1e8) / 1e8;
+}
+
+/** Plantilla de un tipo de campo propio: el campo con `type: 'nombre'` la usa. */
+class CbFormFieldTemplate {
+    constructor() {
+        this.name = input.required({ ...(ngDevMode ? { debugName: "name" } : /* istanbul ignore next */ {}), alias: 'cbFormField' });
+        this.template = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFormFieldTemplate, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CbFormFieldTemplate, isStandalone: true, selector: "ng-template[cbFormField]", inputs: { name: { classPropertyName: "name", publicName: "cbFormField", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbFormFieldTemplate, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[cbFormField]' }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "cbFormField", required: true }] }] } });
+/** Tipos cuyo control pinta su propia ayuda y error (y los asocia al campo). */
+const OWN_MESSAGES = new Set(['text', 'email', 'tel', 'url', 'number', 'textarea', 'date']);
+/** Tipos que llevan la etiqueta dentro del control (a la derecha de la casilla). */
+const INLINE_LABEL = new Set(['checkbox', 'toggle']);
+/** Tipos con un elemento nativo enlazable con `<label for>`. */
+const LABELABLE = new Set(['text', 'email', 'tel', 'url', 'password', 'number', 'textarea', 'date', 'mask']);
+/** Tipos que admiten etiqueta flotante (dentro de la caja del control). */
+const FLOATABLE = new Set(['text', 'email', 'tel', 'url', 'password', 'number', 'textarea', 'date', 'mask', 'select', 'multiselect']);
+const BUILT_IN = new Set(['text', 'email', 'password', 'tel', 'url', 'number', 'textarea', 'select', 'multiselect', 'radio', 'checkbox', 'toggle', 'date', 'slider', 'rating', 'chips', 'color', 'buttons', 'mask', 'group', 'heading', 'paragraph', 'divider']);
+let nextUid = 0;
+/**
+ * Formulario dinámico de CaribeNG: arma el formulario a partir de un esquema JSON.
+ *
+ * - Campos con tipo (texto, correo, número, lista, opciones, casilla, fecha, máscara…),
+ *   validación (`required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, reglas
+ *   entre campos) y mensajes propios, traducibles (`{ es, en }`).
+ * - Etiquetas encima, a la izquierda, a la derecha, flotantes u ocultas, por
+ *   formulario, sección o campo; columnas por tamaño de pantalla, orden, filas,
+ *   títulos, textos y separadores.
+ * - Campos condicionales, opciones que dependen de otro campo o se cargan de una
+ *   API, campos calculados con fórmulas, grupos repetibles y formulario por pasos.
+ * - Tipos propios con plantillas (`<ng-template cbFormField="firma">`).
+ *
+ * @example
+ * ```html
+ * <cb-dynamic-form [schema]="esquema" [(value)]="datos" (formSubmit)="guardar($event)" />
+ * ```
+ */
+class CbDynamicForm {
+    constructor() {
+        /** Textos de interfaz en el idioma activo (`provideCaribeNG({ locale })`). */
+        this.t = injectCbTranslation();
+        this.fmt = cbFormat;
+        this.ordered = ordered;
+        this.injector = inject(Injector);
+        this.host = inject(ElementRef);
+        this.uid = `cb-df-${++nextUid}`;
+        this.templates = contentChildren(CbFormFieldTemplate, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+        /** Esquema del formulario (campos, secciones o pasos, columnas, etiquetas…). */
+        this.schema = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "schema" }] : /* istanbul ignore next */ []));
+        /** Valor del formulario (bidireccional; los campos ocultos no se incluyen). */
+        this.value = model({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Disposición (atajo de `labelPosition`); si no, la del esquema. */
+        this.layout = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        /** Posición de las etiquetas; si no, la del esquema (encima por defecto). */
+        this.labelPosition = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+        /** Columnas; si no, las del esquema (1 por defecto). */
+        this.columns = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Ancho de la etiqueta a un lado; si no, el del esquema (`10rem`). */
+        this.labelWidth = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelWidth" }] : /* istanbul ignore next */ []));
+        /** Tamaño de los controles; si no, el del esquema (`md`). */
+        this.size = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Cargadores de opciones por nombre (`optionsLoader` en el esquema). */
+        this.loaders = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loaders" }] : /* istanbul ignore next */ []));
+        /** Traduce los textos del esquema que son claves (`'clientes.nombre'` → `'Nombre'`). */
+        this.translate = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "translate" }] : /* istanbul ignore next */ []));
+        /** Botones de enviar (y restablecer, si el esquema tiene `resetLabel`). */
+        this.actions = input(true, { ...(ngDevMode ? { debugName: "actions" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Deshabilita todo el formulario. */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /** Muestra el botón de enviar cargando (mientras se guarda). */
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.ariaLabel = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Se envió el formulario y es válido: el valor (sin los campos ocultos). */
+        this.formSubmit = output();
+        /** Se envió (o se intentó pasar de paso) con errores: cuáles (`key` y mensaje). */
+        this.formInvalid = output();
+        this.formReset = output();
+        /** Cambio de paso (índice desde 0). */
+        this.stepChange = output();
+        this.steps = computed(() => stepsOf(this.schema()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.step = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        this.sections = computed(() => sectionsOf(this.steps()[Math.min(this.step(), this.steps().length - 1)]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        this.fields = computed(() => fieldsOf(this.schema()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+        this.basePosition = computed(() => {
+            const layout = this.layout() ?? this.schema().layout;
+            return this.labelPosition() ?? this.schema().labelPosition ?? (layout === 'horizontal' ? 'left' : 'top');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "basePosition" }] : /* istanbul ignore next */ []));
+        this.labelWidthValue = computed(() => this.labelWidth() ?? this.schema().labelWidth ?? '10rem', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labelWidthValue" }] : /* istanbul ignore next */ []));
+        this.actionsLabelPosition = computed(() => (this.basePosition() === 'left' ? 'left' : 'top'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsLabelPosition" }] : /* istanbul ignore next */ []));
+        this.sizeValue = computed(() => this.size() ?? this.schema().size ?? 'md', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sizeValue" }] : /* istanbul ignore next */ []));
+        this.baseCols = computed(() => this.columns() ?? this.schema().columns ?? 1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseCols" }] : /* istanbul ignore next */ []));
+        /** El `FormGroup` que se arma con el esquema. */
+        this.form = signal(new FormGroup({}), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        /** Se incrementa con cada evento del formulario para recalcular estado y errores. */
+        this.tick = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tick" }] : /* istanbul ignore next */ []));
+        /** Paso cuyos errores se muestran (tras intentar avanzar o enviar). */
+        this.attempted = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "attempted" }] : /* istanbul ignore next */ []));
+        this.hidden = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.required = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.options = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.depsKeys = new Map();
+        this.announcement = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "announcement" }] : /* istanbul ignore next */ []));
+        this.lastEmitted = null;
+        this.subscription = null;
+        this.syncing = false;
+        this.texts = computed(() => {
+            const t = this.t();
+            return {
+                required: t.dynamicFormRequired,
+                min: t.dynamicFormMin,
+                max: t.dynamicFormMax,
+                minLength: t.dynamicFormMinLength,
+                maxLength: t.dynamicFormMaxLength,
+                email: t.dynamicFormEmail,
+                pattern: t.dynamicFormPattern,
+                invalid: t.dynamicFormInvalid,
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+        /** Errores que se listan arriba tras un envío o un intento de avanzar fallido. */
+        this.summary = computed(() => {
+            this.tick();
+            if (this.attempted() !== this.step())
+                return [];
+            const out = [];
+            const walk = (fields, group, path) => {
+                for (const f of fields) {
+                    if (isLayout(f) || !f.key)
+                        continue;
+                    const ctrl = group.controls[f.key];
+                    if (!ctrl || ctrl.disabled)
+                        continue;
+                    if (f.type === 'group') {
+                        if (f.repeatable)
+                            ctrl.controls.forEach((g, i) => walk(ordered(f.fields ?? []), g, [...path, f.key, i]));
+                        else
+                            walk(ordered(f.fields ?? []), ctrl, [...path, f.key]);
+                        continue;
+                    }
+                    if (ctrl.valid)
+                        continue;
+                    const label = path.length ? `${this.tr(f.label) || f.key} (${this.pathLabel(path)})` : this.tr(f.label) || f.key;
+                    out.push({ id: this.idOf(path, f.key), label, message: errorMessage(f, ctrl.errors, this.texts(), (x) => this.tr(x)) ?? '' });
+                }
+            };
+            for (const s of this.sections())
+                walk(s.fields, this.form(), []);
+            return out;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summary" }] : /* istanbul ignore next */ []));
+        // Cada esquema nuevo arma un FormGroup nuevo.
+        effect(() => {
+            const fields = this.fields();
+            untracked(() => {
+                this.step.set(0);
+                this.build(fields, this.value());
+            });
+        });
+        // Un valor que llega de fuera vuelve a armar el formulario con él.
+        effect(() => {
+            const value = this.value();
+            untracked(() => {
+                if (value === this.lastEmitted)
+                    return;
+                this.build(this.fields(), value);
+            });
+        });
+        effect(() => {
+            this.disabled();
+            untracked(() => {
+                this.sync();
+                this.tick.update((n) => n + 1);
+            });
+        });
+        inject(DestroyRef).onDestroy(() => this.subscription?.unsubscribe());
+    }
+    // --- API pública -------------------------------------------------------------------------
+    /** Valida y, si todo está bien, emite `formSubmit`; si no, muestra el resumen de errores. */
+    submit() {
+        if (this.step() < this.steps().length - 1) {
+            this.next();
+            return;
+        }
+        if (!this.validateStep(this.step()))
+            return;
+        // En un formulario por pasos se revisa también el resto (por si algo cambió).
+        for (let i = 0; i < this.steps().length; i++) {
+            if (!this.validateStep(i, false)) {
+                this.goTo(i);
+                this.validateStep(i);
+                return;
+            }
+        }
+        this.formSubmit.emit(this.currentValue());
+    }
+    /** Pasa al paso siguiente si los campos del actual son válidos. */
+    next() {
+        if (!this.validateStep(this.step()))
+            return;
+        this.goTo(this.step() + 1);
+    }
+    /** Vuelve al paso anterior (sin validar). */
+    back() {
+        this.goTo(this.step() - 1);
+    }
+    /** Vuelve a los valores iniciales del esquema. */
+    reset() {
+        this.attempted.set(-1);
+        this.step.set(0);
+        this.build(this.fields(), {});
+        this.formReset.emit();
+    }
+    /** Lleva el foco al control de un campo (por su `key` de primer nivel). */
+    focusField(key) {
+        this.focusById(this.idOf([], key));
+    }
+    // --- Plantilla ---------------------------------------------------------------------------
+    onSubmit(event) {
+        event.preventDefault();
+        this.submit();
+    }
+    /** Texto del esquema resuelto: por idioma (`{ es, en }`) y con `translate`. */
+    tr(text) {
+        if (text === undefined || text === null)
+            return '';
+        if (typeof text === 'string')
+            return this.translate()?.(text) ?? text;
+        const locale = this.t().intlLocale;
+        return text[locale] ?? text[locale.split('-')[0]] ?? Object.values(text)[0] ?? '';
+    }
+    rootCtx(section) {
+        const schema = this.schema();
+        return {
+            group: this.form(),
+            path: [],
+            opts: {
+                labelPosition: section.labelPosition ?? this.basePosition(),
+                labelAlign: section.labelAlign ?? schema.labelAlign ?? 'start',
+                labelWidth: section.labelWidth ?? this.labelWidthValue(),
+            },
+            cols: this.colsOf(section.columns ?? this.baseCols()),
+            size: section.size ?? this.sizeValue(),
+        };
+    }
+    childCtx(parent, f, group, index) {
+        return {
+            group,
+            path: index === null ? [...parent.path, f.key] : [...parent.path, f.key, index],
+            opts: {
+                labelPosition: f.labelPosition ?? parent.opts.labelPosition,
+                labelAlign: f.labelAlign ?? parent.opts.labelAlign,
+                labelWidth: f.labelWidth ?? parent.opts.labelWidth,
+            },
+            cols: this.colsOf(f.columns ?? 1),
+            size: f.size ?? parent.size,
+        };
+    }
+    /** Columnas por tamaño: un número fijo `n` es 1 en móvil y `n` desde 40rem. */
+    colsOf(value) {
+        if (typeof value === 'number')
+            return { base: 1, sm: 1, md: Math.max(1, value), lg: Math.max(1, value) };
+        return responsive(value, 1);
+    }
+    gridVars(cols) {
+        return `--df-cols-base:${cols.base};--df-cols-sm:${cols.sm};--df-cols-md:${cols.md};--df-cols-lg:${cols.lg}`;
+    }
+    /** Columnas que ocupa un elemento en cada tamaño (`full` o `span n`), y si empieza fila. */
+    cellVars(f, cols, wideByDefault) {
+        const span = responsive(f.colSpan, wideByDefault ? 'full' : 1);
+        const one = (bp) => {
+            const s = span[bp];
+            const n = s === 'full' ? cols[bp] : Math.min(Math.max(1, s), cols[bp]);
+            if (s === 'full' || n >= cols[bp])
+                return '1 / -1';
+            return f.newRow ? `1 / span ${n}` : `span ${n}`;
+        };
+        return `--df-col-base:${one('base')};--df-col-sm:${one('sm')};--df-col-md:${one('md')};--df-col-lg:${one('lg')}`;
+    }
+    kindOf(f) {
+        const type = f.type ?? 'text';
+        if (type === 'heading' || type === 'paragraph' || type === 'divider')
+            return type;
+        if (type === 'group')
+            return f.repeatable ? 'list' : 'group';
+        return 'field';
+    }
+    controlKind(f) {
+        const type = f.type ?? 'text';
+        if (BUILT_IN.has(type))
+            return type === 'email' || type === 'tel' || type === 'url' ? 'text' : type;
+        return this.customTemplate(f) ? 'custom' : 'text';
+    }
+    customTemplate(f) {
+        return this.templates().find((t) => t.name() === f.type)?.template ?? null;
+    }
+    labelPos(f, ctx) {
+        const pos = f.labelPosition ?? ctx.opts.labelPosition;
+        if (pos === 'floating' && !FLOATABLE.has(f.type ?? 'text'))
+            return 'top';
+        return pos;
+    }
+    placeholderOf(f, pos) {
+        // Con etiqueta flotante, la etiqueta hace de placeholder.
+        return pos === 'floating' ? '' : this.tr(f.placeholder);
+    }
+    sizeOf(f, ctx) {
+        return f.size ?? ctx.size;
+    }
+    isReadonly(f) {
+        return !!f.readonly || !!f.formula || !!f.compute;
+    }
+    filled(ctrl) {
+        this.tick();
+        return isFilled(ctrl.value);
+    }
+    pathKey(path, key) {
+        return [...path, key ?? ''].join('.');
+    }
+    idOf(path, key) {
+        return `${this.uid}-${[...path, key ?? ''].join('-')}`;
+    }
+    pathLabel(path) {
+        const parts = [];
+        let fields = this.fields();
+        for (let i = 0; i < path.length; i++) {
+            const f = fields.find((x) => x.key === path[i]);
+            if (!f)
+                break;
+            if (f.repeatable && typeof path[i + 1] === 'number') {
+                parts.push(this.itemLabel(f, path[i + 1]));
+                i++;
+            }
+            else
+                parts.push(this.tr(f.label) || f.key);
+            fields = f.fields ?? [];
+        }
+        return parts.join(' › ');
+    }
+    isInline(f) {
+        return INLINE_LABEL.has(f.type ?? 'text');
+    }
+    isLabelable(f) {
+        return LABELABLE.has(f.type ?? 'text') || (!BUILT_IN.has(f.type ?? 'text') && !!this.customTemplate(f));
+    }
+    ownsMessages(f) {
+        return OWN_MESSAGES.has(f.type ?? 'text');
+    }
+    inputType(f) {
+        const type = f.type ?? 'text';
+        return type === 'email' || type === 'tel' || type === 'url' ? type : 'text';
+    }
+    controlOf(group, f) {
+        return group.controls[f.key];
+    }
+    subGroup(group, f) {
+        return group.controls[f.key];
+    }
+    listItems(group, f) {
+        this.tick();
+        return group.controls[f.key].controls;
+    }
+    itemLabel(f, i) {
+        const template = this.tr(f.itemLabel) || cbFormat(this.t().dynamicFormItem, '{n}');
+        return template.replace('{n}', String(i + 1));
+    }
+    isDisabledForm() {
+        return this.disabled();
+    }
+    isVisible(f, path, index) {
+        return !this.hidden().has(this.pathKey(path, f.key ?? `#${index}`));
+    }
+    sectionVisible(section) {
+        this.tick();
+        return matches(section.visibleWhen, this.rawValue());
+    }
+    isRequired(path, key) {
+        return this.required().has(this.pathKey(path, key));
+    }
+    optionsOf(path, f) {
+        const list = f.optionsFrom || f.optionsLoader ? (this.options().get(this.pathKey(path, f.key)) ?? []) : (f.options ?? []);
+        return list.map((o) => ({ label: this.tr(o.label), value: o.value, disabled: o.disabled }));
+    }
+    /** Mensaje de error de un campo, si ya se tocó, se cambió o se intentó enviar. */
+    errorOf(path, f, ctrl) {
+        this.tick();
+        if (!ctrl || ctrl.disabled || ctrl.valid)
+            return null;
+        if (!ctrl.touched && !ctrl.dirty && this.attempted() !== this.step())
+            return null;
+        return errorMessage(f, ctrl.errors, this.texts(), (x) => this.tr(x));
+    }
+    addItem(group, f) {
+        const arr = group.controls[f.key];
+        if (f.maxItems !== undefined && arr.length >= f.maxItems)
+            return;
+        arr.push(this.buildGroup(ordered(f.fields ?? []), {}));
+        this.say(cbFormat(this.t().dynamicFormAdded, this.itemLabel(f, arr.length - 1)));
+        afterNextRender(() => {
+            const items = this.host.nativeElement.querySelectorAll(`[data-key="${CSS.escape(f.key)}"] .cb-df__item`);
+            items[items.length - 1]?.querySelector('input, textarea, [role="combobox"], button:not(.cb-button)')?.focus();
+        }, { injector: this.injector });
+    }
+    removeItem(group, f, i) {
+        const arr = group.controls[f.key];
+        if (arr.length <= (f.minItems ?? 0))
+            return;
+        const label = this.itemLabel(f, i);
+        arr.removeAt(i);
+        this.say(cbFormat(this.t().dynamicFormRemoved, label));
+    }
+    focusById(id) {
+        const el = this.host.nativeElement.ownerDocument.getElementById(id);
+        const box = el?.closest('[data-key]') ?? el;
+        const target = el?.matches('input, textarea, select, button, [tabindex]') ? el : box?.querySelector('input:not([type="hidden"]):not([disabled]), textarea, select, button:not([disabled]), [tabindex="0"], [role="combobox"]');
+        target?.focus();
+    }
+    // --- Internos ----------------------------------------------------------------------------
+    goTo(i) {
+        const next = Math.max(0, Math.min(this.steps().length - 1, i));
+        if (next === this.step())
+            return;
+        this.step.set(next);
+        this.stepChange.emit(next);
+        afterNextRender(() => this.host.nativeElement.querySelector('.cb-df__step-heading')?.focus(), { injector: this.injector });
+    }
+    /** Marca los campos de un paso y dice si son válidos (con `show`, muestra el resumen). */
+    validateStep(i, show = true) {
+        const step = this.steps()[i];
+        const fields = sectionsOf(step).flatMap((s) => s.fields).filter((f) => !isLayout(f) && f.key);
+        let valid = true;
+        for (const f of fields) {
+            const ctrl = this.form().controls[f.key];
+            if (!ctrl || ctrl.disabled)
+                continue;
+            if (show)
+                ctrl.markAllAsTouched();
+            if (ctrl.invalid)
+                valid = false;
+        }
+        if (show) {
+            this.attempted.set(valid ? -1 : i);
+            this.tick.update((n) => n + 1);
+            if (!valid) {
+                this.formInvalid.emit(this.summary().map((s) => ({ key: s.id.replace(`${this.uid}-`, ''), message: s.message })));
+                afterNextRender(() => this.host.nativeElement.querySelector('.cb-df__summary')?.focus(), { injector: this.injector });
+            }
+        }
+        return valid;
+    }
+    build(fields, value) {
+        this.subscription?.unsubscribe();
+        this.depsKeys.clear();
+        const form = this.buildGroup(fields, value);
+        this.form.set(form);
+        this.attempted.set(-1);
+        this.sync();
+        this.subscription = form.events.subscribe(() => this.tick.update((n) => n + 1));
+        this.subscription.add(form.valueChanges.subscribe(() => {
+            if (this.syncing)
+                return;
+            this.sync();
+            this.emitValue();
+        }));
+        this.emitValue();
+    }
+    buildGroup(fields, value) {
+        const controls = {};
+        const v = value ?? {};
+        for (const f of fields) {
+            if (isLayout(f) || !f.key)
+                continue;
+            const has = f.key in v;
+            if (f.type === 'group') {
+                const inner = ordered(f.fields ?? []);
+                if (f.repeatable) {
+                    const items = (has ? v[f.key] : f.default);
+                    const list = Array.isArray(items) ? items : [];
+                    while (list.length < (f.minItems ?? 0))
+                        list.push({});
+                    controls[f.key] = new FormArray(list.map((item) => this.buildGroup(inner, item)));
+                }
+                else
+                    controls[f.key] = this.buildGroup(inner, (has ? v[f.key] : f.default));
+                continue;
+            }
+            controls[f.key] = new FormControl(initialValue(has ? { ...f, default: v[f.key] } : f));
+        }
+        return new FormGroup(controls);
+    }
+    /** Aplica condiciones, cálculos, opciones y validaciones en todo el árbol. */
+    sync() {
+        if (this.syncing)
+            return;
+        this.syncing = true;
+        try {
+            const hidden = new Set();
+            const required = new Set();
+            // Varias pasadas: un total de una lista depende de los cálculos de cada elemento.
+            for (let pass = 0; pass < 3; pass++) {
+                hidden.clear();
+                required.clear();
+                const root = this.rawValue();
+                for (const step of this.steps()) {
+                    for (const section of sectionsOf(step)) {
+                        const shown = matches(section.visibleWhen, root);
+                        this.walk(section.fields, this.form(), [], root, shown, hidden, required);
+                    }
+                }
+            }
+            this.form().updateValueAndValidity({ emitEvent: false });
+            this.hidden.set(hidden);
+            this.required.set(required);
+        }
+        finally {
+            this.syncing = false;
+        }
+    }
+    walk(fields, group, path, scope, shown, hidden, required) {
+        const disabledAll = this.disabled();
+        fields.forEach((f, index) => {
+            const key = this.pathKey(path, f.key ?? `#${index}`);
+            const visible = shown && matches(f.visibleWhen, scope);
+            if (!visible)
+                hidden.add(key);
+            if (isLayout(f) || !f.key)
+                return;
+            const ctrl = group.controls[f.key];
+            if (!ctrl)
+                return;
+            if (f.type === 'group') {
+                const inner = ordered(f.fields ?? []);
+                if (f.repeatable) {
+                    ctrl.controls.forEach((g, i) => this.walk(inner, g, [...path, f.key, i], { ...scope, ...g.getRawValue() }, visible, hidden, required));
+                }
+                else
+                    this.walk(inner, ctrl, [...path, f.key], { ...scope, ...ctrl.getRawValue() }, visible, hidden, required);
+                this.setEnabled(ctrl, !(disabledAll || !visible || !!f.disabled));
+                return;
+            }
+            // Campo calculado.
+            if (f.formula || f.compute) {
+                let result = null;
+                try {
+                    result = f.compute ? f.compute(scope) : evaluateFormula(f.formula, scope);
+                }
+                catch {
+                    result = null;
+                }
+                if (result !== ctrl.value)
+                    ctrl.setValue(result, { emitEvent: false });
+                // Los campos siguientes ya ven el resultado (neto → IVA → total en la misma pasada).
+                scope[f.key] = result;
+            }
+            // Opciones dependientes.
+            if (f.optionsFrom || f.optionsLoader)
+                this.syncOptions(f, key, ctrl, scope);
+            const isRequired = !!f.required || (!!f.requiredWhen && matches(f.requiredWhen, scope));
+            if (isRequired)
+                required.add(key);
+            const validators = validatorsOf(f, isRequired);
+            if (f.rules?.length) {
+                const snapshot = scope;
+                validators.push((c) => {
+                    const rule = checkRules(f.rules, c.value, snapshot);
+                    return rule ? { rule: this.tr(rule.message) || this.texts().invalid } : null;
+                });
+            }
+            ctrl.setValidators(validators);
+            // Los de solo lectura que no son de texto se deshabilitan (siguen en el valor).
+            const readonlyOff = !!f.readonly && !['text', 'email', 'tel', 'url', 'textarea', 'number'].includes(f.type ?? 'text');
+            const off = disabledAll || !visible || !!f.disabled || readonlyOff || (!!f.disabledWhen && matches(f.disabledWhen, scope));
+            this.setEnabled(ctrl, !off);
+            ctrl.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    setEnabled(ctrl, enabled) {
+        if (enabled && ctrl.disabled)
+            ctrl.enable({ emitEvent: false });
+        else if (!enabled && ctrl.enabled)
+            ctrl.disable({ emitEvent: false });
+    }
+    /** Opciones de `optionsFrom` / `optionsLoader`: se recalculan al cambiar las dependencias. */
+    syncOptions(f, key, ctrl, scope) {
+        const deps = f.optionsFrom ? [f.optionsFrom.field] : (f.dependsOn ?? []);
+        const depsKey = JSON.stringify(deps.map((d) => scope[d] ?? null));
+        const before = this.depsKeys.get(key);
+        if (before === depsKey)
+            return;
+        this.depsKeys.set(key, depsKey);
+        const changed = before !== undefined;
+        const apply = (list, emit) => {
+            this.options.update((m) => new Map(m).set(key, list));
+            // Si el valor ya no está entre las opciones nuevas, se limpia.
+            if (changed && isFilled(ctrl.value)) {
+                const values = new Set(list.map((o) => o.value));
+                const current = ctrl.value;
+                const keep = Array.isArray(current) ? current.filter((v) => values.has(v)) : values.has(current) ? current : null;
+                if (JSON.stringify(keep) !== JSON.stringify(current))
+                    ctrl.setValue(Array.isArray(current) ? keep : keep, { emitEvent: emit });
+            }
+        };
+        if (f.optionsFrom) {
+            apply(f.optionsFrom.map[String(scope[f.optionsFrom.field] ?? '')] ?? [], false);
+            return;
+        }
+        const loader = this.loaders()[f.optionsLoader];
+        if (!loader)
+            return;
+        Promise.resolve(loader({ value: scope, field: f })).then((list) => {
+            if (this.depsKeys.get(key) === depsKey)
+                apply(list ?? [], true);
+        });
+    }
+    rawValue() {
+        return this.form().getRawValue();
+    }
+    /** Valor sin los campos ocultos (en todos los niveles). */
+    currentValue() {
+        const hidden = this.hidden();
+        const strip = (fields, value, path) => {
+            const out = {};
+            for (const f of fields) {
+                if (isLayout(f) || !f.key || hidden.has(this.pathKey(path, f.key)))
+                    continue;
+                const v = value?.[f.key];
+                if (f.type === 'group') {
+                    const inner = ordered(f.fields ?? []);
+                    out[f.key] = f.repeatable
+                        ? (v ?? []).map((item, i) => strip(inner, item, [...path, f.key, i]))
+                        : strip(inner, v ?? {}, [...path, f.key]);
+                }
+                else
+                    out[f.key] = v;
+            }
+            return out;
+        };
+        return strip(this.fields(), this.rawValue(), []);
+    }
+    emitValue() {
+        const value = this.currentValue();
+        this.lastEmitted = value;
+        this.value.set(value);
+    }
+    say(message) {
+        this.announcement.set('');
+        queueMicrotask(() => this.announcement.set(message));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDynamicForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDynamicForm, isStandalone: true, selector: "cb-dynamic-form", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loaders: { classPropertyName: "loaders", publicName: "loaders", isSignal: true, isRequired: false, transformFunction: null }, translate: { classPropertyName: "translate", publicName: "translate", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", formSubmit: "formSubmit", formInvalid: "formInvalid", formReset: "formReset", stepChange: "stepChange" }, host: { classAttribute: "cb-dynamic-form" }, queries: [{ propertyName: "templates", predicate: CbFormFieldTemplate, isSignal: true }], ngImport: i0, template: `
+    <form class="cb-df__form" [formGroup]="form()" [attr.aria-label]="ariaLabel() || null" novalidate (submit)="onSubmit($event)" (reset)="$event.preventDefault(); reset()">
+      @if (steps().length > 1) {
+        <ol class="cb-df__steps">
+          @for (s of steps(); track $index; let i = $index) {
+            <li class="cb-df__step" [class.cb-is-done]="i < step()" [attr.aria-current]="i === step() ? 'step' : null">
+              <span class="cb-df__step-num" aria-hidden="true">
+                @if (i < step()) {
+                  <cb-icon name="check" [size]="13" />
+                } @else {
+                  {{ i + 1 }}
+                }
+              </span>
+              <span class="cb-df__step-title">{{ tr(s.title) }}</span>
+            </li>
+          }
+        </ol>
+        <h3 class="cb-df__step-heading" [id]="uid + '-step'" tabindex="-1">
+          <span class="cb-df__sr">{{ fmt(t().dynamicFormStep, step() + 1, steps().length) }}</span>
+          {{ tr(steps()[step()].title) }}
+        </h3>
+        @if (steps()[step()].description) {
+          <p class="cb-df__section-desc">{{ tr(steps()[step()].description) }}</p>
+        }
+      }
+
+      @if (summary().length) {
+        <div class="cb-df__summary" role="alert" tabindex="-1" [id]="uid + '-summary'">
+          <p class="cb-df__summary-title">
+            <cb-icon name="circle-alert" [size]="18" aria-hidden="true" />
+            {{ summary().length === 1 ? t().dynamicFormSummaryOne : fmt(t().dynamicFormSummary, summary().length) }}
+          </p>
+          <ul class="cb-df__summary-list">
+            @for (item of summary(); track item.id) {
+              <li>
+                <a [href]="'#' + item.id" (click)="$event.preventDefault(); focusById(item.id)">{{ item.label }}: {{ item.message }}</a>
+              </li>
+            }
+          </ul>
+        </div>
+      }
+
+      @for (section of sections(); track $index) {
+        @if (sectionVisible(section)) {
+          <fieldset class="cb-df__section" [class.cb-df__section--titled]="!!section.title">
+            @if (section.title) {
+              <legend class="cb-df__legend">{{ tr(section.title) }}</legend>
+            }
+            @if (section.description) {
+              <p class="cb-df__section-desc">{{ tr(section.description) }}</p>
+            }
+            <ng-container *ngTemplateOutlet="gridTpl; context: { $implicit: section.fields, ctx: rootCtx(section) }" />
+          </fieldset>
+        }
+      }
+
+      @if (actions()) {
+        <div class="cb-df__actions" [class]="'cb-df__actions--' + actionsLabelPosition()" [style.--cb-df-label-width]="labelWidthValue()">
+          <span class="cb-df__label cb-df__label--empty" aria-hidden="true"></span>
+          <div class="cb-df__buttons">
+            @if (step() > 0) {
+              <cb-button variant="outlined" severity="secondary" [disabled]="disabled()" (click)="back()">{{ tr(schema().backLabel) || t().dynamicFormBack }}</cb-button>
+            }
+            @if (step() < steps().length - 1) {
+              <cb-button [disabled]="disabled()" (click)="next()">{{ tr(schema().nextLabel) || t().dynamicFormNext }}</cb-button>
+            } @else {
+              <cb-button type="submit" [loading]="loading()" [disabled]="disabled()">{{ tr(schema().submitLabel) || t().dynamicFormSubmit }}</cb-button>
+            }
+            @if (schema().resetLabel) {
+              <cb-button type="reset" variant="text" severity="secondary" [disabled]="disabled()">{{ tr(schema().resetLabel) }}</cb-button>
+            }
+          </div>
+        </div>
+      }
+      <span class="cb-df__sr" role="status">{{ announcement() }}</span>
+    </form>
+
+    <!-- Rejilla de campos (recursiva para grupos y listas). -->
+    <ng-template #gridTpl let-fields let-ctx="ctx">
+      <div class="cb-df__grid" [style]="gridVars(ctx.cols)">
+        @for (f of fields; track $index) {
+          @if (isVisible(f, ctx.path, $index)) {
+            @switch (kindOf(f)) {
+              @case ('heading') {
+                <h4 class="cb-df__heading cb-df__cell" [style]="cellVars(f, ctx.cols, true)">{{ tr(f.content ?? f.label) }}</h4>
+              }
+              @case ('paragraph') {
+                <p class="cb-df__paragraph cb-df__cell" [style]="cellVars(f, ctx.cols, true)">{{ tr(f.content ?? f.label) }}</p>
+              }
+              @case ('divider') {
+                <hr class="cb-df__divider cb-df__cell" [style]="cellVars(f, ctx.cols, true)" />
+              }
+              @case ('list') {
+                <fieldset class="cb-df__group cb-df__cell" [style]="cellVars(f, ctx.cols, true)" [attr.data-key]="pathKey(ctx.path, f.key)">
+                  <legend class="cb-df__group-title">{{ tr(f.label) }}</legend>
+                  @if (f.hint) {
+                    <p class="cb-df__message">{{ tr(f.hint) }}</p>
+                  }
+                  @for (item of listItems(ctx.group, f); track item; let i = $index) {
+                    <div class="cb-df__item" role="group" [attr.aria-label]="itemLabel(f, i)">
+                      <div class="cb-df__item-head">
+                        <span class="cb-df__item-title">{{ itemLabel(f, i) }}</span>
+                        @if (!isDisabledForm()) {
+                          <cb-button size="sm" variant="text" severity="secondary" [disabled]="listItems(ctx.group, f).length <= (f.minItems ?? 0)" [ariaLabel]="fmt(t().dynamicFormRemove, itemLabel(f, i))" (click)="removeItem(ctx.group, f, i)">
+                            <cb-icon name="x" [size]="15" aria-hidden="true" />
+                            {{ t().remove }}
+                          </cb-button>
+                        }
+                      </div>
+                      <ng-container *ngTemplateOutlet="gridTpl; context: { $implicit: ordered(f.fields ?? []), ctx: childCtx(ctx, f, item, i) }" />
+                    </div>
+                  }
+                  @if (!isDisabledForm() && (f.maxItems === undefined || listItems(ctx.group, f).length < f.maxItems)) {
+                    <div>
+                      <cb-button size="sm" variant="outlined" (click)="addItem(ctx.group, f)">
+                        <cb-icon name="plus" [size]="15" aria-hidden="true" />
+                        {{ tr(f.addLabel) || fmt(t().dynamicFormAdd, tr(f.label)) }}
+                      </cb-button>
+                    </div>
+                  }
+                </fieldset>
+              }
+              @case ('group') {
+                <fieldset class="cb-df__group cb-df__group--plain cb-df__cell" [style]="cellVars(f, ctx.cols, true)" [attr.data-key]="pathKey(ctx.path, f.key)">
+                  @if (f.label) {
+                    <legend class="cb-df__group-title">{{ tr(f.label) }}</legend>
+                  }
+                  <ng-container *ngTemplateOutlet="gridTpl; context: { $implicit: ordered(f.fields ?? []), ctx: childCtx(ctx, f, subGroup(ctx.group, f), null) }" />
+                </fieldset>
+              }
+              @default {
+                <ng-container *ngTemplateOutlet="fieldTpl; context: { $implicit: f, ctx: ctx }" />
+              }
+            }
+          }
+        }
+      </div>
+    </ng-template>
+
+    <!-- Un campo con su etiqueta, control, ayuda y error. -->
+    <ng-template #fieldTpl let-f let-ctx="ctx">
+      @let id = idOf(ctx.path, f.key);
+      @let ctrl = controlOf(ctx.group, f);
+      @let pos = labelPos(f, ctx);
+      @let err = errorOf(ctx.path, f, ctrl);
+      <div
+        class="cb-df__field cb-df__cell"
+        [class]="'cb-df__field--' + pos"
+        [class.cb-df__field--inline]="isInline(f)"
+        [class.cb-df__field--end]="(f.labelAlign ?? ctx.opts.labelAlign) === 'end'"
+        [class.cb-df__field--filled]="pos === 'floating' && filled(ctrl)"
+        [style]="cellVars(f, ctx.cols, false) + ';--cb-df-label-width:' + (f.labelWidth ?? ctx.opts.labelWidth)"
+        [attr.data-key]="pathKey(ctx.path, f.key)"
+      >
+        @if (isInline(f)) {
+          <span class="cb-df__label cb-df__label--empty" aria-hidden="true"></span>
+        } @else if (isLabelable(f)) {
+          <label class="cb-df__label" [class.cb-df__sr]="pos === 'hidden'" [attr.for]="id" [id]="id + '-label'">
+            {{ tr(f.label) }}
+            @if (isRequired(ctx.path, f.key)) {
+              <span class="cb-df__req" aria-hidden="true">*</span>
+            }
+          </label>
+        } @else {
+          <span class="cb-df__label" [class.cb-df__sr]="pos === 'hidden'" [id]="id + '-label'">
+            {{ tr(f.label) }}
+            @if (isRequired(ctx.path, f.key)) {
+              <span class="cb-df__req" aria-hidden="true">*</span>
+            }
+          </span>
+        }
+        <div class="cb-df__control">
+          <div class="cb-df__addons" [class.cb-df__addons--on]="!!(f.prefix || f.suffix || f.icon)">
+            @if (f.icon) {
+              <span class="cb-df__addon cb-df__addon--icon" aria-hidden="true"><cb-icon [name]="f.icon" [size]="16" /></span>
+            }
+            @if (f.prefix) {
+              <span class="cb-df__addon" aria-hidden="true">{{ tr(f.prefix) }}</span>
+            }
+            <div class="cb-df__input">
+              @switch (controlKind(f)) {
+                @case ('textarea') {
+                  <cb-textarea [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [placeholder]="placeholderOf(f, pos)" [rows]="f.rows ?? 3" [maxlength]="f.maxLength ?? null" [readonly]="isReadonly(f)" [hint]="tr(f.hint)" [error]="err ?? ''" />
+                }
+                @case ('number') {
+                  <cb-input-number [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [placeholder]="placeholderOf(f, pos)" [min]="f.min ?? null" [max]="f.max ?? null" [step]="f.step ?? 1" [readonly]="isReadonly(f)" [hint]="tr(f.hint)" [error]="err ?? ''" />
+                }
+                @case ('date') {
+                  <cb-datepicker [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [placeholder]="placeholderOf(f, pos)" [hint]="tr(f.hint)" [error]="err ?? ''" />
+                }
+                @case ('password') {
+                  <cb-password [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [placeholder]="placeholderOf(f, pos)" [feedback]="false" />
+                }
+                @case ('mask') {
+                  <cb-input-mask [formControl]="ctrl" [inputId]="id" [mask]="f.mask ?? '999-999'" [placeholder]="placeholderOf(f, pos)" [ariaLabel]="tr(f.label)" />
+                }
+                @case ('select') {
+                  <cb-select [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [ariaLabelledBy]="id + '-label'" [options]="optionsOf(ctx.path, f)" optionValue="value" [placeholder]="pos === 'floating' ? ' ' : tr(f.placeholder) || t().select" />
+                }
+                @case ('multiselect') {
+                  <cb-multiselect [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [ariaLabelledBy]="id + '-label'" [options]="optionsOf(ctx.path, f)" optionValue="value" [placeholder]="pos === 'floating' ? ' ' : tr(f.placeholder) || t().select" />
+                }
+                @case ('radio') {
+                  <cb-radio-group [formControl]="ctrl" [ariaLabel]="tr(f.label) || f.key" [orientation]="f.orientation ?? 'vertical'">
+                    @for (o of optionsOf(ctx.path, f); track $index) {
+                      <cb-radio [value]="o.value" [label]="o.label" [disabled]="!!o.disabled" />
+                    }
+                  </cb-radio-group>
+                }
+                @case ('buttons') {
+                  <cb-selectbutton [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [ariaLabel]="tr(f.label) || f.key" [options]="optionsOf(ctx.path, f)" optionValue="value" />
+                }
+                @case ('checkbox') {
+                  <cb-checkbox [formControl]="ctrl" [inputId]="id" [label]="tr(f.label)" />
+                }
+                @case ('toggle') {
+                  <cb-toggle [formControl]="ctrl" [inputId]="id" [label]="tr(f.label)" />
+                }
+                @case ('slider') {
+                  <cb-slider [formControl]="ctrl" [inputId]="id" [ariaLabel]="tr(f.label) || f.key" [min]="f.min ?? 0" [max]="f.max ?? 100" [step]="f.step ?? 1" />
+                }
+                @case ('rating') {
+                  <cb-rating [formControl]="ctrl" [inputId]="id" [ariaLabel]="tr(f.label) || f.key" />
+                }
+                @case ('chips') {
+                  <cb-chips [formControl]="ctrl" [inputId]="id" [ariaLabel]="tr(f.label) || f.key" [placeholder]="placeholderOf(f, pos)" />
+                }
+                @case ('color') {
+                  <cb-colorpicker [formControl]="ctrl" [inputId]="id" [ariaLabel]="tr(f.label) || f.key" />
+                }
+                @case ('custom') {
+                  <ng-container *ngTemplateOutlet="customTemplate(f)!; context: { $implicit: ctrl, field: f, id: id, labelId: id + '-label', error: err, invalid: !!err }" />
+                }
+                @default {
+                  <cb-input [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [type]="inputType(f)" [placeholder]="placeholderOf(f, pos)" [readonly]="isReadonly(f)" [hint]="tr(f.hint)" [error]="err ?? ''" />
+                }
+              }
+            </div>
+            @if (f.suffix) {
+              <span class="cb-df__addon" aria-hidden="true">{{ tr(f.suffix) }}</span>
+            }
+          </div>
+          @if (!ownsMessages(f)) {
+            @if (err) {
+              <p class="cb-df__message cb-df__message--error" role="alert" [id]="id + '-error'">{{ err }}</p>
+            } @else if (f.hint) {
+              <p class="cb-df__message" [id]="id + '-hint'">{{ tr(f.hint) }}</p>
+            }
+          }
+        </div>
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{--cb-df-gap-x: var(--cb-space-5, 1.25rem);--cb-df-gap-y: var(--cb-space-4, 1rem);display:block;width:100%;min-width:0;container-type:inline-size;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-df__form{display:grid;gap:var(--cb-space-6, 1.5rem)}.cb-df__steps{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0;padding:0;list-style:none}.cb-df__step{display:inline-flex;align-items:center;gap:.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-df__step-num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border:1.5px solid var(--cb-color-border-strong);border-radius:999px;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__step[aria-current=step]{color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__step[aria-current=step] .cb-df__step-num{border-color:var(--cb-color-primary-text, var(--cb-color-primary-700));background:var(--cb-color-primary-text, var(--cb-color-primary-700));color:var(--cb-color-bg)}.cb-df__step.cb-is-done .cb-df__step-num{border-color:var(--cb-color-success-text, #166534);color:var(--cb-color-success-text, #166534)}.cb-df__step-heading{margin:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);outline:none}.cb-df__summary{padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 45%,transparent);border-left-width:4px;border-radius:var(--cb-radius-md);background:color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 7%,var(--cb-color-bg));outline:none}.cb-df__summary:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-df__summary-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;color:var(--cb-color-danger-text, #dc2626);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__summary-list{display:grid;gap:.2rem;margin:0;padding-left:1.75rem;font-size:var(--cb-text-sm, .875rem)}.cb-df__summary-list a{color:var(--cb-color-danger-text, #dc2626);text-decoration:underline;text-underline-offset:2px}.cb-df__section{min-width:0;margin:0;padding:0;border:0}.cb-df__legend{margin-bottom:.25rem;padding:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__section-desc{margin:0 0 .75rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-df__section--titled>.cb-df__grid{margin-top:.75rem}.cb-df__grid{display:grid;grid-template-columns:repeat(var(--df-cols-base, 1),minmax(0,1fr));gap:var(--cb-df-gap-y) var(--cb-df-gap-x);align-items:start;min-width:0}.cb-df__cell{grid-column:var(--df-col-base, auto)}@container (min-width: 30rem){.cb-df__grid{grid-template-columns:repeat(var(--df-cols-sm, 1),minmax(0,1fr))}.cb-df__cell{grid-column:var(--df-col-sm, auto)}}@container (min-width: 40rem){.cb-df__grid{grid-template-columns:repeat(var(--df-cols-md, 1),minmax(0,1fr))}.cb-df__cell{grid-column:var(--df-col-md, auto)}}@container (min-width: 60rem){.cb-df__grid{grid-template-columns:repeat(var(--df-cols-lg, 1),minmax(0,1fr))}.cb-df__cell{grid-column:var(--df-col-lg, auto)}}.cb-df__heading{margin:.5rem 0 0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__paragraph{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-df__divider{width:100%;margin:.25rem 0;border:0;border-top:1px solid var(--cb-color-border)}.cb-df__group{display:grid;gap:.75rem;min-width:0;margin:0;padding:.85rem 1rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-df__group--plain{padding:0;border:0}.cb-df__group-title{padding:0 .25rem;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__group--plain>.cb-df__group-title{padding:0;margin-bottom:.5rem}.cb-df__item{display:grid;gap:.6rem;padding:.75rem;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle)}.cb-df__item-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-df__item-title{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em}.cb-df__field{--cb-df-label-width: 10rem;display:grid;gap:.375rem;min-width:0}.cb-df__label{color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-df__label--empty{display:none}.cb-df__req{margin-left:.15rem;color:var(--cb-color-danger-text, #b91c1c)}.cb-df__control{display:grid;gap:.375rem;min-width:0}.cb-df__message{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-df__message--error{color:var(--cb-color-danger-text, #dc2626)}.cb-df__field--top.cb-df__field--inline{align-self:end;align-content:center;min-height:2.5rem}.cb-df__field--left,.cb-df__actions--left{grid-template-columns:var(--cb-df-label-width) minmax(0,1fr);column-gap:var(--cb-space-4, 1rem)}.cb-df__field--right{grid-template-columns:minmax(0,1fr) var(--cb-df-label-width);column-gap:var(--cb-space-4, 1rem)}.cb-df__field--right>.cb-df__label{order:2}.cb-df__field--left>.cb-df__label,.cb-df__field--right>.cb-df__label{padding-top:.6rem;line-height:1.3}.cb-df__field--end>.cb-df__label{text-align:end}.cb-df__field--left>.cb-df__label--empty,.cb-df__field--right>.cb-df__label--empty,.cb-df__actions--left>.cb-df__label--empty{display:block}.cb-df__field--left.cb-df__field--inline .cb-df__control,.cb-df__field--right.cb-df__field--inline .cb-df__control{padding-top:.5rem}.cb-df__field--floating{position:relative}.cb-df__field--floating>.cb-df__label{position:absolute;top:.65rem;left:.75rem;z-index:1;max-width:calc(100% - 3rem);overflow:hidden;padding:0 .25rem;color:var(--cb-color-text-muted);font-weight:400;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;transform-origin:left top;transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-df__field--floating:focus-within>.cb-df__label,.cb-df__field--floating.cb-df__field--filled>.cb-df__label{background:var(--cb-color-bg);color:var(--cb-color-text);transform:translateY(-1.15rem) scale(.82)}.cb-df__field--floating:focus-within>.cb-df__label{color:var(--cb-color-primary-text, var(--cb-color-primary-700))}.cb-df__sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.cb-df__addons{display:block;min-width:0}.cb-df__addons--on{display:flex;align-items:stretch}.cb-df__input{flex:1;min-width:0}.cb-df__addon{display:inline-flex;flex:none;align-items:center;height:2.5rem;padding:0 .75rem;border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem);white-space:nowrap}.cb-df__addon:first-child{margin-right:-1px;border-radius:var(--cb-radius-md) 0 0 var(--cb-radius-md)}.cb-df__addon:last-child{margin-left:-1px;border-radius:0 var(--cb-radius-md) var(--cb-radius-md) 0}.cb-df__addon+.cb-df__addon{border-left:0}.cb-df__actions{--cb-df-label-width: 10rem;display:grid}.cb-df__buttons{display:flex;flex-wrap:wrap;gap:.5rem}@container (max-width: 30rem){.cb-df__field--left,.cb-df__field--right,.cb-df__actions--left{grid-template-columns:minmax(0,1fr)}.cb-df__field--left>.cb-df__label,.cb-df__field--right>.cb-df__label{order:0;padding-top:0;text-align:start}.cb-df__field--left>.cb-df__label--empty,.cb-df__field--right>.cb-df__label--empty,.cb-df__actions--left>.cb-df__label--empty{display:none}.cb-df__field--left.cb-df__field--inline .cb-df__control,.cb-df__field--right.cb-df__field--inline .cb-df__control{padding-top:0}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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"] }, { kind: "component", type: CbButton, selector: "cb-button", inputs: ["severity", "variant", "size", "disabled", "loading", "fullWidth", "type", "ariaLabel", "ariaHaspopup", "ariaExpanded", "ariaControls"] }, { kind: "component", type: CbCheckbox, selector: "cb-checkbox", inputs: ["label", "ariaLabel", "size", "value", "indeterminate", "invalid", "required", "requiredIndicator", "disabled", "inputId"], outputs: ["changed"] }, { kind: "component", type: CbChips, selector: "cb-chips", inputs: ["value", "placeholder", "size", "invalid", "readonly", "disabled", "max", "allowDuplicate", "ariaLabel", "inputId"], outputs: ["valueChange", "added", "removed"] }, { kind: "component", type: CbColorPicker, selector: "cb-colorpicker", inputs: ["value", "size", "showValue", "presets", "invalid", "disabled", "ariaLabel", "inputId"], outputs: ["valueChange"] }, { kind: "component", type: CbDatepicker, selector: "cb-datepicker", inputs: ["value", "range", "label", "hint", "error", "placeholder", "size", "invalid", "required", "requiredIndicator", "disabled", "inputId", "locale", "firstDayOfWeek", "minDate", "maxDate", "selectionMode", "view", "numberOfMonths", "showTime", "hourFormat", "stepMinute", "dateFormat", "editable", "presets"], outputs: ["valueChange", "rangeChange"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }, { kind: "component", type: CbInput, selector: "cb-input", inputs: ["value", "label", "hint", "error", "invalid", "type", "placeholder", "size", "readonly", "required", "requiredIndicator", "inputmode", "disabled", "inputId"], outputs: ["valueChange"] }, { kind: "component", type: CbInputMask, selector: "cb-input-mask", inputs: ["mask", "unmask", "placeholder", "disabled", "invalid", "ariaLabel", "inputId", "value"], outputs: ["valueChange"] }, { kind: "component", type: CbInputNumber, selector: "cb-input-number", inputs: ["value", "label", "hint", "error", "placeholder", "size", "invalid", "required", "requiredIndicator", "readonly", "disabled", "inputId", "min", "max", "step", "showButtons", "mode", "currency", "locale", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix"], outputs: ["valueChange"] }, { kind: "component", type: CbMultiSelect, selector: "cb-multiselect", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "group", "optionGroupLabel", "optionGroupChildren", "placeholder", "size", "filter", "filterPlaceholder", "emptyMessage", "showToggleAll", "maxSelectedLabels", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "invalid", "disabled", "inputId", "ariaLabel", "ariaLabelledBy", "value"], outputs: ["valueChange"] }, { kind: "component", type: CbPassword, selector: "cb-password", inputs: ["placeholder", "disabled", "invalid", "toggleMask", "feedback", "size", "inputId", "autocomplete", "value"], outputs: ["valueChange"] }, { kind: "component", type: CbRadio, selector: "cb-radio", inputs: ["value", "label", "ariaLabel", "disabled", "inputId"] }, { kind: "component", type: CbRadioGroup, selector: "cb-radio-group", inputs: ["ariaLabel", "name", "size", "orientation", "disabled", "invalid"], outputs: ["changed"] }, { kind: "component", type: CbRating, selector: "cb-rating", inputs: ["value", "stars", "size", "readonly", "disabled", "invalid", "ariaLabel", "inputId"], outputs: ["valueChange", "changed"] }, { kind: "component", type: CbSelect, selector: "cb-select", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "group", "optionGroupLabel", "optionGroupChildren", "placeholder", "size", "filter", "filterPlaceholder", "emptyMessage", "showClear", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "invalid", "disabled", "inputId", "ariaLabel", "ariaLabelledBy", "value"], outputs: ["valueChange"] }, { kind: "component", type: CbSelectButton, selector: "cb-selectbutton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "multiple", "size", "disabled", "invalid", "ariaLabel", "inputId", "value"], outputs: ["valueChange", "changed"] }, { kind: "component", type: CbSlider, selector: "cb-slider", inputs: ["value", "rangeValue", "min", "max", "step", "size", "range", "showValue", "valueFormat", "locale", "disabled", "invalid", "ariaLabel", "inputId"], outputs: ["valueChange", "rangeValueChange", "changed", "rangeChanged"] }, { kind: "component", type: CbTextarea, selector: "cb-textarea", inputs: ["value", "label", "hint", "error", "invalid", "placeholder", "size", "rows", "autoResize", "maxlength", "readonly", "required", "requiredIndicator", "disabled", "inputId"], outputs: ["valueChange"] }, { kind: "component", type: CbToggle, selector: "cb-toggle", inputs: ["label", "ariaLabel", "size", "disabled", "invalid", "requiredIndicator", "inputId"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDynamicForm, decorators: [{
+            type: Component,
+            args: [{ selector: 'cb-dynamic-form', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, imports: [
+                        NgTemplateOutlet,
+                        ReactiveFormsModule,
+                        CbButton,
+                        CbCheckbox,
+                        CbChips,
+                        CbColorPicker,
+                        CbDatepicker,
+                        CbIcon,
+                        CbInput,
+                        CbInputMask,
+                        CbInputNumber,
+                        CbMultiSelect,
+                        CbPassword,
+                        CbRadio,
+                        CbRadioGroup,
+                        CbRating,
+                        CbSelect,
+                        CbSelectButton,
+                        CbSlider,
+                        CbTextarea,
+                        CbToggle,
+                    ], host: { class: 'cb-dynamic-form' }, template: `
+    <form class="cb-df__form" [formGroup]="form()" [attr.aria-label]="ariaLabel() || null" novalidate (submit)="onSubmit($event)" (reset)="$event.preventDefault(); reset()">
+      @if (steps().length > 1) {
+        <ol class="cb-df__steps">
+          @for (s of steps(); track $index; let i = $index) {
+            <li class="cb-df__step" [class.cb-is-done]="i < step()" [attr.aria-current]="i === step() ? 'step' : null">
+              <span class="cb-df__step-num" aria-hidden="true">
+                @if (i < step()) {
+                  <cb-icon name="check" [size]="13" />
+                } @else {
+                  {{ i + 1 }}
+                }
+              </span>
+              <span class="cb-df__step-title">{{ tr(s.title) }}</span>
+            </li>
+          }
+        </ol>
+        <h3 class="cb-df__step-heading" [id]="uid + '-step'" tabindex="-1">
+          <span class="cb-df__sr">{{ fmt(t().dynamicFormStep, step() + 1, steps().length) }}</span>
+          {{ tr(steps()[step()].title) }}
+        </h3>
+        @if (steps()[step()].description) {
+          <p class="cb-df__section-desc">{{ tr(steps()[step()].description) }}</p>
+        }
+      }
+
+      @if (summary().length) {
+        <div class="cb-df__summary" role="alert" tabindex="-1" [id]="uid + '-summary'">
+          <p class="cb-df__summary-title">
+            <cb-icon name="circle-alert" [size]="18" aria-hidden="true" />
+            {{ summary().length === 1 ? t().dynamicFormSummaryOne : fmt(t().dynamicFormSummary, summary().length) }}
+          </p>
+          <ul class="cb-df__summary-list">
+            @for (item of summary(); track item.id) {
+              <li>
+                <a [href]="'#' + item.id" (click)="$event.preventDefault(); focusById(item.id)">{{ item.label }}: {{ item.message }}</a>
+              </li>
+            }
+          </ul>
+        </div>
+      }
+
+      @for (section of sections(); track $index) {
+        @if (sectionVisible(section)) {
+          <fieldset class="cb-df__section" [class.cb-df__section--titled]="!!section.title">
+            @if (section.title) {
+              <legend class="cb-df__legend">{{ tr(section.title) }}</legend>
+            }
+            @if (section.description) {
+              <p class="cb-df__section-desc">{{ tr(section.description) }}</p>
+            }
+            <ng-container *ngTemplateOutlet="gridTpl; context: { $implicit: section.fields, ctx: rootCtx(section) }" />
+          </fieldset>
+        }
+      }
+
+      @if (actions()) {
+        <div class="cb-df__actions" [class]="'cb-df__actions--' + actionsLabelPosition()" [style.--cb-df-label-width]="labelWidthValue()">
+          <span class="cb-df__label cb-df__label--empty" aria-hidden="true"></span>
+          <div class="cb-df__buttons">
+            @if (step() > 0) {
+              <cb-button variant="outlined" severity="secondary" [disabled]="disabled()" (click)="back()">{{ tr(schema().backLabel) || t().dynamicFormBack }}</cb-button>
+            }
+            @if (step() < steps().length - 1) {
+              <cb-button [disabled]="disabled()" (click)="next()">{{ tr(schema().nextLabel) || t().dynamicFormNext }}</cb-button>
+            } @else {
+              <cb-button type="submit" [loading]="loading()" [disabled]="disabled()">{{ tr(schema().submitLabel) || t().dynamicFormSubmit }}</cb-button>
+            }
+            @if (schema().resetLabel) {
+              <cb-button type="reset" variant="text" severity="secondary" [disabled]="disabled()">{{ tr(schema().resetLabel) }}</cb-button>
+            }
+          </div>
+        </div>
+      }
+      <span class="cb-df__sr" role="status">{{ announcement() }}</span>
+    </form>
+
+    <!-- Rejilla de campos (recursiva para grupos y listas). -->
+    <ng-template #gridTpl let-fields let-ctx="ctx">
+      <div class="cb-df__grid" [style]="gridVars(ctx.cols)">
+        @for (f of fields; track $index) {
+          @if (isVisible(f, ctx.path, $index)) {
+            @switch (kindOf(f)) {
+              @case ('heading') {
+                <h4 class="cb-df__heading cb-df__cell" [style]="cellVars(f, ctx.cols, true)">{{ tr(f.content ?? f.label) }}</h4>
+              }
+              @case ('paragraph') {
+                <p class="cb-df__paragraph cb-df__cell" [style]="cellVars(f, ctx.cols, true)">{{ tr(f.content ?? f.label) }}</p>
+              }
+              @case ('divider') {
+                <hr class="cb-df__divider cb-df__cell" [style]="cellVars(f, ctx.cols, true)" />
+              }
+              @case ('list') {
+                <fieldset class="cb-df__group cb-df__cell" [style]="cellVars(f, ctx.cols, true)" [attr.data-key]="pathKey(ctx.path, f.key)">
+                  <legend class="cb-df__group-title">{{ tr(f.label) }}</legend>
+                  @if (f.hint) {
+                    <p class="cb-df__message">{{ tr(f.hint) }}</p>
+                  }
+                  @for (item of listItems(ctx.group, f); track item; let i = $index) {
+                    <div class="cb-df__item" role="group" [attr.aria-label]="itemLabel(f, i)">
+                      <div class="cb-df__item-head">
+                        <span class="cb-df__item-title">{{ itemLabel(f, i) }}</span>
+                        @if (!isDisabledForm()) {
+                          <cb-button size="sm" variant="text" severity="secondary" [disabled]="listItems(ctx.group, f).length <= (f.minItems ?? 0)" [ariaLabel]="fmt(t().dynamicFormRemove, itemLabel(f, i))" (click)="removeItem(ctx.group, f, i)">
+                            <cb-icon name="x" [size]="15" aria-hidden="true" />
+                            {{ t().remove }}
+                          </cb-button>
+                        }
+                      </div>
+                      <ng-container *ngTemplateOutlet="gridTpl; context: { $implicit: ordered(f.fields ?? []), ctx: childCtx(ctx, f, item, i) }" />
+                    </div>
+                  }
+                  @if (!isDisabledForm() && (f.maxItems === undefined || listItems(ctx.group, f).length < f.maxItems)) {
+                    <div>
+                      <cb-button size="sm" variant="outlined" (click)="addItem(ctx.group, f)">
+                        <cb-icon name="plus" [size]="15" aria-hidden="true" />
+                        {{ tr(f.addLabel) || fmt(t().dynamicFormAdd, tr(f.label)) }}
+                      </cb-button>
+                    </div>
+                  }
+                </fieldset>
+              }
+              @case ('group') {
+                <fieldset class="cb-df__group cb-df__group--plain cb-df__cell" [style]="cellVars(f, ctx.cols, true)" [attr.data-key]="pathKey(ctx.path, f.key)">
+                  @if (f.label) {
+                    <legend class="cb-df__group-title">{{ tr(f.label) }}</legend>
+                  }
+                  <ng-container *ngTemplateOutlet="gridTpl; context: { $implicit: ordered(f.fields ?? []), ctx: childCtx(ctx, f, subGroup(ctx.group, f), null) }" />
+                </fieldset>
+              }
+              @default {
+                <ng-container *ngTemplateOutlet="fieldTpl; context: { $implicit: f, ctx: ctx }" />
+              }
+            }
+          }
+        }
+      </div>
+    </ng-template>
+
+    <!-- Un campo con su etiqueta, control, ayuda y error. -->
+    <ng-template #fieldTpl let-f let-ctx="ctx">
+      @let id = idOf(ctx.path, f.key);
+      @let ctrl = controlOf(ctx.group, f);
+      @let pos = labelPos(f, ctx);
+      @let err = errorOf(ctx.path, f, ctrl);
+      <div
+        class="cb-df__field cb-df__cell"
+        [class]="'cb-df__field--' + pos"
+        [class.cb-df__field--inline]="isInline(f)"
+        [class.cb-df__field--end]="(f.labelAlign ?? ctx.opts.labelAlign) === 'end'"
+        [class.cb-df__field--filled]="pos === 'floating' && filled(ctrl)"
+        [style]="cellVars(f, ctx.cols, false) + ';--cb-df-label-width:' + (f.labelWidth ?? ctx.opts.labelWidth)"
+        [attr.data-key]="pathKey(ctx.path, f.key)"
+      >
+        @if (isInline(f)) {
+          <span class="cb-df__label cb-df__label--empty" aria-hidden="true"></span>
+        } @else if (isLabelable(f)) {
+          <label class="cb-df__label" [class.cb-df__sr]="pos === 'hidden'" [attr.for]="id" [id]="id + '-label'">
+            {{ tr(f.label) }}
+            @if (isRequired(ctx.path, f.key)) {
+              <span class="cb-df__req" aria-hidden="true">*</span>
+            }
+          </label>
+        } @else {
+          <span class="cb-df__label" [class.cb-df__sr]="pos === 'hidden'" [id]="id + '-label'">
+            {{ tr(f.label) }}
+            @if (isRequired(ctx.path, f.key)) {
+              <span class="cb-df__req" aria-hidden="true">*</span>
+            }
+          </span>
+        }
+        <div class="cb-df__control">
+          <div class="cb-df__addons" [class.cb-df__addons--on]="!!(f.prefix || f.suffix || f.icon)">
+            @if (f.icon) {
+              <span class="cb-df__addon cb-df__addon--icon" aria-hidden="true"><cb-icon [name]="f.icon" [size]="16" /></span>
+            }
+            @if (f.prefix) {
+              <span class="cb-df__addon" aria-hidden="true">{{ tr(f.prefix) }}</span>
+            }
+            <div class="cb-df__input">
+              @switch (controlKind(f)) {
+                @case ('textarea') {
+                  <cb-textarea [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [placeholder]="placeholderOf(f, pos)" [rows]="f.rows ?? 3" [maxlength]="f.maxLength ?? null" [readonly]="isReadonly(f)" [hint]="tr(f.hint)" [error]="err ?? ''" />
+                }
+                @case ('number') {
+                  <cb-input-number [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [placeholder]="placeholderOf(f, pos)" [min]="f.min ?? null" [max]="f.max ?? null" [step]="f.step ?? 1" [readonly]="isReadonly(f)" [hint]="tr(f.hint)" [error]="err ?? ''" />
+                }
+                @case ('date') {
+                  <cb-datepicker [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [placeholder]="placeholderOf(f, pos)" [hint]="tr(f.hint)" [error]="err ?? ''" />
+                }
+                @case ('password') {
+                  <cb-password [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [placeholder]="placeholderOf(f, pos)" [feedback]="false" />
+                }
+                @case ('mask') {
+                  <cb-input-mask [formControl]="ctrl" [inputId]="id" [mask]="f.mask ?? '999-999'" [placeholder]="placeholderOf(f, pos)" [ariaLabel]="tr(f.label)" />
+                }
+                @case ('select') {
+                  <cb-select [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [ariaLabelledBy]="id + '-label'" [options]="optionsOf(ctx.path, f)" optionValue="value" [placeholder]="pos === 'floating' ? ' ' : tr(f.placeholder) || t().select" />
+                }
+                @case ('multiselect') {
+                  <cb-multiselect [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [ariaLabelledBy]="id + '-label'" [options]="optionsOf(ctx.path, f)" optionValue="value" [placeholder]="pos === 'floating' ? ' ' : tr(f.placeholder) || t().select" />
+                }
+                @case ('radio') {
+                  <cb-radio-group [formControl]="ctrl" [ariaLabel]="tr(f.label) || f.key" [orientation]="f.orientation ?? 'vertical'">
+                    @for (o of optionsOf(ctx.path, f); track $index) {
+                      <cb-radio [value]="o.value" [label]="o.label" [disabled]="!!o.disabled" />
+                    }
+                  </cb-radio-group>
+                }
+                @case ('buttons') {
+                  <cb-selectbutton [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [ariaLabel]="tr(f.label) || f.key" [options]="optionsOf(ctx.path, f)" optionValue="value" />
+                }
+                @case ('checkbox') {
+                  <cb-checkbox [formControl]="ctrl" [inputId]="id" [label]="tr(f.label)" />
+                }
+                @case ('toggle') {
+                  <cb-toggle [formControl]="ctrl" [inputId]="id" [label]="tr(f.label)" />
+                }
+                @case ('slider') {
+                  <cb-slider [formControl]="ctrl" [inputId]="id" [ariaLabel]="tr(f.label) || f.key" [min]="f.min ?? 0" [max]="f.max ?? 100" [step]="f.step ?? 1" />
+                }
+                @case ('rating') {
+                  <cb-rating [formControl]="ctrl" [inputId]="id" [ariaLabel]="tr(f.label) || f.key" />
+                }
+                @case ('chips') {
+                  <cb-chips [formControl]="ctrl" [inputId]="id" [ariaLabel]="tr(f.label) || f.key" [placeholder]="placeholderOf(f, pos)" />
+                }
+                @case ('color') {
+                  <cb-colorpicker [formControl]="ctrl" [inputId]="id" [ariaLabel]="tr(f.label) || f.key" />
+                }
+                @case ('custom') {
+                  <ng-container *ngTemplateOutlet="customTemplate(f)!; context: { $implicit: ctrl, field: f, id: id, labelId: id + '-label', error: err, invalid: !!err }" />
+                }
+                @default {
+                  <cb-input [formControl]="ctrl" [inputId]="id" [size]="sizeOf(f, ctx)" [type]="inputType(f)" [placeholder]="placeholderOf(f, pos)" [readonly]="isReadonly(f)" [hint]="tr(f.hint)" [error]="err ?? ''" />
+                }
+              }
+            </div>
+            @if (f.suffix) {
+              <span class="cb-df__addon" aria-hidden="true">{{ tr(f.suffix) }}</span>
+            }
+          </div>
+          @if (!ownsMessages(f)) {
+            @if (err) {
+              <p class="cb-df__message cb-df__message--error" role="alert" [id]="id + '-error'">{{ err }}</p>
+            } @else if (f.hint) {
+              <p class="cb-df__message" [id]="id + '-hint'">{{ tr(f.hint) }}</p>
+            }
+          }
+        </div>
+      </div>
+    </ng-template>
+  `, styles: [":host{--cb-df-gap-x: var(--cb-space-5, 1.25rem);--cb-df-gap-y: var(--cb-space-4, 1rem);display:block;width:100%;min-width:0;container-type:inline-size;color:var(--cb-color-text);font-family:var(--cb-font-sans)}.cb-df__form{display:grid;gap:var(--cb-space-6, 1.5rem)}.cb-df__steps{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin:0;padding:0;list-style:none}.cb-df__step{display:inline-flex;align-items:center;gap:.5rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-df__step-num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border:1.5px solid var(--cb-color-border-strong);border-radius:999px;font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__step[aria-current=step]{color:var(--cb-color-text);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__step[aria-current=step] .cb-df__step-num{border-color:var(--cb-color-primary-text, var(--cb-color-primary-700));background:var(--cb-color-primary-text, var(--cb-color-primary-700));color:var(--cb-color-bg)}.cb-df__step.cb-is-done .cb-df__step-num{border-color:var(--cb-color-success-text, #166534);color:var(--cb-color-success-text, #166534)}.cb-df__step-heading{margin:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600);outline:none}.cb-df__summary{padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 45%,transparent);border-left-width:4px;border-radius:var(--cb-radius-md);background:color-mix(in srgb,var(--cb-color-danger-500, #ef4444) 7%,var(--cb-color-bg));outline:none}.cb-df__summary:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-df__summary-title{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;color:var(--cb-color-danger-text, #dc2626);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__summary-list{display:grid;gap:.2rem;margin:0;padding-left:1.75rem;font-size:var(--cb-text-sm, .875rem)}.cb-df__summary-list a{color:var(--cb-color-danger-text, #dc2626);text-decoration:underline;text-underline-offset:2px}.cb-df__section{min-width:0;margin:0;padding:0;border:0}.cb-df__legend{margin-bottom:.25rem;padding:0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__section-desc{margin:0 0 .75rem;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-df__section--titled>.cb-df__grid{margin-top:.75rem}.cb-df__grid{display:grid;grid-template-columns:repeat(var(--df-cols-base, 1),minmax(0,1fr));gap:var(--cb-df-gap-y) var(--cb-df-gap-x);align-items:start;min-width:0}.cb-df__cell{grid-column:var(--df-col-base, auto)}@container (min-width: 30rem){.cb-df__grid{grid-template-columns:repeat(var(--df-cols-sm, 1),minmax(0,1fr))}.cb-df__cell{grid-column:var(--df-col-sm, auto)}}@container (min-width: 40rem){.cb-df__grid{grid-template-columns:repeat(var(--df-cols-md, 1),minmax(0,1fr))}.cb-df__cell{grid-column:var(--df-col-md, auto)}}@container (min-width: 60rem){.cb-df__grid{grid-template-columns:repeat(var(--df-cols-lg, 1),minmax(0,1fr))}.cb-df__cell{grid-column:var(--df-col-lg, auto)}}.cb-df__heading{margin:.5rem 0 0;font-size:var(--cb-text-base, 1rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__paragraph{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem)}.cb-df__divider{width:100%;margin:.25rem 0;border:0;border-top:1px solid var(--cb-color-border)}.cb-df__group{display:grid;gap:.75rem;min-width:0;margin:0;padding:.85rem 1rem 1rem;border:1px solid var(--cb-color-border);border-radius:var(--cb-radius-md)}.cb-df__group--plain{padding:0;border:0}.cb-df__group-title{padding:0 .25rem;font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-semibold, 600)}.cb-df__group--plain>.cb-df__group-title{padding:0;margin-bottom:.5rem}.cb-df__item{display:grid;gap:.6rem;padding:.75rem;border-radius:var(--cb-radius-md);background:var(--cb-color-surface-subtle)}.cb-df__item-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cb-df__item-title{color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem);font-weight:var(--cb-font-weight-semibold, 600);text-transform:uppercase;letter-spacing:.04em}.cb-df__field{--cb-df-label-width: 10rem;display:grid;gap:.375rem;min-width:0}.cb-df__label{color:var(--cb-color-text);font-size:var(--cb-text-sm, .875rem);font-weight:var(--cb-font-weight-medium, 500)}.cb-df__label--empty{display:none}.cb-df__req{margin-left:.15rem;color:var(--cb-color-danger-text, #b91c1c)}.cb-df__control{display:grid;gap:.375rem;min-width:0}.cb-df__message{margin:0;color:var(--cb-color-text-muted);font-size:var(--cb-text-xs, .75rem)}.cb-df__message--error{color:var(--cb-color-danger-text, #dc2626)}.cb-df__field--top.cb-df__field--inline{align-self:end;align-content:center;min-height:2.5rem}.cb-df__field--left,.cb-df__actions--left{grid-template-columns:var(--cb-df-label-width) minmax(0,1fr);column-gap:var(--cb-space-4, 1rem)}.cb-df__field--right{grid-template-columns:minmax(0,1fr) var(--cb-df-label-width);column-gap:var(--cb-space-4, 1rem)}.cb-df__field--right>.cb-df__label{order:2}.cb-df__field--left>.cb-df__label,.cb-df__field--right>.cb-df__label{padding-top:.6rem;line-height:1.3}.cb-df__field--end>.cb-df__label{text-align:end}.cb-df__field--left>.cb-df__label--empty,.cb-df__field--right>.cb-df__label--empty,.cb-df__actions--left>.cb-df__label--empty{display:block}.cb-df__field--left.cb-df__field--inline .cb-df__control,.cb-df__field--right.cb-df__field--inline .cb-df__control{padding-top:.5rem}.cb-df__field--floating{position:relative}.cb-df__field--floating>.cb-df__label{position:absolute;top:.65rem;left:.75rem;z-index:1;max-width:calc(100% - 3rem);overflow:hidden;padding:0 .25rem;color:var(--cb-color-text-muted);font-weight:400;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;transform-origin:left top;transition:transform var(--cb-duration-fast, .12s) var(--cb-ease, ease),color var(--cb-duration-fast, .12s) var(--cb-ease, ease)}.cb-df__field--floating:focus-within>.cb-df__label,.cb-df__field--floating.cb-df__field--filled>.cb-df__label{background:var(--cb-color-bg);color:var(--cb-color-text);transform:translateY(-1.15rem) scale(.82)}.cb-df__field--floating:focus-within>.cb-df__label{color:var(--cb-color-primary-text, var(--cb-color-primary-700))}.cb-df__sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.cb-df__addons{display:block;min-width:0}.cb-df__addons--on{display:flex;align-items:stretch}.cb-df__input{flex:1;min-width:0}.cb-df__addon{display:inline-flex;flex:none;align-items:center;height:2.5rem;padding:0 .75rem;border:var(--cb-border-width, 1px) solid var(--cb-color-border-strong);background:var(--cb-color-surface-subtle);color:var(--cb-color-text-muted);font-size:var(--cb-text-sm, .875rem);white-space:nowrap}.cb-df__addon:first-child{margin-right:-1px;border-radius:var(--cb-radius-md) 0 0 var(--cb-radius-md)}.cb-df__addon:last-child{margin-left:-1px;border-radius:0 var(--cb-radius-md) var(--cb-radius-md) 0}.cb-df__addon+.cb-df__addon{border-left:0}.cb-df__actions{--cb-df-label-width: 10rem;display:grid}.cb-df__buttons{display:flex;flex-wrap:wrap;gap:.5rem}@container (max-width: 30rem){.cb-df__field--left,.cb-df__field--right,.cb-df__actions--left{grid-template-columns:minmax(0,1fr)}.cb-df__field--left>.cb-df__label,.cb-df__field--right>.cb-df__label{order:0;padding-top:0;text-align:start}.cb-df__field--left>.cb-df__label--empty,.cb-df__field--right>.cb-df__label--empty,.cb-df__actions--left>.cb-df__label--empty{display:none}.cb-df__field--left.cb-df__field--inline .cb-df__control,.cb-df__field--right.cb-df__field--inline .cb-df__control{padding-top:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CbFormFieldTemplate), { isSignal: true }] }], schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], loaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "loaders", required: false }] }], translate: [{ type: i0.Input, args: [{ isSignal: true, alias: "translate", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formInvalid: [{ type: i0.Output, args: ["formInvalid"] }], formReset: [{ type: i0.Output, args: ["formReset"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
+
+/*
+ * Public API Surface de @caribeng/ui/dynamic-form
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CbDynamicForm, CbFormFieldTemplate, evaluateFormula };