hb-input-number

Description

Native <input type="number"> bound to schemaentry with optional min / max from params (attributes are set only when the corresponding key exists on params). Validates required fields and range; with no min/max params it dispatches clickEnter on Enter. Emits setVal with { value, valid, id }. With show_validation === "yes" and required, the field uses Bulma input.is-success / input.is-danger and shows validationTip as help is-danger when invalid. Use is_small="yes" for Bulma input.is-small (compact control, e.g. next to hb-paginate). On type="number", spin buttons are hidden so the control height matches compact selects (values are still editable with the keyboard).

Styling (Bulma)

The component bundles Bulma 1.x form styles (form/shared, form/input-textarea, form/tools) scoped to the shadow root, with theme defaults on :host (--bulma-hb-def-*). Set public --bulma-* on body or :root; they inherit onto the custom element host.

Markup pattern:

• Wrapper: div.hb-input-number-root around input.input (Bulma control styling).
• Validation: is-success / is-danger on the input when show_validation === "yes" and schemaentry.required is set.
• Help: p.help.is-danger with part="invalid-feedback" when show_validation === "yes" and the value is invalid.

Types

export type FormSchemaEntry = {
  id: string;
  label?: string;
  value?: number;
  readonly?: boolean;
  required?: boolean;
  validationRegex?: string;
  validationTip?: string;
  placeholder?: string;
  params?: Record<string, any>;
};

export type Component = {
  id?: string;
  style?: string;
  show_validation?: "yes" | "no";
  is_small?: "yes" | "no";
  schemaentry: FormSchemaEntry | undefined;
};

export type Events = {
  setVal: { value: number; valid: boolean; id: string };
  clickEnter: { value: string; valid: boolean; id?: string };
};