Platform: CheckboxGroup Technical Design

Summary

CheckboxGroup provides multi-select option built on top of Checkbox component. Since we dont want to layout checkbox 1 by 1 we need to create this component aggregating its functionalities.

Just like every input control it needs to implement the FormFieldControl as described in the FormGroup Layout or extend existing BaseInputComponent to leverage some of the functionality. This documents focuses only on new and specific bindings to this component

Platform vs. Core Implementation

• Core does not have an implementation of checkbox group component, instead requires user to build group using individual Checkbox components.
• A CheckboxGroup component allows end user to provide input choices via a data list.
• The Platform CheckboxGroup component will implement the FormFieldControl interface, thus can be used with in the FormField component.

1. Render selection based on data list

<fdp-checkbox-group id="myFavColors" [name]="colors" [list]="colors" [isInline]="true" >
</fdp-checkbox-group>

List should be able to accept both primitive values as well as complex object to do this we need to work with following type definition.

list: Array<SelectItem | string>;

Where select SelectItem is a interface object needs to implement

/**
 * Interface SelectItem is used to deal with complex object in order to be able to format
 * custom label that is shown in the options.
 */
export interface SelectItem {
  /**
   * Item text shown in the popup
   */
  label: string;

  /**
   * References to the object instance
   */
  value: any;
  disabled?: boolean;

  /**
   * Trigger values is a text for selected item
   */
  triggerValue?: string;
}

Bindings

• list: List of items to be rendered
• isInline: Tells how the checkboxes should be rendered: stack or inline format.
  • by default its not Inlined

2. Selection based on custom option

Providing individual options let us easily localize given values.

<fdp-checkbox-group id="myFavColors" [name]="colors"   [(ngMode))]="colors">
    <fdp-option [value]="Red">Red Color</fdp-option>
    <fdp-option [value]="Blue">Blue Color</fdp-option>
    <fdp-option [value]="Yellow">Yello Color</fdp-option>
</fdp-checkbox-group>

Binding fdp-option

fdp-option should be common that also a dropdown is using.

• value: current value for given optino
• disabled: Tells if the option should disabled and non-clickable

Events

• change: Fires event when option is selected, passing current selection

Implementation notes:

Since we need work with fdp-option differently than just simply calling <ng-content selector='ddd'>, we need to implement fdp-options following way in order to get hold of all the bindings and content in it.

• It will be a component with a template and styling
• FdpCheckBoxComponent will use

  @ContentChildren(FdpOptionComponent, {descendants: true})
  _options: QueryList<FdpOptionComponent>;

• The template should not be implemented with just <ng-content> but it should be wrapped with ng-template to prevent rendering.

<ng-template #renderingTemplate>
  ... <ng-content></ng-content>
</ng-template>

This way not only we can easily iterate over _options inside the <fdp-checkbox-group> to access each bindings but also easily render a content using <ng-container> when we need to.

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-checkbox-group's fdp-options can be supported with string binding:

    <fdp-option i18n-value="@@red" value="Red">Red Color</fdp-option>
    <fdp-option i18n-value="@@blue" value="Blue">Blue Color</fdp-option>
    <fdp-option i18n-value="@@yellow" value="Yellow">Yellow Color</fdp-option>

Redesign Required: No

---

#Notes: Manju:

1. Where is the support for 'tristate'?
2. Where is the attribute for list of checkboxes inside the group?
3. Property binding of individual checkboxes to reflect tristate of the group is missing.