Class: NumericBox

componyx .UI.NumericBox(id, properties) → {Object}

new NumericBox(id, properties) → {Object}

NumericBox class.

Parameters:

Name	Type	Description
`id`	String	The id of the component.
`properties`	Object \| HTMLElement	The properties used to initialize the component or the container element.

Mixes In:

componyx.UI.base.methods

Returns:

An instance of the component.

Type: Object

Extends

componyx.UI.base.Component

Classes

NumericBoxEvents

Members

buttonId :String|null

Gets or sets the id of the base button.

Type:

String | null

cssClassButton :String|null

Gets or sets the css class of the buttons.

Type:

String | null

cssClassButtonHolder :String|null

Gets or sets the css class of the button holder.

Type:

String | null

cssClassDisabled :String|null

Gets or sets the css class of the numeric box when it is disabled.

Type:

String | null

cssClassMinus :String|null

Gets or sets the css class of the minus button.

Type:

String | null

cssClassPlus :String|null

Gets or sets the css class of the plus button.

Type:

String | null

cssClassReadOnly :String|null

Gets or sets the css class of the numeric box when it is readonly.

Type:

String | null

decimalSeparator :String

Gets or sets the decimal separator. Default: '.'.

Type:

String

digitPadLeftValue :String|null

Gets or sets the value to right-align the digits by padding this value to the left.

Type:

String | null

disabled :Boolean

Gets or sets if the numeric box is disabled.

Type:

Boolean

events :componyx.UI.NumericBox.NumericBoxEvents

NumericBox events

Type:

componyx.UI.NumericBox.NumericBoxEvents

focusGroupFirst :Boolean

Gets or sets the value which indicates whether this control should get focus when there is no control focused in the focus group.

Type:

Boolean

focusGroupId :String|null

Gets or sets the id of the focus group to which this control belongs.

Type:

String | null

focusableButtons :Boolean

Gets or sets a value indicating if the buttons are focusable.

Type:

Boolean

groupSeparator :String|null

Gets or sets the group separator.

Type:

String | null

incrementalValue :Number

Gets or sets the incremental value when using plus or minus.

Type:

Number

inputId :String|null

Gets or sets the clientid of the HTML input.

Type:

String | null

keyboardNavigation :Boolean

Gets or sets if keyboard navigation is allowed.

Type:

Boolean

leadingZeros :Boolean

Gets or sets if the input value can hold leading zeros.

Type:

Boolean

maxValue :Number|null

Gets or sets the maximum allowed value.

Type:

Number | null

minValue :Number|null

Gets or sets the minimium allowed value.

Type:

Number | null

name :String

Gets or sets the input field name of the control.

Type:

String

placeholder :String|null

Gets or sets the placeholder which is visible when the input box has no value.

Type:

String | null

precision :Number

Gets or sets the amount of decimal places.

Type:

Number

readOnly :Boolean

Gets or sets if the numeric box is readonly.

Type:

Boolean

rounding :componyx.UI.NumericBox.RoundingOption

Gets or sets the decimal rounding type that should be applied.

Type:

componyx.UI.NumericBox.RoundingOption

selectOnFocus :Boolean

Gets or sets if the input value is selected when the input gets focus.

Type:

Boolean

showButtons :Boolean

Gets or sets if the plus and minus buttons are visible.

Type:

Boolean

tooltipId :String|null

Gets or sets the id of the tooltip to show.

Type:

String | null

tooltipManagerId :String|null

Gets or sets the tooltip manager used to display tooltips.

Type:

String | null

trailingZeros :Boolean

Gets or sets if the input value can hold trailing zeros at the decimal side.

Type:

Boolean

value :Number|null

Gets or sets the initial value of the numeric box and holds the selected value on a postback.

Type:

Number | null

verticalButtons :Boolean

Gets or sets a value indicating if the buttons are displayed vertically instead of horizontally.

Type:

Boolean

width :String

Gets or sets the width of the component in the specified CSS unit (e.g., px, %, or ch).

Type:

String

(static, readonly) RoundingOption :number

RoundingOption

Type:

number

Properties:

Name	Type	Description
`NONE`	number
`ROUND`	number
`FLOOR`	number
`CEIL`	number
`getName`	number

Methods

clear(fireChangeopt)

Clears the input value.

Parameters:

Name	Type	Attributes	Default	Description
`fireChange`	boolean	<optional>	true	A value indicating if the change event is fired.

decrement()

Decrements the value with one step.

destroy()

Destroys the component.

See:

componyx.UI.base.methods#destroy

focus()

Sets focus on the input element.

getInput()

Gets the input element.

getNumberValue() → {Number|null}

Gets the value.

Returns:

The value as number.

Type: Number | null

getValue() → {String}

Gets the input value.

Returns:

The value as formatted string.

Type: String

increment()

Increments the value with one step.

render()

Renders the component

reset(fireChangeopt)

Resets the input to the initial value.

Parameters:

Name	Type	Attributes	Default	Description
`fireChange`	boolean	<optional>	true	A value indicating if the change event is fired.

select()

Selects the text of the input box.

setPlaceholder(text)

Sets the placeholder text.

Parameters:

Name	Type	Description
`text`	String	The placeholder text.

setValue(value, fireChangeopt)

Sets the input value.

Parameters:

Name	Type	Attributes	Default	Description
`value`	String			The value to set.
`fireChange`	boolean	<optional>	true	A value indicating if the change event is fired.

suppressNextChangeEvent(action)

Suppresses any change events fired by the underlying input element during the execution of the provided action. Use this when programmatically setting a component value to prevent the change event from propagating as a user interaction. The suppression is automatically lifted after the action completes, even if it throws.

Parameters:

Name	Type	Description
`action`	function	The action to execute with change events suppressed.

Mixes In:

componyx.UI.base.methods.suppressNextChangeEvent

Type Definitions

ChangeEventArgs

NumericBox change event arguments.

Type:

Object

Properties:

Name	Type	Attributes	Description
`value`	String		The input value without group separators and with '.' as decimal separator.
`event`	Event		The original event object.
`incremental`	Boolean	<optional>	A value indicating if the change was caused by an increment or decrement (onChange only).

InputEventArgs

NumericBox input focus/blur event arguments.

Type:

Object

Properties:

Name	Type	Description
`event`	Event	The original event object.

StepEventArgs

NumericBox increment/decrement event arguments.

Type:

Object

Properties:

Name	Type	Description
`value`	String	The new value without group separators and with '.' as decimal separator.
`previousValue`	String	The previous value without group separators and with '.' as decimal separator.
`event`	Event	The original event object.