Skip to main content

Text class

๐Ÿ“– Descriptionโ€‹

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

๐Ÿ“บ Previewโ€‹


๐Ÿ†• constructorโ€‹

Creates a new Text instance.

Signatureโ€‹

constructor(
type?: "singleline" | "multiline" | "multiline-wo-crlf" | "password" | "email",
value?: string | Binding,
lines?: number,
style?: ITextStyle
): Text

Parametersโ€‹

NameTypeOptionalDescription
type"singleline" | "multiline" | "multiline-wo-crlf" | "password" | "email"YesSpecifies the input type (default is singleline). It can be one of the following values:
- singleline: The control accepts single line text;
- multiline: The control accepts multi line text (including hard returns);
- multiline-wo-crlf: The control input can break to a next line, but hard returns (CRLFs) are not allowed;
- password: Password input mode (input is masked);
- email: Email address input mode.
valuestring | BindingYesSpecifies the initially value or a data binding created with bind.
linesnumberYesSpecifies the minimum number of lines for multi-line input.
styleITextStyleYesSpecifies the input style (when omitted the default global style will be used).

Return valueโ€‹

Returns a reference to the new Text instance.

๐Ÿ“Œ Staticsโ€‹


๐Ÿท๏ธ styleโ€‹

Contains the global default style for the input control.

Typeโ€‹

ITextStyle


๐Ÿ”ง 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: string,
defaultWhenActive?: string,
modifier?: (value?: string) => string
): Binding;

Parametersโ€‹

NameTypeOptionalDescription
targetTargetNoReference to the target object which contains the property.
propertyPNoSpecifies the name of the property.
valueWhenInactivestringNoSpecifies the value which is set to the property when the control is inactive (disabled or invisible).
defaultWhenActivestringYesSpecifies the default (initial) value that will be used when the control is active (enabled and visible).
modifier(value?: string) => stringYesSpecifies 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 = {
text: ""
};

const text = new Forms.Text("singleline", Forms.Text.bind(example, "text", ""));

๐Ÿ—ƒ๏ธ 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


๐Ÿท๏ธ styleโ€‹

Contains the text control style.

Typeโ€‹

ITextStyle


๐Ÿท๏ธ suggestionโ€‹

Retrieves the current selected suggestion.

Typeโ€‹

ITextSuggestion


๐Ÿท๏ธ typeโ€‹

Retrieves the input type. It can be one of the following values:

  • singleline: The control accepts single line text;
  • multiline: The control accepts multi line text (including hard returns);
  • multiline-wo-crlf: The control input can break to a next line, but hard returns (CRLFs) are not allowed;
  • password: Password input mode (input is masked);
  • email: Email address input mode.

Typeโ€‹

"singleline" | "multiline" | "multiline-wo-crlf" | "password" | "email"


๐Ÿท๏ธ valueโ€‹

Sets or retrieves the input value.

Typeโ€‹

string

โ–ถ๏ธ Methodsโ€‹


๐Ÿ”ง actionโ€‹

Attaches an key action to the control.

info

This method can be used to implement variables support in the text control.

Signatureโ€‹

action(
key: string,
fn: (
done: (text?: string) => void,
text: Element
) => ((key: string) => "capture" | "cancel" | "continue") | undefined | void
): this

Parametersโ€‹

NameTypeOptionalDescription
keystringNoSpecifies the key to bind the action to.
fn(done: (text?: string) => void, text: Element) => ((key: string) => "capture" | "cancel" | "continue") | undefined | voidNoSpecifies the action function to execute.

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.

Exampleโ€‹

import { insertVariable, Forms } from "@tripetto/builder";

// Use this code inside a block (`this` refers to the block instance)
// The `insertVariable` function will supply a list of possible variables
// when the user enters the `@` key.
new Forms.Text()
.action("@", insertVariable(this));

๐Ÿ”ง 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 Text instance to allow chaining.


๐Ÿ”ง autoSelectโ€‹

Specifies if the text needs to be selected automatically.

Signatureโ€‹

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

Parametersโ€‹

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

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง autoValidateโ€‹

Enables automatic control validation.

Signatureโ€‹

autoValidate(): this

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง blurโ€‹

Blurs the focus of the control.

Signatureโ€‹

blur(): void

๐Ÿ”ง copyToClipboardโ€‹

Copies the contents of the input control to the clipboard.

Signatureโ€‹

copyToClipboard(): void

๐Ÿ”ง disableโ€‹

Disables the control.

Signatureโ€‹

disable(): this

Return valueโ€‹

Returns a reference to the Text 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 Text instance to allow chaining.


๐Ÿ”ง enableโ€‹

Enables the control.

Signatureโ€‹

enable(): this

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง enterโ€‹

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

Signatureโ€‹

enter(fn: (text: Text) => boolean): this

Parametersโ€‹

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

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง escapeโ€‹

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

Signatureโ€‹

escape(fn: (text: Text) => boolean): this

Parametersโ€‹

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

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง fixedLinesโ€‹

Sets a fixed number of lines for the control (auto-sizing will be disabled).

Signatureโ€‹

fixedLines(lines: number): this

Parametersโ€‹

NameTypeOptionalDescription
linesnumberNoSpecifies the number of lines.

Return valueโ€‹

Returns a reference to the Text 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 Text 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 Text instance to allow chaining.


๐Ÿ”ง inputModeโ€‹

Sets the input mode for the text control.

Signatureโ€‹

inputMode(mode: "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"): this

Parametersโ€‹

NameTypeOptionalDescription
mode"text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url"NoSpecifies the mode.

Return valueโ€‹

Returns a reference to the Text 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 Text instance to allow chaining.


๐Ÿ”ง lockโ€‹

Locks the control.

Signatureโ€‹

lock(): this

Return valueโ€‹

Returns a reference to the Text 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 Text 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 Text instance to allow chaining.


๐Ÿ”ง maxLengthโ€‹

Specifies the maximum text length.

Signatureโ€‹

maxLength(maxLength: number): this

Parametersโ€‹

NameTypeOptionalDescription
maxLengthnumberNoSpecifies the maximum text length (supply 0 to disable the maximum length).

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง nameโ€‹

Sets a name for the text control.

Signatureโ€‹

name(name: string): this

Parametersโ€‹

NameTypeOptionalDescription
namestringNoSpecifies the name.

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง onโ€‹

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

Signatureโ€‹

on(fn: (text: Text) => void): this

Parametersโ€‹

NameTypeOptionalDescription
fn(text: Text) => voidNoSpecifies the change function.

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง placeholderโ€‹

Sets a placeholder for the text control.

Signatureโ€‹

placeholder(placeholder: string): this

Parametersโ€‹

NameTypeOptionalDescription
placeholderstringNoSpecifies the placeholder text.

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง readonlyโ€‹

Makes the control readonly.

Signatureโ€‹

readonly(): this

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง requireโ€‹

Makes the control required.

Signatureโ€‹

require(): this

Return valueโ€‹

Returns a reference to the Text 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 Text instance to allow chaining.


๐Ÿ”ง sanitizeโ€‹

Specifies if string sanitizing should be applied.

Signatureโ€‹

sanitize(sanitize?: boolean): this

Parametersโ€‹

NameTypeOptionalDescription
sanitizebooleanYesSpecifies if string sanitizing should be applied.

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง selectโ€‹

Selects the text.

Signatureโ€‹

select(): this

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง showโ€‹

Shows the control.

Signatureโ€‹

show(): this

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง suggestionsโ€‹

Specifies text suggestions for the text control.

Signatureโ€‹

suggestions(suggestions?: (ITextSuggestion | string)[]): this

Parametersโ€‹

NameTypeOptionalDescription
suggestions(ITextSuggestion | string)[]YesSpecifies the list of suggestions.

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง transformationโ€‹

Specifies the text transformation.

Signatureโ€‹

transformation(transformation: Transformations): this

Parametersโ€‹

NameTypeOptionalDescription
transformation"none" | "capitalize" | "capitalize-words" | "capitalize-sentences" | "uppercase" | "lowercase"NoSpecifies the transformation type.

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง trimโ€‹

Specifies if string trim should be applied.

Signatureโ€‹

trim(trim?: boolean): this

Parametersโ€‹

NameTypeOptionalDescription
trimbooleanYesSpecifies if string trimming should be applied.

Return valueโ€‹

Returns a reference to the Text instance to allow chaining.


๐Ÿ”ง unlockโ€‹

Unlocks the control.

Signatureโ€‹

unlock(): this

Return valueโ€‹

Returns a reference to the Text 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 Text 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 Text instance to allow chaining.

โ›“๏ธ Interfacesโ€‹


๐Ÿ”— ITextStyleโ€‹

Describes the interface for the input styles.

Type declarationโ€‹

interface ITextStyle {
/* Text input appearance. */
appearance?: IStyles;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

๐Ÿ”— ITextSuggestionโ€‹

Describes the interface for the text suggestions.

Type declarationโ€‹

interface ITextSuggestion {
/* Text suggestion identifier. */
id?: string;

/* Text suggestion name. */
name: string;
}