hb-input-coords

Category: inputs · Tags: inputs, maps

Latitude and longitude editor for forms and standalone pages. It embeds hb-map for picking a point on the map and two hb-input-number fields for numeric latitude and longitude. The host passes a single JSON schemaentry describing the field; the component dispatches setVal whenever the effective value or validity changes.

This package registers @htmlbricks/hb-map and @htmlbricks/hb-input-number as dependencies (same bundle version).

Features

• Map + inputs: Click the map to set coordinates; edit lat/lon in the number fields; both stay in sync.
• Responsive layout: Map and fields sit side by side from the tablet breakpoint up; on smaller screens the map stacks above the fields.
• Validation: Optional inline help when show_validation="yes". For required fields, coordinates (0, 0) are treated as “empty” (invalid), so you can distinguish “not set” from a real position at the origin only when the field is not required.
• Disabled state: With disabled: true on the schema entry, the map is non-interactive (reduced opacity, no pointer events) and both number inputs are disabled.
• Labels: Built-in English strings can be overridden per field via schemaentry.params or by passing i18nlang for the bundled dictionary.

Custom element

| Name | Tag | | --- | --- | | hb-input-coords | <hb-input-coords …></hb-input-coords> |

Attributes

Web component attributes are strings. Use yes / no for booleans where noted. Object-shaped data (the whole schema entry) must be JSON serialized into the attribute value.

| Attribute | Required | Description | |-----------|----------|-------------| | schemaentry | Yes | JSON string describing the field (see below). If missing or invalid JSON, nothing is rendered. | | show_validation | No | "yes" or "no" (default "no"). When "yes" and the field is invalid, validationTip is shown in the danger help area (see ::part). | | i18nlang | No | Locale hint for built-in words (e.g. latitude / longitude labels and placeholders). | | id | No | Optional id on the host element. | | style | No | Optional inline styles on the host element. |

schemaentry JSON shape

The payload follows the shared form schema entry shape (see ../form/types/webcomponent.type.d.ts — FormSchemaEntryShared) plus this component’s value and params:

| Property | Description | |----------|-------------| | id | Required. Stable field id; included on every setVal detail. | | label | Optional main label context (child inputs use lat/lon-specific labels from params or i18n). | | required | If true, (lat === 0 && lon === 0) fails validation. | | disabled | If true, map and inputs are non-interactive. | | validationTip | Message shown when show_validation is yes and the value is invalid. | | value | Optional { "lat": number, "lon": number } — initial or controlled coordinates. | | params | Optional InputCoordsParams (see types file) — map and UI tuning. |

params (InputCoordsParams)

| Key | Description | |-----|-------------| | zoom | Default map zoom when the entry is applied from schema (fallback 14 if unset). | | center | [lng, lat] (or map center tuple) typed for the embedded map (InputCoordsParams in types/webcomponent.type.d.ts). | | source | InputCoordsMapSource: { "type": string, "url"?: string } passed to hb-map (defaults to { "type": "osm" } when omitted). | | options | InputCoordsMapOptions, e.g. { "centerFromGeometries": true } (default when omitted). | | latitudeLabel / longitudeLabel | Override labels on the two number fields. | | latitudePlaceholder / longitudePlaceholder | Override placeholders. |

Events

Listen for setVal on the host. The detail matches Events in types/webcomponent.type.d.ts:

| Event | detail | |-------|----------| | setVal | { value: { lat: number; lon: number } \| undefined; valid: boolean; id: string } |

The component avoids redundant dispatches when the payload is unchanged. valid reflects the current rules (including the (0,0) rule for required fields).

Styling

Bulma is loaded in the shadow root with --bulma-* tokens for text, borders, danger help, and accents used by nested controls. Component-specific sizing is controlled on :host:

| CSS variable | Purpose | |--------------|---------| | --hb-input-coords-height | Optional height of the whole block (e.g. 400px, 60vh). Map and coordinate columns stretch to match. When unset, height follows the coordinates column on larger breakpoints (map matches that row height). | | --hb-input-coords-map-min-height | Optional minimum height of the map column on tablet+ when the coordinate block is shorter. | | --hb-input-coords-map-stacked-min-height | Minimum map height when columns stack (mobile). Default chain includes --hb-input-coords-map-height then 280px. | | --hb-input-coords-map-height | Legacy fallback for stacked map minimum height when --hb-input-coords-map-stacked-min-height is unset (default 280px). | | --bulma-text, --bulma-border, --bulma-danger, --bulma-link | Bulma theme tokens (see extra/docs.ts / styleSetup). |

::part names

| Part | Description | |------|-------------| | invalid-feedback | The p.help.is-danger node when show_validation="yes" and the coordinates are invalid. |

There are no light-DOM slots for this component.

TypeScript

Authoring types live in types/webcomponent.type.d.ts:

• Component — host props
• Events — custom event payloads
• FormSchemaEntry, InputCoordsParams, InputCoordsMapSource, InputCoordsMapOptions

Built packages also emit types/html-elements.d.ts and types/svelte-elements.d.ts for DOM and Svelte consumers.

HTML example

Pass schemaentry as a single JSON string. Using single quotes on the attribute keeps the inner JSON readable:

<hb-input-coords
  schemaentry='{"id":"location","required":true,"label":"Pickup point","validationTip":"Choose a valid point on the map.","value":{"lat":45.4642,"lon":9.19},"params":{"zoom":12,"source":{"type":"osm"},"options":{"centerFromGeometries":true}}}'
  show_validation="yes"
  i18nlang="en"
></hb-input-coords>

Minimal required-only example:

<hb-input-coords
  schemaentry='{"id":"coords","required":true}'
  show_validation="no"
></hb-input-coords>

document.querySelector("hb-input-coords").addEventListener("setVal", (e) => {
  console.log(e.detail.value, e.detail.valid, e.detail.id);
});

Related metadata

Storybook knobs and catalog-style metadata (description, styleSetup, examples) are maintained in extra/docs.ts (componentSetup).