Checkbox

• It is a checkbox.

Features/Functionality

• Click functionality on checkbox.
• Sets a boolean value in inputMdl.
• Component is container responsive.
• It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

• jquery
• font awesome
• shared styles
• shared scripts

HTML Structure

<require from="{user_path}/checkboxes/checkbox"></require>

<cst-checkbox label.bind="{label}" input-mdl.bind="{inputMdl}" options.bind="{options}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-click-callback.bind="{evtClickCallback}"></cst-checkbox>

Bindable Properties

Property	Data Type	Required	Description
label	string	No	Label to be shown.
inputMdl	boolean	No	Variable where initial data will be given and set.
options	object	No	Basic component options
otherInfo	any	No	Extra info to be passed on event
extDisabled	boolean	No	Disables any functionality on component.
evtClickCallback	method	No	Method to be called on click event.

Structure of bindable properties

options

options = {

pageLabel: {}, // Override page labels

pageColorData: {} // Override css colour property

}

evtClickCallback

evtClickCallback(_event,_info);

_info = {

overrideContext: overrideContext,

otherInfo: otherInfo,

value: true/false

}

CSS Overriding

• Following classes are given to override CSS:
  • .cst-checkbox-container-override : Container Class
  • .cst-checkbox-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

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

Working Example

HTML

<template>

<require from="./components/checkboxes/checkbox"></require>

<div>

<cst-checkbox label.bind="label" input-mdl.bind="inputMdl" options.bind="options" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-click-callback.bind="evtClickCallback"></cst-checkbox>

</div>

</template>

CSS

.cst-ex-checkbox {

.cst-checkbox-element-override {

padding-right: 40px !important;

}

.cst-checkbox-container-override{

justify-content: center !important;

}

}

JS

class MyCls{

constructor(){

this.otherInfo = {

qId : '1'

}

this.label = 'Label';

this.inputMdl = {};

this.options = {};

this.disabled = false;

}

evtClickCallback(_event,_info){

console.log(_event);

console.log(_info);

}

}

export { MyCls }

Example Screen Shots

Desktop

---

IE Desktop

---

Tab

---

Mobile

---

Demo Link
Demo

---

Mark down usage
https://guides.github.com/features/mastering-markdown/

Version	Date	Developed By	Information Classification	Reviewed By	Approved By
1.0	16-10-2019	Tarun	INTERNAL	Gunjan and Prasan	Prasan