Image

• Graphics Link

Definition

<cst-img>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-area />

<sub-feature-flag/>

</cst-img>

Example

<cst-img id="" src="" alt="" usemap="" referrerpolicy="" crossorigin="" ismap="" srcset="">

<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-area shape="" coords="" alt="" href="" />

<sub-area shape="" coords="" alt="" href="" />

<sub-feature-flag>

</cst-img>

OR

<cst-element name="img" schema="" schema-prop=""/>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
src	string type	Specifies the URL of an image
alt	string type	Specifies an alternate text for an image
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
crossorigin	string type(anonymous/use-credentials)	Allow images from third-party sites that allow cross-origin access to be used with canvas
ismap	boolean type	Specifies an image as a server-side image-map
longdesc	string type	Specifies a URL to a detailed description of an image
referrerpolicy	string type(no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/unsafe-url)	Specifies which referrer to use when fetching the image
srcset	string type	Specifies the URL of the image to use in different situations
usemap	string type	Specifies an image as a client-side image-map. This is the name of map
class	string type	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-access	object type	Specifies access of the component.
sub-area	object type	Specifies area detail of the component.
sub-feature-flag	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-area

Property	Value	Description
shape	string type(rect/circle)	Text to be shown as superscript
coords	string type	Selection area coordinate on the image
alt	string type	Specifies an alternate text for an image
href	string type	Redirection link on click on coordinate section

sub-feature-flag

Property	Value	Description

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

required: ["image"], //= required

properties: {

image: {

type: "string",

cstAttr: {

raw:{ //loop & add to element

disabled : true,

src: '',

alt: '',

crossorigin: '',

ismap: false,

longdesc: '',

referrerpolicy: '',

srcset: '',

usemap: '#<name-for-map>',

class:'outline cst-class1'

},

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

},

subFeatureFlag: {

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

}

}

}

}

}

let schemaProp = 'image';

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.image';

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 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-img-elm
• cst-ovr-img

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Points

• Display image as given value
• event callback consistency (evtObj, elm, others,...) //check other libs