Number Box

Shows numberbox.

Features/Functionality

Shows numberbox of width: '100px' , height: '35px' and width,height as parent.
Value will be set on blur in inputMdl variable passed.
Disabled numberbox is shown if disable is true.
Blur event callback will called on blur.
Placeholder is given in numberbox. It can be overridden, by overriding 'placeholder' variable in pageLabels.
Component is container responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

jquery
shared styles
shared scripts

HTML Structure

<require from="{user_path}/number_boxes/number_box"></require>
<cst-number-box input-mdl.bind="{inputMdl}" options.bind="{options}" style.bind="{style}" type.bind="{type}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-blur-callback.bind="{evtBlurCallback}" validate-callback.bind="{validateCallback}"></cst-number-box>

Bindable Properties

Property Name	Data Type	Required	Decription
inputMdl	any	No	Two way bound variable in which value will be set.
options	object	No	To give other options with pageLabels and color obj
type	string	No	To give type of value to be entered. type can be - 'integer' for now.
otherInfo	any	No	Extra info to be passed on event.
extDisabled	boolean	No	Disables any functionality on component.
style	object	No	Styles to be given to component.
evtBlurCallback	method	No	Method to be called on blur.
evtKeyUpCallback	method	NO	Method to be called on keyup.
evtEnterKeyUpCallback	method	NO	Method to be called on enter.
validateCallback	method	No	Method called for validations

Structure of bindable properties

inputMdl

inputMdl = null    // On pageload default numberbox value and will return numberbox value

options

options = {
    pageLabel: {},          // Override page labels
    pageColorData: {}       // Override css colour porperty
}

type

type = 'integer'
/*
  Later implement- decimal,positive and negative. 
*/

style

style = {
    isSmallSize: false,
    hideError: false,
    isRegularStyle: false   // If given true, regular numberbox will be shown with all side borders. Else numberbox with only bottom border will be shown.
}

evtBlurCallback

evtBlurCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    otherInfo: otherInfo,
    value: item
}

evtKeyUpCallback

evtKeyUpCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    otherInfo: otherInfo,
    value: item
}

evtEnterKeyUpCallback

evtEnterKeyUpCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    otherInfo: otherInfo,
    value: item
}

CSS Overrinding

Following classes are given to override CSS:
- .cst-number-box-container-override : Container Class
- .cst-number-box-element-override: Element Class

Note

While giving the classes in page, give them in nested structure.

Rules

Component measurements

Image of measurements

** box-sizing: border-box is used. So width and height will be dimensions + padding.

Working Example

HTML

<template>
  <require from="./shared/core_comp/number_boxes/number_box"></require>
  <div>
    <cst-number-box input-mdl.bind="inputMdl" options.bind="options" style.bind="style" type.bind="type" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-blur-callback.bind="evtBlurCallback" validate-callback.bind="validateCallback"></cst-number-box>
  </div>
</template>

CSS

.cst-ex-numberbox {
    .cst-number-box-element-override {
        border: 4px solid #ffffff !important;
    }
}

class MyCls{
    constructor(){
        this.inputMdl = 'Enter text';
        this.otherInfo = '';
        this.disabled = false;
        this.type= 'integer';
    }

    evtBlurCallback(_event, _info) {
    }
}
export { MyCls }