Quick Icons

It will repeat the set of icons.
Each icon have click callback.

Features/Functionality

Click functionality on each icon.
It will repeat in vertical direction.
Direction, shade, size can be change by passing values in options.style.
Click event callback will called on click.
Component is 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}/quick_icons/quick_icon"></require>
<cst-quick-icons ext-items.bind="{items}" options.bind="{options}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-click-callback.bind="{evtClickCallback}"></cst-quick-icons>

Bindable Properties

Property	Data Type	Required	Description
extItems	array	Yes	Data to be passed to component.
options	object	No	Basic component options
extActiveId	string	No	As per extActiveId, active icon will display.
extDisabled	boolean	No	Disables any functionality on component.
evtClickCallback	method	No	Method to be called on click event. It should be return promise

Structure of bindable properties

extItems

extItems = [
    {
        id: '',            // id is required             
        iconName: '',
        iconSuperScript: '',
        iconSubScript: '',
        title: '',
        label: '',
        position: '',       // start,center,end. Default: center
        redirectRoute: '',
        isGoBack: ''          // If true, redirect to previous window
    },...
]

options

options = {
    propId: '',             // extItems object id prop's key. Default = 'id'
    propIconName: '',       // extItems object iconName prop's key. Default = 'iconName'
    propIconSuperScript: '',// extItems object iconSuperScript prop's key. Default = 'iconSuperScript'
    propIconSubScript: '',  // extItems object propIconSubScript prop's key. Default = 'propIconSubScript'
    propTitle: '',          // extItems object title prop's key. Default = 'title'
    propLabel: '',          // extItems object label prop's key. Default = 'label'
    propPosition: '',       // extItems object propPosition prop's key. Default = 'propPosition'
    propRedirectRoute: '',  // extItems object redirectRoute prop's key. Default = 'redirectRoute'
    propIsGoBack: '',        // extItems object isGoBack prop's key. Default = 'isGoBack'
    styleType: '',           // hoverBox,hoverCircle. Default candy
    styleSize: '',           // grow,shrink. Default grow
    styleDirection: '',      // row, column. Default column
    styleTitleType: '',      // colHoverBoxLTR, colHoverBoxRTL. Default: no default. If given then only work in direction column and type hoverBox
    styleShade: '',          // light,dark. Default light
    pageLabel: {},          // Override page labels
    pageColorData: {}       // Override css colour property
}

evtClickCallback This function should return promise.

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

CSS Overrinding

Following classes are given to override CSS:
- .cst-quick-icons-container-override : Container Class
- .cst-quick-icons-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/quick_icons/quick_icon"></require>
  <div>
    <cst-quick-icons ext-items.bind="items" options.bind="options" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-click-callback.bind="evtClickCallback"></cst-quick-icons>
  </div>
</template>

CSS

.cst-ex-quick-icon {
    .cst-quick-icons-element-override {
        width: 80px !important;
        height: 40px !important;
        background-color: white !important;
        color: blue !important;
    }

    .cst-quick-icons-container-override{
        justify-content: center !important;
    }
}

class MyCls{
    constructor(){
        this.otherInfo = {
            qId : '1'
        }
        this.items = [
                {
                    key: 1,
                    value: 'Home',
                    iconName: 'HOME'
                },
                {
                    key: 2,
                    value: 'Contact Us' ,
                    iconName: 'PHONE' 
                },
                {
                    key: 3,
                    value: 'List',
                    iconName: 'LIST' 
                }   
        ];
        this.options = {
            propId: 'key',          // If extItems object's property is not id
            propLabel: 'value'      // If extItems object's property is not label,
        };
        this.disabled = false;
    }

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