Split time input component (with subfields for each part)

[rolfsmeds]

Description

An alternative to TimePicker composed of 2+ sub-fields for hours, minutes, seconds, etc, with support for text entry, dropdown selection and spinner (up & down arrows) for setting the value in each.

Also see https://github.com/vaadin/platform/issues/7105

Motivation

The TimePicker component is a bit limiting in that it represents time as a single unitary field, and provides a single dropdown for selecting both hours and minutes. In many use cases, a field split into hours, minutes, seconds etc, with either dropdowns or spinners for each, can be more convenient.

Acceptance criteria

• [ ] Split-field similar to DateTimePicker
• [ ] Configurable to 24 or 12 hour format
  • [ ] 12 hour format provides am/pm toggle
  • [ ] Default based on locale
• [ ] Configurable resolution: minutes or seconds (millisecond support could be added later)
• [ ] Can be configured to render sub-fields as either
  • [ ] Combo-boxes with autogenerated values, or
  • [ ] Spinners (up & down arrows increment/decrement)
• [ ] Allows specifying a step size for each part
  • [ ] Step size only affects dropdown options / spinner steps, not validation
• [ ] Configurable to auto-increment to the next sub-field after filling in valid value in current sub-field
• [ ] Clear button at the end (non-focusable, with Esc as kbd-equivalent)
• [ ] i18n:
  • [ ] Sub-field placeholders
  • [ ] Sub-field aria-labels that are automatically prefixed with root label/aria-label

Possible later enhancements

• API for providing a callback function that evaluates valid values in each sub-field (this would allow e.g. updating available minute options based on the currently selected hour)
• Style variant that looks like a single unitary field (with separator chars instead of gaps between subfields)

General criteria

• [ ] APIs reviewed

• [ ] Design

• [ ] Performance

• [ ] UX/DX tests in Alpha

• [ ] Documentation:

• [ ] How to test?

• [ ] Limitations:

Security

• [ ] Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)