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

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

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.