Icon
Definition
<cst-icon>
<sub-theme/>
<sub-font/>
<sub-style/>
<sub-access/>
<sub-icon-name/>
<sub-subscript/>
<sub-superscript/>
<sub-feature-flag/>
</cst-icon>
Example
<cst-icon id="" value="">
<sub-theme name="" clr-var1="" clr-var2=""/>
<sub-font name="" font-var1="" font-var2=""/>
<sub-style name="" width="" height=""/>
<sub-access can-view="" can-modify=""/>
<sub-icon-name name=""/>
<sub-subscript text=""/>
<sub-superscript text=""/>
<sub-feature-flag>
</cst-input>
OR
<cst-element name="icon" schema="" schema-prop=""/>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| disabled | boolean type | Specifies if component should be disabled.(aurelia ext attribute) |
| class | Specifies class to be applied(Multiple classes can be given with space). | |
| object type | Specifies theme to be used for component. | |
| object type | Specifies fonts to be used for component. | |
| object type | Specifies style to be applied to component. | |
| object type | Specifies access of the component. | |
| object type | Specifies icon name. | |
| object type | Specifies subscript displayed. | |
| object type | Specifies superscript displayed. | |
| object | Specifies what features to enable/disable. | |
| other | any type | Any other info. |
| schema | object type | Specifies JSON schema. |
| schema-prop | string type | Specifies property to be used to pick schema. |
Sub element attributes
sub-theme
| Property | Value | Description |
|---|---|---|
| name | primary(default)/secondary/custom | Name of the theme. |
| clr-label | string type | If custom then specific/ named color variables |
sub-font
| Property | Value | Description |
|---|---|---|
| name | roboto (default)/custom | Name of the font |
| font-text | string type | If custom then specific/ named font variables. |
| font-label | string type | |
| font-error | string type |
sub-style
| Property | Value | Description |
|---|---|---|
| name | material/font-awesome | Name of design to be used. |
| width | percentage/pixels/string(x-small,small,medium,large,x-large) | Gives width/any other prop value |
sub-icon-name
| Property | Value | Description |
|---|---|---|
| name | string type | Name of icon to be shown. (Aurelia ext attribute) |
sub-subscript
| Property | Value | Description |
|---|---|---|
| text | string type | Text to be shown as subscript |
sub-superscript
| Property | Value | Description |
|---|---|---|
| text | string type | Text to be shown as superscript |
sub-feature-flag
| Property | Value | Description |
|---|
Schema Examples
Full schema
Fetch appropriate based on schemaProp
let schema = {
type: "object",
required: [""], //= required
properties: {
closeIcon: {
type: "string",
cstAttr: {
raw:{ //loop & add to element
disabled : true,
class:'outline cst-class1'
},
subIcon: {
name: ''
tooltip:'',
superScript:'',
subScript:''
},
others:{
},
subStyle:{ //loop & add to element style
name: '',
width:'',
height:'',
fontSize:''
},
subFeatureFlag: {
charCountHide: true
},
subTheme:{
name:'',
clrLabel:''
},
subFont:{
name:'',
fontText:'',
fontLabel:'',
fontError:''
},
subSubscript: {
text:""
},
subSuperscript: {
text: ""
},
subIconName: {
name:""
}
}
}
}
}
let schemaProp = 'closeIcon';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Exact schema
let schema = {
type: "string", //= type 'text'
cstAttr: {
}
}
let schemaProp = '';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Nested object
Nested object schemaProp
let schema = {};
let schemaProp = 'EMDDetails.closeIcon';
let value = 'CLOSE'
var finalSchema = schema;
let schemaPropSplits = schemaProp.split('.');
for(let prop of schemaPropSplits){
finalSchema = finalSchema.properties[schemaProp];
}
Material Measurement Guidelines
- Total Width = 48px
- Total Height = 48px
Events
| Attribute | Description |
|---|---|
| onclick | Fires when the element is clicked. |
| onhover | Fires when the element is hovered. |
Event Method signature
method(parentRefObj, evtObj, elm, others)
Parameters description
| Parameter | Value | Description |
|---|---|---|
| parentRefObj | parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext } | Parent Context references |
| evtObj | object | Event object |
| elm | object | Element value |
| others | any | Other value |
OverRidable Classes
- cst-ovr-icon-elm
- cst-ovr-icon
Unit Test Screenshots
Responsiveness Test Screenshots
Design Images
Demo link
Points
- event callback consistency (evtObj, elm, others,...) //check other libs
- over-rideable classes (cst-ovr-elm) for label, textbox, icons, helper text, error text //check other libs
- fonts (text - Subtitle 1 - Regular 16, Label - Caption - Regular 12)
- EXT trigger cases
- Check logging, security, performance & flexibility