hb-input-color

Category: inputs · Tags: inputs

Overview

hb-input-color is a form-oriented color field built on the native HTML type="color" control inside a Bulma-styled shadow tree. It is driven by a single schemaentry payload (JSON). The component normalizes initial value strings—named HTML colors and rgb(...) / comma-separated RGB forms—into a leading-# hex string suitable for the native picker, then keeps internal state in sync with a short debounced pass when the user changes the swatch.

Nothing is rendered until schemaentry parses successfully into an object with a usable shape; invalid JSON or a missing parseable object leaves the host empty.

Custom element

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

Attributes (web component)

Attributes use snake_case. In plain HTML, attribute values are strings. Pass schemaentry as a JSON string (escape quotes as required by your templating layer).

| Attribute | Required | Description | |-----------|----------|-------------| | schemaentry | Yes (for UI) | JSON string describing the field (see below). Invalid or missing JSON yields no rendered field. | | show_validation | No | "yes" or "no". When "yes", invalid required fields show validationTip in a danger help line. Default in implementation: "no". | | id | No | Optional id on the host element (component prop; not the same as the field id inside schemaentry). | | style | No | Optional inline styles on the host element. |

Boolean-like flags inside schemaentry follow the usual object/JSON rules (true / false in JSON—not the string "yes" / "no" on inner keys unless your serializer does that).

schemaentry shape

The TypeScript type is FormSchemaEntry in types/webcomponent.type.d.ts: shared form fields from FormSchemaEntryShared, with params narrowed to InputColorParams (Record<string, never>). params is not read by this component today; omit it or use {} so future options can be added without breaking authors.

Fields read by this component include:

| Field | Role | |-------|------| | id | string, required for setVal dispatch (the effect bails out if id is missing). Also set as the id attribute on the native <input type="color">. | | value | Optional initial color; coerced with String(...), then normalized (named colors → hex, RGB → hex) when applied from schema. | | required | When truthy, valid is false until the normalized string value has length greater than 1 (so a lone "#" is invalid). When falsy, the field is always considered valid. | | validationTip | Message shown when show_validation is "yes" and the field is invalid. | | placeholder | Forwarded to the native input (many browsers ignore placeholder for type="color"). | | readonly | Forwarded to the native input. | | disabled | When truthy, the native input is disabled. |

Other shared keys (for example label, type, dependencies, validationRegex) exist on the shared type for consistency with the form system; label is not rendered as visible markup in this component—only the color control and optional validation help are shown. validationRegex is not used in the current valid derivation.

Validation and setVal

valid is derived as: optional fields are always valid; required fields are valid when the current string value has length > 1 (after normalization from schema updates).

The component dispatches a setVal CustomEvent when the field is active, id is set, and the payload { value, valid, id } changes compared to the last dispatch (duplicate payloads are suppressed).

| Property | Type | Meaning | |----------|------|---------| | value | string | Current normalized value string (hex-oriented after boot from schema). | | valid | boolean | Whether the field satisfies the rule above. | | id | string | Same as schemaentry.id. |

Listen with addEventListener("setVal", ...) or your framework’s DOM event binding.

Behavior notes

• Normalization on load from schema: Named HTML colors are resolved via the internal color map; rgb(...) and similar comma forms are converted to hex (# prefix) where parsing succeeds.
• User input: The visible control is bound to colorVal; on input, a 200 ms debounced handler resets the canonical value from colorVal, so rapid changes do not thrash derived state.
• Schema sync: Updates from the parent schemaentry string are applied when the schema fingerprint changes (see ../lib/schemaentry.ts), avoiding feedback loops with local edits.

Styling

Bulma-derived styling is loaded from the component’s SCSS entry (styles/bulma.scss forwards Bulma modules and theme setup on :host). Theme tokens are standard --bulma-* variables documented in Bulma’s CSS variables guide.

CSS custom properties (:host)

| Variable | Role | |----------|------| | --bulma-text | Label and helper text color. | | --bulma-border | Border around the native color swatch. | | --bulma-danger | Invalid outline and danger help emphasis. | | --bulma-radius | Corner radius of the color control. | | --bulma-scheme-main | Surface tone where Bulma maps scheme colors onto inputs. |

The authoritative list for catalog metadata is mirrored in extra/docs.ts (styleSetup.vars).

CSS ::part API

| Part | Description | |------|-------------| | input | The native type="color" element (class hb-input-color-native). | | invalid-feedback | The p.help.is-danger node when show_validation is "yes" and the value is invalid. |

Slots

None (htmlSlots is empty in extra/docs.ts).

TypeScript

Authoring types live in types/webcomponent.type.d.ts: InputColorParams, FormSchemaEntry, Component, Events.

Examples

Minimal required color with initial hex value:

<hb-input-color
  schemaentry='{"id":"accent","required":true,"value":"#07689f"}'
  show_validation="no"
></hb-input-color>

Optional field (always valid regardless of empty value):

<hb-input-color
  schemaentry='{"id":"bg","required":false,"label":"Background"}'
></hb-input-color>

Show validation message when required and invalid:

<hb-input-color
  schemaentry='{"id":"brand","required":true,"validationTip":"Pick a color to continue."}'
  show_validation="yes"
></hb-input-color>

Disabled preset:

<hb-input-color
  schemaentry='{"id":"locked","value":"#ff5733","disabled":true,"label":"Theme (locked)"}'
></hb-input-color>

In JavaScript you can set schemaentry as an object where the custom-element layer maps props to attributes, but from HTML always pass the serialized JSON string on the attribute.

Package metadata

Display name and npm-style package key used in the builder catalog: hb-input-color / @htmlbricks/hb-input-color. See extra/docs.ts (componentSetup) for Storybook args, extended examples, and styleSetup.