Block Group Work flow

Bindable Properties

1. items
2. inputId
3. readableItem
4. options
5. otherInfo
6. extDisabled
7. evtClickCallback

Overview

• Repeats the blocks as per items array values.
• Based on inputId, default active block will be set.
• It will repeat in horizontal direction but if the options.isVertical is true, it will change the direction.
• In small screen, direction will be vertical by default.
• Component is responsive.
• It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Defaults

• !items.length, label will display = 'No data to display!'
• !options, options = empty object.
• options.isVertical = false.
• Block's:
  • min-width: 100px
  • min-height: 50px
• inputId can be integer or string, based in options.propId.

Breakdown

• Defaults will be set.
• On page load, active block will be set based on inputId.
• Setting active block
  • As per inputId == item[options.propId], Active block will display
• On click of any block
  • If disabled is false, set the active block.
  • If click call back is defined, call the callback by passing data.
• On css override
  • .cst-block-group-container-override : Container Class
  • .cst-block-group-element-override: Element Class
• If we pass readableItem as blank object, we will get selected object in readableItem.