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/builder";

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;
  };
}