sbb-chip-group: initial implementation

[mcilurzo]

Feature Description

We want to implement the sbb-chip-group component. It holds a list of sbb-chip that the user can add or remove.
It is mainly meant to be used inside an sbb-form-field, connected to an input.

Figma
Figma 2

Design Specification

• The user can add new chips by typing and pressing the "enter" key;
• Only one chip is focusable at any moment (generally the last one);
• If the input is empty and the "delete" key is pressed, the last chip is focused;
• Chips can be removed unless they are readonly or disabled
• It should be possible to also connect an sbb-autocomplete to the same input element. When an option is selected, it should also add the corresponding sbb-chip (as if the user had pressed enter)
• the sbb-chip-group is a flex container that wraps horizontally. The input should wrap with it which means that it needs to be the last child of the sbb-chip-container (ensure the consistency of the sbb-form-field logic and style)

Keyboard interaction

• You can navigate chips through arrow keys;
• Each chip has two navigation steps, one for the chip and the second for the delete button
• If the input is focused (and empty), the 'detete' key moves the focus to the last chip;
• If a chip is focused, the 'detete' key removes it;

Technical Specification

• sbb-chip-container is a form-associated element
• When the user adds a new chip, the sbb-chip-group creates a new sbb-chip and appends it to the Light DOM
• the value is a get/set property that queries for non-disabled sbb-chip and returns an array of their values
• sbb-chip-group optionally connects to an input through the for property. If possible, it connects automatically if in an sbb-form-field

A11y

Angular material uses

• role="grid" for the container
• role="row" for the chip
• Two role="gridcell", one for the label container and one for the delete button

HTML Usage

<sbb-form-field>
  ...
  <sbb-chip-group name="...">
    <sbb-chip value="value">Label value</sbb-chip>
    <sbb-chip [disabled] [readonly]>Label</sbb-chip>
    ...
    <input />
  </sbb-chip-group>
</sbb-form-field>

[TomMenga]

[WIP] Draft proposal:

• Container name: sbb-chip-group, sbb-chips-set or sbb-chips-list;
• sbb-chips is a form-associated element
• sbb-chips connects to an input. May connect automatically if in a form-field

<sbb-form-field>
  ...
  <sbb-chips for="inputId" name="...">
    <sbb-chip>Label</sbb-chip>
    <sbb-chip [disabled] [readonly]>Label</sbb-chip>
  </sbb-chips>

  <input id="inputId" />
</sbb-form-field>