Ico

Shows an icon based on the extName passed.

Features/Functionality

• Shows an icon based on the extName passed inside a div of min-height and min-width of '36px' and default font size of icon as '18px'.
• Gives Superscript and Subscript of icon.
• On Hover of the icon, tooltip is shown.
• Click event callback will called on click.
• Component is responsive.
• It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

• jquery
• font-awesome
• shared styles

HTML Structure

<require from="{user_path}/icos/ico"></require>

<cst-ico ext-name.bind="{name}" options.bind="{options}" other-info="{otherInfo}" tooltip.bind="{tooltip}" superscript.bind="{superscript}" subscript.bind="{subscript}" ext-disabled.bind="{disabled}" evt-click-callback.bind="{evtClickCallback}"></cst-ico>

Bindable Properties

Property Name	Data Type	Required	Decription
extElmId	string	No	Object of the icon
extName	string	Yes	Name of the icon to be mapped with class
options	object	No	To give other options with pageLabels and color obj
otherInfo	any	No	Any other info to be passed in event.
extTooltip	string	No	Value shown on hover of icon
superscript	string/number	No	Value to be shown as superscript of icon
subscript	string/number	No	Value to be shown as subscript of icon
extDisabled	boolean	No	Disables any functionality on component.
style	object	No	To give styles to components.
evtClickCallback	method	No	Method to be called when icon is clicked

Structure of bindable properties

extElmId

extElmId = '' // String value

extName

extName = '' // String value

options

options = {

pageLabel: {}, // Override page labels

pageColorData: {} // Override css colour porperty

}

style

style= {

removeSpacing: false,

isSmallSize: false

}

evtClickCallback

evtClickCallback(_event,_info);

_info = {

overrideContext: overrideContext,

otherInfo: otherInfo

}

CSS Overrinding

• Following classes are given to override CSS:
  • .cst-ico-container-override : Container Class

Note

• While giving the classes in page, give them in nested structure.
• Default icon font size is parent container font size

Rules

• Bind events with jquery if bind method is given.
• Use name property as external property so that change can be handled.
• 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="./shared/core_comp/icos/ico"></require>

<div>

<cst-ico ext-name.bind="iconName" options.bind="options" other-info.bind="otherInfo" tooltip.bind="iconTooltip" superscript.bind="iconSuperscript" subscript.bind="iconSubscript" ext-disabled.bind="disabled" evt-click-callback.bind="evtIconClick"></cst-ico>

</div>

</template>

CSS

.cst-ico-container-override {

width: 48px !important;

height: 48px !important;

}

JS

class MyCls{

constructor(){

this.iconName = "Save";

this.iconTooltip = "Save Icon";

this.iconSuperscript = 3;

this.iconSubscript = 1;

this.disabled = true;

}

evtIconClick(_evt,_info){

}

}

export { MyCls }

Example Screen Shots

Desktop

Active

Disabled

---

IE Desktop

Active

Disabled

---

Tab

Active

Disabled

---

Mobile

Active

Disabled

---

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	11-10-2019	Tarun	INTERNAL	Gunjan and Prasan	Prasan