Chips/Breadcrumb
Definition
<cst-chips>
<sub-theme/>
<sub-font/>
<sub-style/>
<sub-access/>
<sub-label/>
<sub-item/>
<sub-item/>
<sub-options />
<sub-help-icon/>
<sub-feature-flag/>
</cst-chips>
OR
<cst-element name="chips" schema="" schema-prop="" value=""/>
Example
<cst-chips 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-label text="" position=""/>
<sub-item text="" id=""/>
<sub-item text="" id=""/>
<sub-lr-icon name="" position="" title="" link=""/>
<sub-lr-icon name="" position="" title="" link=""/>
<sub-options items-prop="" item-text-prop="" item-id-prop="" />
<sub-help-icon name="" position="" title="" link="">
<sub-feature-flag is-breadcrumb="" is-collapsed="" is-fieldset="">
</cst-chips>
Attributes
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| value | number type | Active chips id from the chips list |
| disabled | boolean type | Specifies if component should be disabled.(aurelia ext attribute) |
| class | cst-mat-filled (default if material design) cst-mat-outlined cst-mat-shaped-filled cst-mat-shaped-outlined | 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 label to be displayed. | |
| array type | Specifies icons to be displayed. | |
| object type | Specifies options of the components. | |
| 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 | material/skeuomorphic/material-breadcrumb-chevron | Name of design to be used. |
| width | percentage/pixels/string(x-small,small,medium,large,x-large) | Gives width/any other prop value |
sub-label
| Property | Value | Description |
|---|---|---|
| text | string type | Label text. |
| position | left/top/center(default) | Position of the label. |
sub-lr-icons
(a.k.a left right icons)
| 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 of icon. |
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 in list. |
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 |
|---|---|---|
| is-breadcrumb | boolean type | Separated chips by specific icon |
| is-collapsed | boolean type | Display first and last item of chips list. In between display dots(...). Click on center dots, display all the chips items |
| is-fieldset | boolean type | Specifies to display title as fieldset |
Schema Examples
Full schema
Fetch appropriate based on schemaProp
let schema = {
type: "object",
required: ["breadcrumbId"], //= required
properties: {
breadcrumbId: {
type: "number",
title:"Path",//= label
cstAttr: {
raw:{ //loop & add to element
disabled : true,
class:'outline cst-class1'
},
subStyle:{ //loop & add to element style
name: '',
width:'',
height:'',
fontSize:''
},
subLabel:{
position:'',
text:''
},
subLrIcons:[{
name:'',
position:'',
title:''
}],
subOptions:{
itemsProp: '',
itemIdProp: '',
itemTextProp: '',
itemLrIconsProp: ''
},
subHelpIcon: {
name: '',
position: '',
title:'',
link:''
},
subFeatureFlag: {
isBreadcrumb: true
},
subTheme:{
name:'',
clrLabel:''
},
subFont:{
name:'',
fontText:'',
fontLabel:'',
fontError:''
},
itemsSource: '', //to check in page object
itemsSourceAPI: '',
}
}
}
}
let schemaProp = 'breadcrumbId';
let value = 200;
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
let data = [
{
text: '',// If no id or value, it will be as group title.
// If id and value is there, it will be the item
items: [
{
id: '',
text: '',
disabled: '',// To disabled particular item
lrIcons:[ // Left Right icon array
{
name:'',
position:'',
title:''
}
]
items: [
{
id: '',
text: '',
disabled: '',
lrIcons:[
{
name:'',
position:'',
title:''
}
]
}
]
}
]
}
]
Exact schema
let schema = {
type: "number",
title: "Path", //= label
cstAttr: {
}
}
let schemaProp = '';
let value = 200;
let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;
Nested object
Nested object schemaProp
let schema = {};
let schemaProp = 'EMDDetails.breadcrumbId';
let value = 200;
var finalSchema = schema;
let schemaPropSplits = schemaProp.split('.');
for(let prop of schemaPropSplits){
finalSchema = finalSchema.properties[schemaProp];
}
Material Measurement Guidelines
Without Icon
- min-width = as per content or design
- height = 32px
- space from left and right = 12px
- border = 1px
Without Icon
- min-width = as per content or design
- height = 32px
- space between sides and icon = 4px
- space between icon and title = 8px
- border = 1px
Events
| Attribute | Description |
|---|---|
| onclick | Fires when the item clicked(for menu item click). |
| oninvalid | Script to be run when an element is invalid. |
| onreset | Fires when reset button is clicked. |
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
- Display chips with cross icon
- Click on cross icon, chips will be delete from list
- isBreadcrumb = true, Chips will display as breadcrumb and separated with specific icon
- Click on breadcrumb item, clickCallback will trigger