hb-funnel

Category: forms · Tags: forms, multistep

Summary

Multi-step funnel over hb-form: pass an array of schemas (one per step). Renders one inner form for the active step; valid submit merges values into the step schema and advances or fires final submit.

What it does

1. Parse: schemes as JSON string → parsedSchemes ({ schema, valid }[]); then clears schemes to [] in memory.
2. Form snapshot: schema passed to inner hb-form as JSON string; refreshed when schemes load or step changes, not on every update (stable typing).
3. Navigation: Italian labels — Indietro, Avanti, Salva; submitstep toggles yes to trigger inner submit/validation.
4. Events: update on inner form updates (debounced from child) updates current step valid only; submit when last step validates.

Custom element

hb-funnel

Attributes

| Attribute | Type (logical) | HTML / notes | | --- | --- | --- | | schemes | string | FormSchema[] | JSON: array of schemas (each schema is a FormSchema / array of entries). | | step | number | string | 1-based index (default 1). | | steps | number | string | Fallback count before schemes parsed. | | submitstep | "yes" | "no" | Drives inner submitted; non-yes normalized to no. | | id | string (optional) | Passed to inner hb-form id pattern. | | style | string (optional) | In typings. |

Custom events

| Event name | detail shape | | --- | --- | | update | { step: number; scheme: { schema: FormSchema; valid: boolean }; valid: boolean } | | submit | { schemes: { schema: FormSchema; valid: boolean }[]; steps: number; step: number } |

Styling

No dedicated host vars or parts in extra/docs.ts; Bulma --bulma-* via nested hb-form.

Slots

None.

TypeScript

types/webcomponent.type.d.ts — Component, Events, FunnelStepSchemes. Shared FormSchema: builder/src/wc/form/types/webcomponent.type.d.ts.

Minimal HTML example

<hb-funnel
  schemes='[[{"type":"text","id":"name","label":"Name","required":true}]]'
></hb-funnel>