Textbox

• Material Design Spec
• Develop
• Demo

• Graphics Link

Definition

<cst-textbox>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-label/>

<sub-lr-icon/>

<sub-lr-icon/>

<sub-lr-label/>

<sub-lr-label/>

<sub-help-icon/>

<sub-feature-flag/>

</cst-textbox>

Example

<cst-textbox 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-lr-icon name="" position="" title="" link=""/>

<sub-lr-icon name="" position="" title="" link=""/>

<sub-lr-label text="Rs" position="right"/>

<sub-lr-label text="" position=""/>

<sub-help-icon name="" position="" title="" link="">

<sub-feature-flag char-count-hide="">

</cst-textbox>

OR

<cst-element name="textbox" schema="" schema-prop="" value=""/>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
value	string type	Specifies the value for component.(two way bind attribute)
readonly	boolean type	Specifies that an input field is read-only.
required	boolean type	Specifies if input field must be filled.
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
autofocus	boolean type	Specifies if component should be focused when loaded.
placeholder	string type	Specifies a short hint that describes expected value.
maxlength	number type	Specifies maximum number of characters allowed in component's value.
minlength	number type	Specifies minimum number of characters required in component's value.
regex	string type	Specifies a regex pattern that describes expected value.
class	cst-mat-filled (default) cst-mat-outline cst-mat-standard	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-label	object type	Specifies label to be displayed.
sub-lr-icons	array type	Specifies icons to be displayed.
sub-lr-labels	array type	Specifies fixed text to be displayed in text field. Ref
sub-help-icon	object type	Specifies help icon to be displayed.
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/skeuomorphic(standard/filled/shaped-filled/outlined/shaped-outlined)	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-lr-labels

(a.k.a left right labels)

Property	Value	Description
text	string type	Label text.
position	left/right	Position of the label.

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
char-count-hide	boolean type	Specifies to hide character count.

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

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

properties: {

customerName: {

type: "string",

minlength: 3,

maxlength: 50,

required: true/false

title:"Customer Name",//= label

cstAttr: {

raw:{ //loop & add to element

readonly: true,

disabled : true,

autofocus : false,

class:'outline cst-class1'

placeholder: 'Enter',

regex: ''

},

others:{

},

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

}

subLabel:{

position:'',

text:''

},

subLrIcons:[{

name:'',

position:'',

title:'',

link

}],

subLrLabels: [{

text: '',

position: ''

}],

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

charCountHide: true

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

}

}

}

}

}

let schemaProp = 'customerName';

let value = 'ABC'

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Exact schema

let schema = {

type: "string",

minLength: 3,

maxLength: 50,

title: "Customer Name", //= label

cstAttr: {

}

}

let schemaProp = '';

let value = 'ABC'

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.customerName';

let value = 'ABC'

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

Filled Text (Without Value)

• Total Width = 280px
• Total Height(Without Helper text) = 56px
• Helper Text Height = 16px
• Padding left and right = 12px
• Border = 1px

Filled Text (With Value)

• Total Width = 280px
• Total Height(Without Helper text) = 56px
• Padding left and right = 12px
• Border = 2px
• Label Height = 20px
• Icon Dimensions = 24X24

Outlined Text (Without Value)

• Total Width = 280px
• Total Height(Without Helper text) = 56px
• Helper Text Height = 16px
• Padding left and right = 12px
• Border = 1px

Outlined Text (With Value)

• Total Width = 280px
• Total Height(Without Helper text) = 56px
• Padding left = 14px
• Padding right = 8px
• Border = 2px
• Label Height = 20px
• Label margin left/right = 4px
• Icon Dimensions = 24X24

Events

Attribute	Description
onblur	Fires when the element looses focus.
onchange	Fires when the element's value changes.
onfocus	Fires when the element gets focus.
oninvalid	Script to be run when an element is invalid.
onreset	Fires when reset button is clicked.
onkeydown/ onkeyup/ onkeypress	Fires when user presses a key.(currently not)
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

OverRidable Classes

• cst-ovr-textbox-elm
• cst-ovr-textbox
• cst-ovr-textbox-label
• cst-ovr-textbox-helper-text
• cst-ovr-textbox-error-text
• cst-ovr-textbox-left-icon
• cst-ovr-textbox-right-icon
• cst-ovr-textbox-left-label
• cst-ovr-textbox-right-label

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
• Show state indication (filled/ empty/ error/ right / focus) + color
• Help text for *Required, error labels, text count
• if large helper text wrap (mobile/ web)
• if multiple errors show one, remaining on hover of error icon
• fonts (text - Subtitle 1 - Regular 16, Label - Caption - Regular 12)
• EXT trigger cases
• Check logging, security, performance & flexibility