hb-input-coords — input-coords

Category: inputs
Tags: inputs, maps

What it does

Latitude/longitude editor that embeds hb-map (marker and map source / options from schemaentry.params) and two hb-input-number fields, with labels translated via optional i18nlang. Supports initial value and params such as zoom and center. Registers hb-map and hb-input-number and dispatches setVal with { lat, lon } as value, plus valid and id. Layout uses flex columns in the shadow root; validation uses Bulma help is-danger. Required validation treats (0, 0) as unset (same as the previous lat && lon check).

Styling (Bulma)

Shadow bundle: form/shared, form/input-textarea, form/tools. Map and number fields keep their own styles.

Custom element

hb-input-coords

Attributes (snake_case; use string values in HTML)

• id — optional string
• style — optional string
• schemaentry — required string (JSON: id, label?, required?, value as { lat, lon }, validationTip?, params for map/zoom/center/labels/placeholders)
• show_validation — optional "yes" | "no"
• i18nlang — optional string

Events

• setVal — { value: { lat: number; lon: number }; valid: boolean; id: string }

Usage notes

CSS part: invalid-feedback. Ensure map-related params match your deployment (tiles/source).

Minimal HTML example

<hb-input-coords
  schemaentry="{&quot;id&quot;:&quot;loc&quot;,&quot;required&quot;:true,&quot;value&quot;:{&quot;lat&quot;:45.4,&quot;lon&quot;:9.2}}"
  show_validation="no"
></hb-input-coords>