Block Group
- Graphics Link
Definition
<cst-block-group>
<sub-theme/>
<sub-font/>
<sub-style/>
<sub-access/>
<sub-item/>
<sub-item/>
<sub-options />
<sub-help-icon/>
<sub-feature-flag/>
</cst-block-group>
OR
<cst-element name="block-group" schema="" schema-prop="" value=""/>
Example
<cst-block-group 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-item text="" id="" icon-name="" lr-icons=""/>
<sub-item text="" id="" icon-name="" lr-icons=""/>
<sub-options items-prop="" item-text-prop="" item-id-prop=""
item-icon-name-prop="" lr-icons-prop="" />
<sub-help-icon name="" position="" title="" link="">
<sub-feature-flag allow-icon="">
</cst-block-group>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| value | string type | Specifies the selected item's id for component.(two way bind attribute) |
| required | boolean type | Specifies if field must be required. |
| disabled | boolean type | Specifies if component should be disabled.(aurelia ext attribute) |
| class | cst-block-group | 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 the options of the component. | |
| object type | Specifies help icon to be 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 | name of the style | Name of design to be used. |
| width | percentage/pixels/string(x-small,small,medium,large,x-large) | Gives width/any other prop value |
sub-options
| Property | Value | Description |
|---|---|---|
| items-prop | string type | Property of item array |
| item-id-prop | string type | Property of item's id. |
| item-text-prop | string type | Property of item's text, display as label. |
| item-icon-prop | string type | Property of item's icon which will displays at top center of the component |
| item-lr-icons-prop | string type | Displays the icons near to the item text |
sub-help-icon
| Property | Value | Description |
|---|---|---|
| name | string type | Icon name. |
| position | left/right | Position of the icon. |
| title | string type | Icon tooltip |
| link | string type | Link to be opened on click. |
sub-feature-flag
| Property | Value | Description |
|---|---|---|
| allow-icon | boolean type | Specifies to display icon as per selected value if allow-range = false |
Schema Examples
Full schema
Fetch appropriate based on schemaProp
let schema = {
type: "object",
required: ["feedbackId"], //= required
properties: {
feedbackId: {
type: "string",
title:"Rate Us",//= label
cstAttr: {
raw:{ //loop & add to element
disabled : true,
class:'outline cst-class1',
required: true
},
subStyle:{ //loop & add to element style
name: '',
width:'',
height:'',
fontSize:''
},
subOptions:{
itemsProp: '',
itemIdProp: '',
itemTextProp: '',
// Display icon at top center,
// if allow icon is true, it will display only icons
itemIconProp: '',
// Display icon near to item text
itemLrIconsProp: ''
},
subHelpIcon: {
name: '',
position: '',
title:'',
link:''
},
subFeatureFlag: {
allowIcon: '',
isDisplayLabel: ''
},
subTheme:{
name:'',
clrLabel:''
},
subFont:{
name:'',
fontText:'',
fontLabel:'',
fontError:''
},
itemsSource: '', //to check in page object
itemsSourceAPI: '',
}
}
}
}
let schemaProp = 'feedbackId';
let value = '200';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
let data = [
{
text: '', // label of the component
items: [
{
id: '',
text: '',
disabled: '',// To disabled particular item
iconName: '', // Display at top of the text
lrIcons:[ // Left Right icon array
{
name:'',
position:'',
title:''
}
]
}
]
}
]
Exact schema
let schema = {
type: "number",
title: "Rate Us", //= label
cstAttr: {
}
}
let schemaProp = '';
let value = '200';
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Nested object
Nested object schemaProp
let schema = {};
let schemaProp = 'EMDDetails.feedbackId';
let value = '200';
var finalSchema = schema;
let schemaPropSplits = schemaProp.split('.');
for(let prop of schemaPropSplits){
finalSchema = finalSchema.properties[schemaProp];
}
Material Measurement Guidelines
Events
| Attribute | Description |
|---|---|
| onclick | Fires when the element's value click. |
| oninvalid | Script to be run when an element is invalid. |
| onreset | Fires when reset button is clicked. |
| onvalidate | Custom validate hook, must return error message else considered valid; will be called onchange. |
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 |
Features
- Displays blocks with text or icons or both.
- On item click value will be change.
- If allow-icon is true, it will display only icons and the text will be the title.