Card Count Group

It will repeat the Cards to display heading with rolling numbers.

Features/Functionality

Click functionality on each card.
It will repeat in horizontal direction but if the width of outer div is small, it will wrap.
Click event callback will be called on click.
If click callback is not there, right arrow icon will not visible.
Component is 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}/card_groups/card_group"></require>
<cst-card-count-group ext-items.bind="{extItems}" options.bind="{options}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-click-callback.bind="{evtClickCallback}"></cst-card-count-group>

Bindable Properties

Property	Data Type	Required	Description
extItems	array	Yes	External change data to be passed to component.
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.
evtIconClickCallback	method	No	Method to be called on icon click event.

Structure of bindable properties

extItems

extItems = [
    {
        title: '',                  
        count: '',              //Max 10 digit
        totalCount: '',         //Max 10 digit
        icons: [
            {
                id: '',         
                name:'',
                tooltip:'',
                superscript: '',
                subscript: ''
            }
        ]
    },...
]

options

options = {
    propTitle: '',              // This is the key of extItems object, which we consider as title. Default value = 'title'.
    propCount: '',              // This is the key of extItems object, which we consider as count. Default value = 'count'.
    propTotalCount: '',         // This is the key of extItems object, which we consider as totalCount. Default value = 'totalCount'.
    propIconId:'',              // This is the key of extItems.icons object, which we consider as consider as id. Default value = 'id'
    propIconName: '',           // This is the key of extItems.icons object, which we consider as consider as name. Default value = 'name'
    propIconTooltip: '',        // This is the key of extItems.icons object, which we consider as consider as tooltip. Default value = 'tooltip'
    propIconSuperscript = '',   // This is the key of extItems.icons object, which we consider as consider as superscript. Default value = 'superscript'
    propIconSubscript = '',     // This is the key of extItems.icons object, which we consider as consider as subscript. Default value = 'subscript'
    pageLabel: {},              // Override page labels
    pageColorData: {}           // Override css colour porperty
}

evtClickCallback

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

evtCardIconClickCallback

evtCardIconClickCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    value: {
        data: _info.value,
        cardValue: _info.otherInfo
    }
}

CSS Overrinding

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

Note

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

Rules

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/card_count_groups/card_count_groups"></require>
  <div>
       <cst-card-count-group ext-items.bind="items" options.bind="options" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-click-callback.bind="evtClickCallback"></cst-card-count-group>
  </div>
</template>

CSS

.cst-ex-card-count{

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

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

}

class MyCls{
    constructor(){
        this.items = [
                {
                    title : 'Total match',
                    count : 240,
                    detail : ''
                },
                {
                    title : 'Win',
                    count : 190,
                    detail : ''
                },
                {
                    title : 'Lose,
                    count : 40,
                    detail : ''
                },
                {
                    title : 'Draw',
                    count : 10,
                    detail : ''
                }  
        ];
        this.options = {
            propTitle : 'title',
            propCount : 'count',
            propDetail: 'detail'
        };
        this.otherInfo = null;
        this.disabled = false;
    }

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