Skip to main content

Numeric class

📖 Description

The Numeric class defines a number input control for the Tripetto builder. It is derived from the DataControl class.

📺 Preview


🆕 constructor

Creates a new Numeric instance.

Signature

constructor(value?: number | Binding, style?: INumericStyle): Numeric

Parameters

NameTypeOptionalDescription
valuenumber | BindingYesSpecifies the initially value or a data binding created with bind.
styleINumericStyleYesSpecifies the input style (when omitted the default global style will be used).

Return value

Returns a reference to the new Numeric instance.

📌 Statics


🏷️ style

Contains the global default style for the input control.

Type

INumericStyle


🔧 bind

Binds an object property to the control allowing its value to update automatically when the value of the control changes. If the control is disabled or invisible, the supplied valueWhenInactive is automatically set as the property value. When a control is enabled and visible, the supplied defaultWhenActive is set automatically if the property value is currently not defined.

Signature

bind<Target, P extends keyof Target>(
target: Target,
property: P,
valueWhenInactive: number,
defaultWhenActive?: number,
modifier?: (value?: number) => number
): Binding;

Parameters

NameTypeOptionalDescription
targetTargetNoReference to the target object which contains the property.
propertyPNoSpecifies the name of the property.
valueWhenInactivenumberNoSpecifies the value which is set to the property when the control is inactive (disabled or invisible).
defaultWhenActivenumberYesSpecifies the default (initial) value that will be used when the control is active (enabled and visible).
modifier(value?: number) => numberYesSpecifies a modifier function for the data.

Return value

Returns a Binding instance that can be used in the controls constructor to bind a value to a control.

Example

import { Forms } from "tripetto";

const example = {
price: 0
};

const price = new Forms.Numeric(Forms.Numeric.bind(example, "price", 0))
.prefix("$ ")
.precision(2);

🗃️ Fields


🏷️ hasFocus

Retrieves if the control has input focus.

Type

boolean


🏷️ isDisabled

Sets or retrieves if the control is disabled.

Type

boolean


🏷️ isLocked

Sets or retrieves if the control is locked (readonly).

Type

boolean


🏷️ isObservable

Retrieves if the control is observable.

Type

boolean


🏷️ isRequired

Sets or retrieves if the control is required.

Type

boolean


🏷️ isVisible

Sets or retrieves the visibility of the control.

Type

boolean


🏷️ string

Retrieves the formatted value.

Type

string


🏷️ style

Contains the numeric control style.

Type

INumericStyle


🏷️ value

Sets or retrieves the input value.

Type

number

▶️ Methods


🔧 align

Sets the alignment of the control.

Signature

align(align: "left" | "center" | "right"): this

Parameters

NameTypeOptionalDescription
align"left" | "center" | "right"NoSpecifies the alignment.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 alignLeftOnFocus

Specifies if the alignment should be set to the left on focus.

Signature

alignLeftOnFocus(alignLeftOnFocus: boolean): this

Parameters

NameTypeOptionalDescription
alignLeftOnFocusbooleanNoSpecifies if the alignment should be set to left on focus.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 autoSelect

Specifies if the number needs to be selected automatically.

Signature

autoSelect(select?: "no" | "focus" | "auto-focus"): this

Parameters

NameTypeOptionalDescription
select"no" | "focus" | "auto-focus"YesSpecifies if the number needs to be selected.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 blur

Blurs the focus of the control.

Signature

blur(): void

🔧 decimalSign

Sets the decimal sign.

Signature

decimalSign(decimal: string): this

Parameters

NameTypeOptionalDescription
decimalstringNoSpecifies the decimal sign.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 digits

Specify the number of digits for the number.

Signature

digits(digits: number): this

Parameters

NameTypeOptionalDescription
digitsnumberNoSpecifies the desired length.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 disable

Disables the control.

Signature

disable(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 disabled

Specifies the state of the control.

Signature

disabled(disabled?: boolean): this

Parameters

NameTypeOptionalDescription
disabledbooleanYesSpecifies if the control is disabled (default is true).

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 enable

Enables the control.

Signature

enable(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 enter

Specifies the function which is invoked when the user presses the enter key.

Signature

enter(fn: (number: Numeric) => boolean): this

Parameters

NameTypeOptionalDescription
fn(number: Numeric) => booleanNoSpecifies the function to invoke. To cancel the normal behavior return true within the function.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 escape

Specifies the function which is invoked when the user presses the escape key.

Signature

escape(fn: (number: Numeric) => boolean): this

Parameters

NameTypeOptionalDescription
fn(number: Numeric) => booleanNoSpecifies the function to invoke. To cancel the normal behavior return true within the function.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 focus

Sets the focus to the control.

Signature

focus(): boolean

Return value

Returns true if the focus is set.


🔧 hide

Hides the control.

Signature

hide(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 indent

Enables control indentation. This can only be set during construction.

Signature

indent(size: number): this

Parameters

NameTypeOptionalDescription
sizenumberNoSpecifies the indent size in pixels.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 label

Sets the label for the control.

tip

If you want to use markdown in the label, activate it first using the markdown method.

Signature

label(label: string): this

Parameters

NameTypeOptionalDescription
labelstringNoSpecifies the control label.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 lock

Locks the control.

Signature

lock(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 locked

Specifies if the control is locked (readonly).

Signature

locked(locked?: boolean): this

Parameters

NameTypeOptionalDescription
lockedbooleanYesSpecifies if the control is locked/readonly (default is true).

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 markdown

Specifies if the label should support markdown formatting.

Signature

markdown(options?: IMarkdownOptions): this

Parameters

NameTypeOptionalDescription
optionsIMarkdownOptionsYesSpecifies the markdown options.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 max

Sets a maximum value.

Signature

max(max: number | undefined): this

Parameters

NameTypeOptionalDescription
maxnumber | undefinedNoSpecifies the maximum value.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 min

Sets a minimum value.

Signature

min(min: number | undefined): this

Parameters

NameTypeOptionalDescription
minnumber | undefinedNoSpecifies the minimum value.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 on

Specifies the function which is invoked when the input value changes.

Signature

on(fn: (number: Numeric) => boolean): this

Parameters

NameTypeOptionalDescription
fn(number: Numeric) => booleanNoSpecifies the change function.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 precision

Specifies the precision.

Signature

precision(precision: number | "auto"): this

Parameters

NameTypeOptionalDescription
precisionnumber | "auto"NoSpecifies the number of precision digits.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 prefix

Specifies the prefix.

Signature

prefix(prefix: string): this;

Parameters

NameTypeOptionalDescription
prefixstringNoSpecifies the prefix string.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 prefixPlural

Specifies the plural prefix.

Signature

prefixPlural(prefixPlural: string | undefined): this

Parameters

NameTypeOptionalDescription
prefixPluralstring | undefinedNoSpecifies the prefix string.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 readonly

Makes the control readonly.

Signature

readonly(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 require

Makes the control required.

Signature

require(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 required

Specifies if the control is required.

Signature

required(required?: boolean): this

Parameters

NameTypeOptionalDescription
requiredbooleanYesSpecifies if the control is required (default is true).

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 select

Selects the number.

Signature

select(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 show

Shows the control.

Signature

show(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 suffix

Specifies the suffix.

Signature

suffix(suffix: string): this;

Parameters

NameTypeOptionalDescription
suffixstringNoSpecifies the suffix string.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 suffixPlural

Specifies the suffix prefix.

Signature

suffixPlural(suffixPlural: string | undefined): this

Parameters

NameTypeOptionalDescription
suffixPluralstring | undefinedNoSpecifies the suffix string.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 thousands

Specifies if the thousands separator should be shown and which sign should be used.

Signature

thousands(thousands: boolean, thousandsSign?: string): this

Parameters

NameTypeOptionalDescription
thousandsbooleanNoSpecifies if the thousands separator should be shown.
thousandsSignstringYesSpecifies the thousands separator sign.

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 unlock

Unlocks the control.

Signature

unlock(): this

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 visible

Specifies the visibility of the control.

Signature

visible(visible?: boolean): this

Parameters

NameTypeOptionalDescription
visiblebooleanYesSpecifies if the control is visible (default is true).

Return value

Returns a reference to the Numeric instance to allow chaining.


🔧 width

Sets the width of the control.

Signature

width(width: number): this

Parameters

NameTypeOptionalDescription
widthnumberNoSpecifies the control width in pixels.

Return value

Returns a reference to the Numeric instance to allow chaining.

⛓️ Interfaces


🔗 INumericStyle

Describes the interface for the input styles.

Type declaration

interface INumericStyle {
/* Number input appearance. */
appearance?: IStyles;

/* Number input label. */
label?: IStyles;

/* Number input disabled. */
disabled?: IStyles;

/* Placeholder style. */
placeholder?: IStyles;

/* Contains the number selection styles. */
selection?: IStyles;

/* Number input required. */
required?: IStyles;

/* Number input locked. */
locked?: IStyles;

/* Number input focus. */
focus?: IStyles;

/* Number input hover. */
hover?: IStyles;

/* Validation passed. */
passed?: IStyles;

/* Validation failed. */
failed?: IStyles;

/* Validation awaiting. */
awaiting?: IStyles;

/* Number input when fused with form card. */
fused?: {
/* Number input appearance. */
appearance?: IStyles;

/* Number input label. */
label?: IStyles;

/* Number input required. */
required?: IStyles;

/* Number input locked. */
locked?: IStyles;

/* Number input focus. */
focus?: IStyles;

/* Number input hover. */
hover?: IStyles;

/* Validation passed. */
passed?: IStyles;

/* Validation failed. */
failed?: IStyles;

/* Validation awaiting. */
awaiting?: IStyles;
};
}