Checkbox Group

It will repeat the checkboxes.
It is multi-select.

Features/Functionality

Click functionality on each checkbox.
It will repeat in horizontal direction but if the width of outer div is small, it will wrap.
Component is container responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependency

jquery
font awesome
shared styles
shared scripts

HTML Structure

<require from="{user_path}/checkbox_groups/checkbox_group"></require>
<cst-checkbox-group items.bind="{items}" input-ids.bind="{inputIds}" readable-items.bind="{readableItems}" options.bind="{options}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-click-callback.bind="{evtClickCallback}"></cst-checkbox-group>

Bindable Properties

Property	Data Type	Required	Description
items	array	Yes	Data to be passed to component.
inputIds	array	No	Array where selected checkbox' id will be set. It is two way communication array. Once the data sent will be set, then whatever selected value changes page can get it.
readableItems	array	No	To get selected value in this array. Inisially bind this array as empty.
options	object	No	Basic component options
otherInfo	any	No	Extra info to be passed on event
extDisabled	boolean	No	Disables any functionality on component.
style	object	No	Styles to be given to component.
evtClickCallback	method	No	Method to be called on click event.

Structure of bindable properties

items

items = [
    {
        id: '',            // id is required             
        label: ''
    },...
]

readableItems

readableItems = [];              // If we want selected value in this array, pass it as array

options

options = {
    propId: '',             // This is the key of items object, which we consider as id. Default value = 'id'.
    propLabel: '',          // This is the key of items object, which we consider as label. Default value = 'label'.
    pageLabel: {},          // Override page labels
    pageColorData: {}       // Override css colour porperty
}

style

style = {
    isVertical : false
}

evtClickCallback

evtClickCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    otherInfo: otherInfo,
    value: item
}

CSS Overriding

Following classes are given to override CSS:
- .cst-checkbox-group-container-override : Container Class
- .cst-checkbox-group-element-override: Element Class

Note

While giving the classes in page, give them in nested structure.

Rules

Bind events with jquery if bind method is given.
Use disabled property as external property so that change can be handled.
Do not use classes as bindable properties, Instead give a class overridable class name to div which we want to override and in page give the class inside the component div.
Always keep overridable, id and label property in options.
In Js file, the bindable properties names are changed.

Component measurements

Image of measurements

** box-sizing: border-box is used. So width and height will be dimensions + padding.

Working Example

HTML

<template>
  <require from="./components/checkbox_groups/checkbox_groups"></require>
  <div>
       <cst-checkbox-group items.bind="items" input-ids.bind="inputIds" readable-items.bind="readableItems" options.bind="options" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-click-callback.bind="evtClickCallback"></cst-checkbox-group>
  </div>
</template>

CSS

.cst-ex-checkbox-group{
    .cst-checkbox-group-element-override {
        margin-right : 20px !important;
    }

    .cst-checkbox-group-container-override {
        justify-content: center !important;
    } 
}

class MyCls{
    constructor(){
        this.otherInfo = {
            qId : '1'
        }
        this.items = [
                {
                    key: 1,
                    value: 'English'
                },
                {
                    key: 2,
                    value: 'Hindi'  
                },
                {
                    key: 3,
                    value: 'Kannada'
                }   
        ];
        this.inputIds = [1,3];
        this.options = {
            propId: 'key',          // If items object's property is not id
            propLabel: 'value'      // If items object's property is not label
        };
        this.disabled = false;
        this.readableItems = []
    }

    evtClickCallback(_event,_info){
        console.log(_event);
        console.log(_info);
    }
}
export { MyCls }