Tagpad
Extends:
Static Member Summary
| Static Public Members | ||
| public static |
builderInfo: * |
|
| public static |
editForm: * |
|
Static Method Summary
| Static Public Methods | ||
| public static |
schema(extend: ...*): * |
|
Constructor Summary
| Public Constructor | ||
| public |
|
|
Member Summary
| Public Members | ||
| public |
background: * |
|
| public |
backgroundReady: {"resolve": *, "reject": *} |
|
| public |
canvas: * |
|
| public |
|
|
| public |
canvasSvg: * |
|
| public |
components: *[] |
|
| public get |
dataReady: * |
|
| public |
dataValue: * |
|
| public |
dimensions: {"width": *, "height": *, "minX": *, "minY": *} |
|
| public |
|
|
| public set |
|
|
| public |
dots: *[] |
|
| public |
|
|
| public |
|
|
| public get |
|
|
| public |
|
|
| public |
|
|
| public |
two: * |
|
| public |
|
|
Method Summary
| Public Methods | ||
| public |
|
|
| public |
addDot(coordinate: *) |
|
| public |
addInputError(message: *, dirty: *) |
|
| public |
addTagpadComponent(componentInstance: *) |
|
| public |
attach() |
|
| public |
|
|
| public |
build(state: *): * |
|
| public |
checkDotValidity(data: *, dirty: *, dot: *): * |
|
| public |
checkValidity(data: *, dirty: *): * |
|
| public |
dotClicked(e: *, dot: *, index: *) |
|
| public |
drawDot(dot: *, index: *): {"circle": *, "text": *} |
|
| public |
getActualCoordinate(coordinate: *): * |
|
| public |
getValue(): * |
|
| public |
|
|
| public |
|
|
| public |
|
|
| public |
|
|
| public |
|
|
| public |
selectDot(index: *) |
|
| public |
setBackgroundImage(svgMarkup: *) |
|
| public |
setDotValidity(dot: *, isValid: *) |
|
| public |
setEditorSize(width: *, height: *) |
|
| public |
setFormValue(value: *) |
|
| public |
setValue(dots: *) |
|
| public |
|
|
| public |
updateValue(flags: *, value: *): * |
|
Inherited Summary
| From class BaseComponent | ||
| public static |
schema(sources: ...*): * |
|
| public static |
tableView(value: *, options: *) Provides a table view for this component. |
|
| public get |
allowReorder: * |
|
| public get |
Retrieves the CSS class name of this component. |
|
| public get |
currentForm: * |
|
| public set |
|
|
| public get |
customStyle: string: * Build the custom style from the layout values |
|
| public get |
dataReady: * |
|
| public get |
dataValue: *: * Get the static value of this component. |
|
| public set |
dataValue(value: *) Sets the static value of this component. |
|
| public get |
|
|
| public get |
defaultValue: * |
|
| public get |
|
|
| public get |
Return if the component is disabled. |
|
| public set |
Disable this component. |
|
| public get |
emptyValue: null: * The empty value for this component. |
|
| public get |
errorLabel: *: * Returns the error label for this component. |
|
| public get |
errors: * |
|
| public set |
forceDisabled(disabled: *) Force a component to be disabled regardless if it should or not. |
|
| public get |
hasInput: * |
|
| public get |
hasSetValue: * |
|
| public get |
key: * |
|
| public get |
label: * Get this component's label text. |
|
| public set |
label(value: *) Set this component's label text and render it. |
|
| public get |
logic: * |
|
| public get |
The readible name for this component. |
|
| public get |
|
|
| public set |
|
|
| public get |
rootValue: *: * Get the data value at the root level. |
|
| public get |
schema: * Returns the JSON schema for this component. |
|
| public get |
|
|
| public get |
submissionTimezone: *: * Return the submission timezone. |
|
| public get |
|
|
| public get |
value: *: * Get the value of this component. |
|
| public get |
viewOnly: * |
|
| public get |
visible: * |
|
| public set |
|
|
| public get |
widget: *: * Returns the instance of the widget for this component. |
|
| public get |
wysiwygDefault: {"theme": string, "placeholder": *, "modules": *} |
|
| public |
|
|
| public |
component: * The Form.io component JSON schema. |
|
| public |
data: * The data object in which this component resides. |
|
| public |
description: * |
|
| public |
dragula: * |
|
| public |
The bounding HTML Element which this component is rendered. |
|
| public |
The existing error that this component has. |
|
| public |
|
|
| public |
The HTMLElement for which the errors are rendered for this component (usually underneath the component). |
|
| public |
inDataGrid: * |
|
| public |
The basic component information which tells the BaseComponent how to render the input element of the components that derive from this class. |
|
| public |
An array of all of the input HTML Elements that have been added to this component. |
|
| public |
|
|
| public |
|
|
| public |
The HTMLElement that is assigned to the label of this component. |
|
| public |
|
|
| public |
Points to the parent component. |
|
| public |
persist: {} A persistent data object that can persist between component instances. |
|
| public |
If this input has been input and provided value. |
|
| public |
quill: * |
|
| public |
|
|
| public |
|
|
| public |
Points to the root component, usually the FormComponent. |
|
| public |
The row path of this component. |
|
| public |
The HTML Element for the table body. |
|
| public |
tooltip: * |
|
| public |
|
|
| public |
Used to trigger a redraw event within this component. |
|
| public |
type: * |
|
| public |
validators: [string] The validators that are assigned to this component. |
|
| public |
valueElement: * |
|
| private |
_currentForm: * |
|
| private |
Determines if this component is disabled, or not. |
|
| private |
Determines if this component has a condition assigned to it. |
|
| private |
|
|
| private |
Determines if this component is visible, or not. |
|
| private |
_widget: * |
|
| public |
addButton(justIcon: *): HTMLElement Adds a new button to add new rows to the multiple input elements. |
|
| public |
addCKE(element: *, settings: *, onChange: *): * |
|
| public |
addDraggable(containers: *) |
|
| public |
addFocusBlurEvents(element: *) |
|
| public |
addInput(input: *, container: *, noSet: *): * Add a new input to this comonent. |
|
| public |
addInputError(message: *, dirty: *) Add a new input error to this element. |
|
| public |
addInputEventListener(input: *) Add new input element listeners. |
|
| public |
addInputGroup(input: HTMLElement, container: HTMLElement): HTMLElement Adds a new input group to hold the input html elements. |
|
| public |
addInputSubmitListener(input: *) |
|
| public |
addNewValue(value: *) Adds a new empty value to the data array. |
|
| public |
addPrefix(input: HTMLElement, inputGroup: HTMLElement): HTMLElement Adds a prefix html element. |
|
| public |
addQuill(element: *, settings: *, onChange: *): * |
|
| public |
addShortcut(element: *, shortcut: *) |
|
| public |
addShortcutToLabel(label: *, shortcut: *): * |
|
| public |
addSuffix(input: HTMLElement, inputGroup: HTMLElement): HTMLElement Adds a suffix html element. |
|
| public |
addValue() Adds a new empty value to the data array, and add a new row to contain it. |
|
| public |
append(element: HTMLElement) Append an element to this elements containing element. |
|
| public |
applyActions(actions: *, result: *, data: *, newComponent: *): * |
|
| public |
asString(value: *): * Prints out the value of this component as a string value. |
|
| public |
attachActions(element: *, actions: *) |
|
| public |
|
|
| public |
attachRefreshEvent(refreshData: *) |
|
| public |
|
|
| public |
|
|
| public |
beforeNext(): * Called before a next page is triggered allowing the components to perform special functions. |
|
| public |
beforeSubmit(): * Called before a submission is triggered allowing the components to perform special async functions. |
|
| public |
build(state: *) Builds the component. |
|
| public |
buildInput(container: *, value: *) |
|
| public |
buildRows(values: *) Rebuild the rows to contain the values of this component. |
|
| public |
calculateValue(data: *): boolean Perform a calculated value operation. |
|
| public |
checkCondition(row: *, data: *): boolean Checks the condition of this component. |
|
| public |
checkConditions(data: *): * Check for conditionals and hide/show the element based on those conditions. |
|
| public |
checkValidity(data: *, dirty: *, rowData: *): * |
|
| public |
clear(): * Destroys and clears a component and returns the current state. |
|
| public |
clearOnHide(show: *) |
|
| public |
conditionallyVisible(data: *): boolean Check if this component is conditionally visible. |
|
| public |
createDescription(container: *) Creates the description block for this input field. |
|
| public |
createElement(): HTMLElement Create the outside wrapping element for this component. |
|
| public |
Creates a new error element to hold the errors of this element. |
|
| public |
createInput(container: HTMLElement): HTMLElement Creates a new input element. |
|
| public |
createLabel(container: HTMLElement) Create the HTML element for the label of this component. |
|
| public |
createModal(): * |
|
| public |
createTooltip(container: HTMLElement) Create the HTML element for the tooltip of this component. |
|
| public |
|
|
| public |
createViewOnlyLabel(container: *) |
|
| public |
createViewOnlyValue(container: *) |
|
| public |
createWidget(): null Creates an instance of a widget for this component. |
|
| public |
Create the input wrapping element. |
|
| public |
Deletes the value of the component. |
|
| public |
destroy(): * Remove all event handlers. |
|
| public |
|
|
| public |
dragButton(): * |
|
| public |
elementInfo(): {"type": string, "component": *, "changeEvent": string, "attr": *} Get the element information. |
|
| public |
errorMessage(type: *): * Get the error message provided a certain type of error. |
|
| public |
evalContext(additional: *): * |
|
| public |
fieldLogic(data: *): * Check all triggers and apply necessary actions. |
|
| public |
focus() |
|
| public |
getBrowserLanguage(): * |
|
| public |
getElement(): HTMLElement Returns the outside wrapping element of this component. |
|
| public |
getFlags(): * |
|
| public |
getLabelMargin(): * |
|
| public |
getLabelWidth(): * |
|
| public |
getModifiedSchema(schema: *, defaultSchema: *): * Returns only the schema that is different from the default. |
|
| public |
getRawValue(): * |
|
| public |
getRoot(): * Get FormioForm element at the root of this component tree. |
|
| public |
getRowDragulaOptions(): {"moves": *} |
|
| public |
getValue(): * Get the input value of this component. |
|
| public |
getValueAt(index: *): * Get the value at a specific index. |
|
| public |
getView(value: *): * |
|
| public |
hasChanged(newValue: *, oldValue: *): boolean Determine if the value of this component has changed. |
|
| public |
hasCondition(): null Determines if this component has a condition defined. |
|
| public |
hasValue(data: *): * Returns if this component has a value set. |
|
| public |
Checks to see if a separate component is in the "context" of this component. |
|
| public |
invalidMessage(data: *, dirty: *): * Returns the invalid message, or empty string if the component is valid. |
|
| public |
isEmpty(value: *): * |
|
| public |
Returns if the component is valid or not. |
|
| public |
labelIsHidden(): * |
|
| public |
labelOnTheLeft(position: *): * |
|
| public |
labelOnTheLeftOrRight(position: *): * |
|
| public |
labelOnTheRight(position: *): * |
|
| public |
onChange(flags: *, fromRoot: *) |
|
| public |
onRowDrop(droppedElement: *, newParent: *, oldParent: *, nextSibling: *) |
|
| public |
performInputMapping(input: *): * |
|
| public |
prepend(element: HTMLElement) Prepend an element to this elements containing element. |
|
| public |
redraw(shouldRedrawInBuilder: *) |
|
| public |
refresh(value: *) Refreshes the component with a new value. |
|
| public |
removeButton(index: number): HTMLElement Creates a new "remove" row button and returns the html element of that button. |
|
| public |
removeChild(element: HTMLElement) Removes a child from this component. |
|
| public |
removeShortcut(element: *, shortcut: *) |
|
| public |
removeValue(index: number) Removes a value out of the data array and rebuild the rows. |
|
| public |
renderElement(template: *, data: *, actions: *[]): * |
|
| public |
renderTemplate(template: *, data: *, actions: *): HTMLElement Render a template string into html. |
|
| public |
renderTemplateToElement(element: *, template: *, data: *, actions: *[]): * |
|
| public |
Resets the value of this component. |
|
| public |
Restore the value of a control. |
|
| public |
rightAlignedLabel(position: *): * |
|
| public |
selectOptions(select: *, tag: *, options: *, defaultValue: *) |
|
| public |
setCustomValidity(message: *, dirty: *) |
|
| public |
setDisabled(element: *, disabled: *) |
|
| public |
setInputMask(input: *, inputMask: *): * |
|
| public |
setInputStyles(input: *) |
|
| public |
setLoading(element: *, loading: *) |
|
| public |
setPristine(pristine: *) Sets the pristine flag for this component. |
|
| public |
setSelectValue(select: *, value: *) |
|
| public |
Set the value of this component. |
|
| public |
setValueAt(index: *, value: *) Set the value at a specific index. |
|
| public |
setupValueElement(element: *) |
|
| public |
shouldSkipValidation(data: *, dirty: *, rowData: *): * |
|
| public |
show(show: *): * Hide or Show an element. |
|
| public |
showElement(element: *, show: *): * Show or hide the root element of this component. |
|
| public |
splice(index: *) Splice a value from the dataValue. |
|
| public |
Translate a text using the i18n system. |
|
| public |
updateItems(args: ...*) |
|
| public |
updateOnChange(flags: *, changed: *): boolean Update the value on change. |
|
| public |
updateValue(flags: *): * Update a value of this component. |
|
| public |
|
|
| public |
validateMultiple(value: *): boolean Check if a component is eligible for multiple validation |
|
| public |
|
|
| public |
whenReady(): * |
|
| From class NestedComponent | ||
| public static |
schema(extend: ...*): * |
|
| public get |
|
|
| public get |
currentForm: * |
|
| public set |
|
|
| public get |
dataReady: * |
|
| public get |
|
|
| public set |
|
|
| public get |
errors: * |
|
| public get |
|
|
| public set |
|
|
| public get |
schema: * |
|
| public get |
visible: * |
|
| public set |
|
|
| public |
collapsed: * |
|
| public |
components: *[] |
|
| public |
hidden: *[] |
|
| public |
|
|
| public |
addComponent(component: Object, element: HTMLElement, data: Object, before: HTMLElement, noAdd: Boolean, state: Object): BaseComponent Add a new component to the components array. |
|
| public |
addComponents(element: *, data: *) |
|
| public |
beforeNext(): * Allow components to hook into the next page trigger to perform their own logic. |
|
| public |
beforeSubmit(): * Allow components to hook into the submission to provide their own async data. |
|
| public |
build(state: *, showLabel: *) |
|
| public |
calculateValue(data: *, flags: *): * |
|
| public |
checkConditions(data: *): * |
|
| public |
checkData(data: *, flags: *): * A more performant way to check the conditions, calculations, and validity of a submission once it has been changed. |
|
| public |
checkValidity(data: *, dirty: *): * |
|
| public |
clearOnHide(show: *) |
|
| public |
createComponent(component: *, data: *): * Create a new component and add it to the components array. |
|
| public |
destroy(state: *): * Destroys this component. |
|
| public |
destroyComponents(state: *): * |
|
| public |
eachComponent(fn: function) Perform an iteration over each component within this container component. |
|
| public |
everyComponent(fn: function) Perform a deep iteration over every component, including those within other container based components. |
|
| public |
getAllComponents(): * |
|
| public |
getComponent(key: string, fn: function): Object Returns a component provided a key. |
|
| public |
getComponentById(id: string, fn: function): Object Return a component provided the Id of the component. |
|
| public |
getComponentState(component: {}, state: {}): * |
|
| public |
getComponents(): * |
|
| public |
getContainer(): * |
|
| public |
getValue(): * |
|
| public |
|
|
| public |
hideComponents(hidden: *) |
|
| public |
isValid(data: *, dirty: *): * |
|
| public |
removeComponent(component: BaseComponent, components: Array<BaseComponent>): * Remove a component from the components array. |
|
| public |
removeComponentById(id: string, fn: function): null Removes a component provided the Id of the component. |
|
| public |
removeComponentByKey(key: string, fn: function): null Removes a component provided the API key of that component. |
|
| public |
|
|
| public |
|
|
| public |
setCollapseHeader(header: *) |
|
| public |
setCollapsed(element: *) |
|
| public |
setHidden(component: *) |
|
| public |
setNestedValue(component: *, value: *, flags: *, changed: *): * |
|
| public |
setPristine(pristine: *) |
|
| public |
setValue(value: *, flags: *): * |
|
| public |
show(show: *): * |
|
| public |
|
|
| public |
updateValue(flags: *, source: *): * |
|
Static Public Methods
public static schema(extend: ...*): * source
Override:
NestedComponent#schemaParams:
| Name | Type | Attribute | Description |
| extend | ...* |
Return:
| * |
Public Constructors
Public Members
public background: * source
public backgroundReady: {"resolve": *, "reject": *} source
public canvas: * source
public canvasContainer: * source
public canvasSvg: * source
public dimensions: {"width": *, "height": *, "minX": *, "minY": *} source
public dots: *[] source
public formContainer: * source
public get hasBackgroundImage: * source
public selectedDotIndex: * source
public tagpadContainer: * source
public two: * source
Public Methods
public addBackground() source
public addDot(coordinate: *) source
Params:
| Name | Type | Attribute | Description |
| coordinate | * |
public addInputError(message: *, dirty: *) source
Add a new input error to this element.
Override:
BaseComponent#addInputErrorParams:
| Name | Type | Attribute | Description |
| message | * | ||
| dirty | * |
public addTagpadComponent(componentInstance: *) source
Params:
| Name | Type | Attribute | Description |
| componentInstance | * |
public attach() source
public attachDrawEvents() source
public build(state: *): * source
Builds the component.
Override:
NestedComponent#buildParams:
| Name | Type | Attribute | Description |
| state | * |
Return:
| * |
public checkDotValidity(data: *, dirty: *, dot: *): * source
Params:
| Name | Type | Attribute | Description |
| data | * | ||
| dirty | * | ||
| dot | * |
Return:
| * |
public checkValidity(data: *, dirty: *): * source
Override:
NestedComponent#checkValidityParams:
| Name | Type | Attribute | Description |
| data | * | ||
| dirty | * |
Return:
| * |
public dotClicked(e: *, dot: *, index: *) source
Params:
| Name | Type | Attribute | Description |
| e | * | ||
| dot | * | ||
| index | * |
public drawDot(dot: *, index: *): {"circle": *, "text": *} source
Params:
| Name | Type | Attribute | Description |
| dot | * | ||
| index | * |
Return:
| {"circle": *, "text": *} |
public getActualCoordinate(coordinate: *): * source
Params:
| Name | Type | Attribute | Description |
| coordinate | * |
Return:
| * |
public getValue(): * source
Get the input value of this component.
Override:
NestedComponent#getValueReturn:
| * |
public redrawDots() source
public removeSelectedDot() source
public renderForm() source
public renderTagpad() source
public saveSelectedDot() source
public selectDot(index: *) source
Params:
| Name | Type | Attribute | Description |
| index | * |
public setBackgroundImage(svgMarkup: *) source
Params:
| Name | Type | Attribute | Description |
| svgMarkup | * |
public setDotValidity(dot: *, isValid: *) source
Params:
| Name | Type | Attribute | Description |
| dot | * | ||
| isValid | * |
public setEditorSize(width: *, height: *) source
Params:
| Name | Type | Attribute | Description |
| width | * | ||
| height | * |
public setFormValue(value: *) source
Params:
| Name | Type | Attribute | Description |
| value | * |
public setValue(dots: *) source
Set the value of this component.
Override:
NestedComponent#setValueParams:
| Name | Type | Attribute | Description |
| dots | * |
public stretchDrawingArea() source
public updateValue(flags: *, value: *): * source
Update a value of this component.
Override:
NestedComponent#updateValueParams:
| Name | Type | Attribute | Description |
| flags | * | ||
| value | * |
Return:
| * |
