NumberInput JAVASCRIPT UI Component API

NumberInput Javascript API

Class

NumberInput

NumberInput

NumberInput specifies an input field where the user can enter a numbers.

Selector

smart-number-input

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
DdisabledEnables or disables the element.
IinputPurposeSets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmaxDetermines the max number that can be displayed inside the input.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
MminDetermines the min number that can be displayed inside the input.
NnameSets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.
NnumberFormatSets or gets the value format of the element.
PplaceholderDetermines the placeholder of the input.
RreadonlyDetermines whether ot not the user can enter text inside the input.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
SstepSets or gets the incremental/decremental step for the value of the element.
TthemeDetermines the theme for the element. Themes define the look of the elements.
UunfocusableIf is set to true, the element cannot be focused.
VvalueSets or gets the value of the element.

Events

CchangeThis event is triggered when the selection is changed.

Methods

GgetFormattedValueReturns the value in the desired format.
GgetValueReturns the number of the input.
SselectSelects the text inside the input or if it is readonly then the element is focused.
SsetValueSets the value of the input.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-number-input animation='none'></smart-number-input>

Set the animation property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.animation = 'simple';

Get the animation property. 

 const numberinput = document.querySelector('smart-number-input');
 let animation = numberinput.animation;

disabledboolean

Enables or disables the element.

Default value

false
Try a demo showcasing the disabled property.

Example

Set the disabled property. 

 <smart-number-input disabled></smart-number-input>

Set the disabled property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.disabled = false;

Get the disabled property. 

 const numberinput = document.querySelector('smart-number-input');
 let disabled = numberinput.disabled;

inputPurposestring

Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.

Default value

"off"

Example

Set the inputPurpose property. 

 <smart-number-input input-purpose='on'></smart-number-input>

Set the inputPurpose property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.inputPurpose = 'country';

Get the inputPurpose property. 

 const numberinput = document.querySelector('smart-number-input');
 let inputPurpose = numberinput.inputPurpose;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

 <smart-number-input locale='de'></smart-number-input>

Set the locale property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.locale = 'en';

Get the locale property. 

 const numberinput = document.querySelector('smart-number-input');
 let locale = numberinput.locale;

localizeFormatFunctionfunction

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property. 

 <smart-number-input localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-number-input>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const numberinput = document.querySelector('smart-number-input');
 let localizeFormatFunction = numberinput.localizeFormatFunction;

maxnumber

Determines the max number that can be displayed inside the input.

Default value

9999999999

Example

Set the max property. 

 <smart-number-input max='500'></smart-number-input>

Set the max property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.max = 10;

Get the max property. 

 const numberinput = document.querySelector('smart-number-input');
 let max = numberinput.max;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Example

Set the messages property. 

 <smart-number-input messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-number-input>

Set the messages property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Get the messages property. 

 const numberinput = document.querySelector('smart-number-input');
 let messages = numberinput.messages;

minnumber

Determines the min number that can be displayed inside the input.

Default value

-9999999999

Example

Set the min property. 

 <smart-number-input min='-50'></smart-number-input>

Set the min property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.min = 0;

Get the min property. 

 const numberinput = document.querySelector('smart-number-input');
 let min = numberinput.min;

namestring

Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.

Default value

""

Example

Set the name property. 

 <smart-number-input name='dropdown'></smart-number-input>

Set the name property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.name = 'dropDown2';

Get the name property. 

 const numberinput = document.querySelector('smart-number-input');
 let name = numberinput.name;

numberFormatany

Sets or gets the value format of the element.

Example

Set the numberFormat property. 

 <smart-number-input number-format='{ style: 'currency', currency: 'EUR' }'></smart-number-input>

Set the numberFormat property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.numberFormat = { style: 'currency', currency: 'JPY' };

Get the numberFormat property. 

 const numberinput = document.querySelector('smart-number-input');
 let numberFormat = numberinput.numberFormat;

placeholderstring

Determines the placeholder of the input.

Default value

""
Try a demo showcasing the placeholder property.

Example

Set the placeholder property. 

 <smart-number-input placeholder='Empty'></smart-number-input>

Set the placeholder property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.placeholder = 'Enter:';

Get the placeholder property. 

 const numberinput = document.querySelector('smart-number-input');
 let placeholder = numberinput.placeholder;

readonlyboolean

Determines whether ot not the user can enter text inside the input.

Default value

false

Example

Set the readonly property. 

 <smart-number-input readonly></smart-number-input>

Set the readonly property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.readonly = false;

Get the readonly property. 

 const numberinput = document.querySelector('smart-number-input');
 let readonly = numberinput.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-number-input right-to-left></smart-number-input>

Set the rightToLeft property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.rightToLeft = true;

Get the rightToLeft property. 

 const numberinput = document.querySelector('smart-number-input');
 let rightToLeft = numberinput.rightToLeft;

stepnumber

Sets or gets the incremental/decremental step for the value of the element.

Default value

1

Example

Set the step property. 

 <smart-number-input step='2'></smart-number-input>

Set the step property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.step = 5;

Get the step property. 

 const numberinput = document.querySelector('smart-number-input');
 let step = numberinput.step;

themestring

Determines the theme for the element. Themes define the look of the elements.

Default value

""

Example

Set the theme property. 

 <smart-number-input theme='blue'></smart-number-input>

Set the theme property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.theme = 'red';

Get the theme property. 

 const numberinput = document.querySelector('smart-number-input');
 let theme = numberinput.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-number-input unfocusable></smart-number-input>

Set the unfocusable property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.unfocusable = false;

Get the unfocusable property. 

 const numberinput = document.querySelector('smart-number-input');
 let unfocusable = numberinput.unfocusable;

valueany

Sets or gets the value of the element.

Default value

0

Example

Set the value property. 

 <smart-number-input value='6'></smart-number-input>

Set the value property by using the HTML Element's instance. 

 const numberinput = document.querySelector('smart-number-input');
 numberinput.value = 11;

Get the value property. 

 const numberinput = document.querySelector('smart-number-input');
 let value = numberinput.value;

Events

changeCustomEvent

This event is triggered when the selection is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.label - The label of the new selected item.
ev.detail.oldLabel - The label of the item that was previously selected before the event was triggered.
ev.detail.oldValue - The value of the item that was previously selected before the event was triggered.
ev.detail.value - The value of the new selected item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event. 

const numberinput = document.querySelector('smart-number-input');
numberinput.addEventListener('change', function (event) {
    const detail = event.detail,
        label = detail.label,
        oldLabel = detail.oldLabel,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

getFormattedValue( value: string | number, format?: any): string

Returns the value in the desired format.

Arguments

valuestring | number

The value to be formatted by the method.

format?any

The object that contains the formatting properties. The argument should contain Intl.NumberFormat valid properties. For example, { style: 'currency', currency: 'EUR' }

Returnsstring

Invoke the getFormattedValue method.

const numberinput = document.querySelector('smart-number-input');
const result = numberinput.getFormattedValue();

getValue(): number

Returns the number of the input.

Returnsnumber

Invoke the getValue method.

const numberinput = document.querySelector('smart-number-input');
const result = numberinput.getValue();

select(): void

Selects the text inside the input or if it is readonly then the element is focused.


Invoke the select method.

const numberinput = document.querySelector('smart-number-input');
numberinput.select();

setValue( value: string | number): void

Sets the value of the input.

Arguments

valuestring | number

The value to be set.


Invoke the setValue method.

const numberinput = document.querySelector('smart-number-input');
numberinput.setValue();