Home Reference Source 
import Component from 'formiojs/src/Component.js'
public class | source

Component

Direct Subclass:

BaseComponent, InputWidget

Indirect Subclass:

AddressComponent, ButtonComponent, CalendarWidget, CheckBoxComponent, ColumnComponent, ColumnsComponent, ContainerComponent, ContentComponent, CurrencyComponent, DataGridComponent, DataMapComponent, DateTimeComponent, DayComponent, EditGridComponent, EmailComponent, FieldsetComponent, FileComponent, FormComponent, HTMLComponent, HiddenComponent, LocationComponent, NestedComponent, NumberComponent, PDF, PDFBuilder, PanelComponent, PasswordComponent, PhoneNumberComponent, RadioComponent, ResourceComponent, SelectBoxesComponent, SelectComponent, SignatureComponent, StripeCheckoutComponent, StripeComponent, SurveyComponent, TableComponent, TabsComponent, TagsComponent, TextAreaComponent, TextFieldComponent, TimeComponent, UnknownComponent, UrlComponent, Webform, WebformBuilder, WellComponent, Wizard, WizardBuilder

Root component for all elements within the renderer.

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

An array of event handlers so that the destry command can deregister them.
public

events: EventEmitter

An instance of the EventEmitter class to handle the emitting and registration of events.
public

i18next: *

public

The ID of this component.
public

All of the input masks associated with this component.
public

options: {}

The options for this component.
Private Members
private

Method Summary

Public Methods
public

addClass(element: *, className: *)

Adds a class to a DOM element.
public

addEventListener(obj: *, type: *, func: *, persistent: *)

Wrapper method to add an event listener to an HTML element.
public

appendChild(child: *)

Append different types of children.
public

appendTo(element: *, container: *)

Append an HTML DOM element to a container.
public

attr(element: HtmlElement, attr: Object)

Adds an object of attributes onto an element.
public

ce(type: string, attr: Object, children: Various): HTMLElement

Alias for document.createElement.
public

Removes all event listeners attached to this component.
public

emit(event: string, data: Object)

Emit a new event.
public

empty(element: HTMLElement)

Empty's an HTML DOM element.
public

evalContext(additional: *): *

Create an evaluation context for all script executions and interpolations.
public

evaluate(func: *, args: *, ret: *, tokenize: *): *

Performs an evaluation using the evaluation context of this component.
public

getIcon(name: string): HTMLElement

Returns an HTMLElement icon element.
public

hasClass(element: *, className: *): *

Determines if an element has a class.
public

hook(): *

Allow for options to hook into the functionality of this renderer.
public

iconClass(name: *, spinning: *): string

Gets the classname for either Fontawesome or Bootstrap depending on their settings.
public

interpolate(string: *, data: *): XML | string | * | void

Performs an interpolation using the evaluation context of this component.
public

maskPlaceholder(mask: HTMLElement): string

Creates a new input mask placeholder.
public

off(event: *)

Removes all listeners for a certain event.
public

on(event: string, cb: function, internal: boolean): *

Register for a new event within this component.
public

prependTo(element: HTMLElement, container: HTMLElement)

Prepend an HTML DOM element to a container.
public

removeChildFrom(element: HTMLElement, container: HTMLElement)

Removes an HTML DOM element from its bounding container.
public

removeClass(element: *, className: *)

Remove a class from a DOM element.
public

removeEventListener(obj: *, type: *)

Remove an event listener from the object.
public

setInputMask(input: HTMLElement, inputMask: String, placeholder: Boolean)

Sets the input mask for an input.
public

t(text: string, params: Object): *

Translate a text using the i18n system.
public

text(text: *): Text

Alias to create a text node.

Public Constructors

public constructor() source

Public Members

public eventHandlers: Array source

An array of event handlers so that the destry command can deregister them.

public events: EventEmitter source

An instance of the EventEmitter class to handle the emitting and registration of events.

public i18next: * source

public id: string source

The ID of this component. This value is auto-generated when the component is created, but can also be provided from the component.id value passed into the constructor.

public inputMasks: Array source

All of the input masks associated with this component.

public options: {} source

The options for this component.

Private Members

private _inputMask: * source

Public Methods

public addClass(element: *, className: *) source

Adds a class to a DOM element.

Params:

NameTypeAttributeDescription
element *

The element to add a class to.
className *

The name of the class to add.

public addEventListener(obj: *, type: *, func: *, persistent: *) source

Wrapper method to add an event listener to an HTML element.

Params:

NameTypeAttributeDescription
obj *

The DOM element to add the event to.
type *

The event name to add.
func *

The callback function to be executed when the listener is triggered.
persistent *

If this listener should persist beyond "destroy" commands.

public appendChild(child: *) source

Append different types of children.

Params:

NameTypeAttributeDescription
child *

public appendTo(element: *, container: *) source

Append an HTML DOM element to a container.

Params:

NameTypeAttributeDescription
element *
container *

public attr(element: HtmlElement, attr: Object) source

Adds an object of attributes onto an element.

Params:

NameTypeAttributeDescription
element HtmlElement

The element to add the attributes to.
attr Object

The attributes to add to the input element.

public ce(type: string, attr: Object, children: Various): HTMLElement source

Alias for document.createElement.

Params:

NameTypeAttributeDescription
type string

The type of element to create
attr Object

The element attributes to add to the created element.
children Various

Child elements. Can be a DOM Element, string or array of both.

Return:

HTMLElement

The created element.

public destroy() source

Removes all event listeners attached to this component.

public emit(event: string, data: Object) source

Emit a new event.

Params:

NameTypeAttributeDescription
event string

The event to emit.
data Object

The data to emit with the handler.

public empty(element: HTMLElement) source

Empty's an HTML DOM element.

Params:

NameTypeAttributeDescription
element HTMLElement

The element you wish to empty.

public evalContext(additional: *): * source

Create an evaluation context for all script executions and interpolations.

Params:

NameTypeAttributeDescription
additional *

Return:

*

public evaluate(func: *, args: *, ret: *, tokenize: *): * source

Performs an evaluation using the evaluation context of this component.

Params:

NameTypeAttributeDescription
func *
args *
ret *
tokenize *

Return:

*

public getIcon(name: string): HTMLElement source

Returns an HTMLElement icon element.

Params:

NameTypeAttributeDescription
name string

The name of the icon to retrieve.

Return:

HTMLElement

The icon element.

public hasClass(element: *, className: *): * source

Determines if an element has a class.

Taken from jQuery https://j11y.io/jquery/#v=1.5.0&fn=jQuery.fn.hasClass

Params:

NameTypeAttributeDescription
element *
className *

Return:

*

public hook(): * source

Allow for options to hook into the functionality of this renderer.

Return:

*

public iconClass(name: *, spinning: *): string source

Gets the classname for either Fontawesome or Bootstrap depending on their settings.

Params:

NameTypeAttributeDescription
name *
spinning *

Return:

string

public interpolate(string: *, data: *): XML | string | * | void source

Performs an interpolation using the evaluation context of this component.

Params:

NameTypeAttributeDescription
string *
data *

Return:

XML | string | * | void

public maskPlaceholder(mask: HTMLElement): string source

Creates a new input mask placeholder.

Params:

NameTypeAttributeDescription
mask HTMLElement

The input mask.

Return:

string

The placeholder that will exist within the input as they type.

public off(event: *) source

Removes all listeners for a certain event.

Params:

NameTypeAttributeDescription
event *

public on(event: string, cb: function, internal: boolean): * source

Register for a new event within this component.

Params:

NameTypeAttributeDescription
event string

The event you wish to register the handler for.
cb function

The callback handler to handle this event.
internal boolean

If this event is an "internal" event and should get removed when destroyed. This parameter is necessary because any external "on" bindings should be persistent even through internal redraw events which will call the "destroy" methods.

Return:

*

Example:

let component = new BaseComponent({
  type: 'textfield',
  label: 'First Name',
  key: 'firstName'
});
component.on('componentChange', (changed) => {
  console.log('this element is changed.');
});

public prependTo(element: HTMLElement, container: HTMLElement) source

Prepend an HTML DOM element to a container.

Params:

NameTypeAttributeDescription
element HTMLElement

The DOM element to prepend.
container HTMLElement

The DOM element that is the container of the element getting prepended.

public removeChildFrom(element: HTMLElement, container: HTMLElement) source

Removes an HTML DOM element from its bounding container.

Params:

NameTypeAttributeDescription
element HTMLElement

The element to remove.
container HTMLElement

The DOM element that is the container of the element to remove.

public removeClass(element: *, className: *) source

Remove a class from a DOM element.

Params:

NameTypeAttributeDescription
element *

The DOM element to remove the class from.
className *

The name of the class that is to be removed.

public removeEventListener(obj: *, type: *) source

Remove an event listener from the object.

Params:

NameTypeAttributeDescription
obj *
type *

public setInputMask(input: HTMLElement, inputMask: String, placeholder: Boolean) source

Sets the input mask for an input.

Params:

NameTypeAttributeDescription
input HTMLElement

The html input to apply the mask to.
inputMask String

The input mask to add to this input.
placeholder Boolean

Set the mask placeholder on the input.

public t(text: string, params: Object): * source

Translate a text using the i18n system.

Params:

NameTypeAttributeDescription
text string

The i18n identifier.
params Object

The i18n parameters to use for translation.

Return:

*

public text(text: *): Text source

Alias to create a text node.

Params:

NameTypeAttributeDescription
text *

Return:

Text