Class: Component

new Component_A(parent, props)

Creates an instance of TComponents.Component class. This is the base parent class of all TComponent.

Parameters:

Name	Type	Description
`parent`	HTMLElement	HTMLElement that is going to be the parent of the component.
`props`	TComponents.ComponentProps	Parameters to create the component.

Source: basic/as-component.js, line 46

Example

const component = new TComponents.Component_A(document.body, {
  label: 'My Component',
  labelPos: 'top',
  options: {
    async: true
  }
});

Extends

TComponents.Accessors_A

Members

INPUTVAR_FUNC :object

Enum-like object that defines various input variable handling strategies. These strategies specify how input variables are processed within the component.

Type:

object

Properties

Name	Type	Description
`CUSTOM`	string	A custom processing strategy for input variables.
`SYNC`	string	A synchronous processing strategy for input variables.

Source: basic/as-component.js, line 2388

INPUTVAR_TYPE :object

Enum-like object that defines various input variable types. These types are used to categorize the types of input data that can be handled by the component.

Type:

object

Properties

Name	Type	Description
`NUM`	string	Represents a numeric input type.
`ANY`	string	Represents a generic input type, not limited to a specific data type.
`BOOL`	string	Represents a boolean input type (true/false).
`STRING`	string	Represents a string input type.

Source: basic/as-component.js, line 2371

enabled

Enables or disables the component and all its child components.

Source: basic/as-component.js, line 2204

Example

this.enabled = true;

globalEvents :Eventing_A

Global event handler for the Component_A class.

Type:

Eventing_A

Source: basic/as-component.js, line 2364

languageAdapter :object

language adapter for the Component_A class.

Type:

object

Source: basic/as-component.js, line 2357

(static) isTComponent

Static method to check if an object is a TComponent.

Source: basic/as-component.js, line 607

Methods

(protected) addEventListener(element, eventType, listener, optionsopt) → {void}

Adds an event listener to the specified element and keeps tracking of it.

Parameters:

Name	Type	Attributes	Description
`element`	HTMLElement		The target element to which the event listener will be added.
`eventType`	string		The type of the event to listen for (e.g., 'click', 'mouseover').
`listener`	function		The function that will be called when the event is triggered.
`options`	boolean \| AddEventListenerOptions	<optional>	Optional options object or useCapture flag.

Source: basic/as-component.js, line 521

Throws:

Throws an error if the specified element is not found.
Type Error

Returns:

Type:: void

(protected) addTips() → {void}

Add the tooltip HTML Element for the component.

Source: basic/as-component.js, line 310

Returns:

Type:: void

(protected) afterRenderOnce() → {void}

Lifecycle hook called once after the component is rendered for the first time.

Source: basic/as-component.js, line 129

Returns:

Type:: void

all(selector) → {Array.<Element>}

Returns an Array representing the component's elements that matches the specified selector. If no matches are found, an empty Array is returned.

Parameters:

Name	Type	Description
`selector`	string	A string containing one selector to match. This string must be a valid CSS selector string

Source: basic/as-component.js, line 685

Returns:

An Array of Elements that matches the specified CSS selector, or an empty array if there are no matches.

Type:: Array.<Element>

attachToElement(element) → {void}

Changes the DOM element in which this component is to be inserted.

Parameters:

Name	Type	Description
`element`	HTMLElement \| Element	Container DOM element

Source: basic/as-component.js, line 644

Returns:

Type:: void

(protected) convertDataToBool(t) → {boolean}

Converts the provided text to a boolean value. (specific for switch,digitalled)

Parameters:

Name	Type	Description
`t`	string \| boolean \| number	The text value to be converted.

Source: basic/as-component.js, line 1175

Returns:

True if the text is true|TRUE|1, false otherwise.

Type:: boolean

css(properties) → {string}

Sets or returns the contents of a style declaration as a string.

Parameters:

Name	Type	Description
`properties`	string \| Array	Specifies the content of a style declaration. E.g.: "background-color:pink;font-size:55px;border:2px dashed green;color:white;"

Source: basic/as-component.js, line 784

Returns:

Type:: string

cssAddClass(selector, classNames, allopt) → {void}

Adds a class to underlying element(s) containing the input selector

Parameters:

Name	Type	Attributes	Description
`selector`	string		CSS selector, if class: ".selector", if identifier: "#selector"
`classNames`	string \| Array.<string>		name of the class to appy (without dot)
`all`	boolean	<optional>	if true it will apply the class to all selector found, otherwise it applies to the first one found

Source: basic/as-component.js, line 811

Returns:

Type:: void

cssBox(enable) → {void}

Changes apperance of the component (border and background color) to frame it or not.

Parameters:

Name	Type	Description
`enable`	boolean	if true, the component is framed, if false, not frame is shown

Source: basic/as-component.js, line 773

Returns:

Type:: void

cssRemoveClass(selector, classNames, allopt) → {void}

Removes a class to underlying element(s) containing the input selector

Parameters:

Name	Type	Attributes	Description
`selector`	string		CSS selector, if class: ".selector", if identifier: "#selector"
`classNames`	string		name of the class to appy (without dot)
`all`	boolean	<optional>	if true it will apply the class to all selector found, otherwise it applies to the first one found

Source: basic/as-component.js, line 837

Returns:

Type:: void

(protected) defaultProps() → {TComponents.ComponentProps}

Returns the default values of class properties (excluding parent properties).

Overrides: TComponents.Accessors_A#defaultProps
Source: basic/as-component.js, line 200

Returns:

Type:: TComponents.ComponentProps

destroy() → {void}

Clean up before initializing. Relevant from the second time the component is initialized.

Call onDestroy method
Call return function from onInit method if it exists
Detach the component from the parent element
Remove all local events, like this.on('event', callback)
Remove all event listeners attached with this.addEventListener

Source: basic/as-component.js, line 560

Returns:

Type:: void

(protected) enterTip() → {void}

Shows the tooltip when mouse enters.

Source: basic/as-component.js, line 334

Returns:

Type:: void

find(selector) → {HTMLElement|Element}

Returns the first Element within the component that matches the specified selector. If no matches are found, null is returned.

Parameters:

Name	Type	Description
`selector`	string	A string containing one selector to match. This string must be a valid CSS selector string

Source: basic/as-component.js, line 672

Returns:

An Element object representing the first element within the component that matches the specified set of CSS selectors, or null if there are no matches.

Type:: HTMLElement | Element

hide() → {void}

Changes visibility of the component to not show it in the view.

Source: basic/as-component.js, line 746

Returns:

Type:: void

(async) init() → {Promise.<object>}

Initialization of a component. Any asynchronous operation (like access to controller) is done here. The TComponents.Component_A#onInit() method of the component is triggered by this method.

Overrides: TComponents.Accessors_A#init
Source: basic/as-component.js, line 211

Returns:

The TComponents instance on which this method was called.

Type:: Promise.<object>

(protected) leaveTip() → {void}

Hides the tooltip when mouse leaves.

Source: basic/as-component.js, line 374

Returns:

Type:: void

(abstract) mapComponents() → {object}

Instantiation of TComponents sub-components that shall be initialized in a synchronous way. All these components are then accessible within onRender method by using this.child.

Source: basic/as-component.js, line 497

Returns:

Contains all child TComponents instances used within the component.

Type:: object

(abstract) markup(self) → {string}

Generates the HTML definition corresponding to the component.

Parameters:

Name	Type	Description
`self`	object	The TComponents instance on which this method was called.

Source: basic/as-component.js, line 509

Returns:

Type:: string

(async, protected) onCreated() → {Promise.<void>}

Lifecycle hook called when the component is created.

Source: basic/as-component.js, line 138

Returns:

Type:: Promise.<void>

(async, abstract) onDestroy()

This method is called internally during clean up process orchestrated by destroy.

Source: basic/as-component.js, line 597

(async, protected) onDispose() → {Promise.<void>}

Lifecycle hook called when the component is about to be disposed. This hook is triggered when the component is being removed from the renderer and all associated resources should be released.

Source: basic/as-component.js, line 164

Returns:

Type:: Promise.<void>

(async, abstract) onInit()

Contains component specific asynchronous implementation (like access to controller). This method is called internally during initialization process orchestrated by init.

Source: basic/as-component.js, line 398

(async, protected) onMounted() → {Promise.<void>}

Lifecycle hook called when the component is mounted.

Source: basic/as-component.js, line 151

Returns:

Type:: Promise.<void>

(abstract) onRender()

Contains all synchronous operations/setups that may be required for any sub-component after its initialization and/or manipulation of the DOM. This method is called internally during rendering process orchestrated by render.

Source: basic/as-component.js, line 408

(protected) removeAllEventListeners() → {void}

Removes all the event listeners that were added using addEventListener.

Source: basic/as-component.js, line 543

Returns:

Type:: void

(async) render(dataopt) → {Promise.<object>}

Update the content of the instance into the Document Object Model (DOM). The TComponents.Component_A#onRender() method of this component and eventual initialization of sub-components are managed by this method.

Parameters:

Name	Type	Attributes	Description
`data`	object	<optional>	Data that can be passed to the component, which may be required for the rendering process.

Overrides: TComponents.Accessors_A#render
Source: basic/as-component.js, line 263

Returns:

The TComponents instance on which this method was called.

Type:: Promise.<object>

replaceContent(content) → {void}

Replace the content of the component's container.

Parameters:

Name	Type	Description
`content`	string \| HTMLElement	The new content to replace the current content.

Source: basic/as-component.js, line 179

Returns:

Type:: void

Example

const component = new TComponents.Component_A(document.body, {});
component.replaceContent('New Content');

show() → {void}

Changes visibility of the component to show it in the view.

Source: basic/as-component.js, line 756

Returns:

Type:: void

(async) syncInputData(value) → {Promise.<boolean>}

Synchronizes the input data. This method checks whether the input data is valid and triggers synchronization using an external component. It handles errors gracefully and provides feedback through a popup if synchronization fails.

Parameters:

Name	Type	Description
`value`	any	The value to be synchronized. This can be of any type depending on the implementation.

Source: basic/as-component.js, line 877

Throws:

If binding data is null or synchronization fails unexpectedly.
Type Error

Returns:

A promise that resolves to true if the synchronization is successful, or false if an error occurs or binding data is null.

Type:: Promise.<boolean>

syncInputDataWithPopup(value) → {Promise.<void>}

Synchronizes the input data with a popup notification.

Parameters:

Name	Type	Description
`value`	any	The value to be synchronized.

Source: basic/as-component.js, line 908

Throws:

If synchronization fails.
Type Error

Returns:

Type:: Promise.<void>

updateProps(_newPropsopt) → {void}

Updates the properties of the component.

Parameters:

Name	Type	Attributes	Default	Description
`_newProps`	object	<optional>	{}	The new properties to merge with the current properties.

Source: basic/as-component.js, line 1231

Returns:

Type:: void

(protected) validateText(t) → {boolean}

Validates if the provided text can be interpreted as a boolean or number. (specific for switch,digitalled)

Parameters:

Name	Type	Description
`t`	string \| boolean \| number	The text value to be validated.

Source: basic/as-component.js, line 1147

Returns:

True if the text is valid, false otherwise.

Type:: boolean

(static) _hasChildComponent() → {boolean}

Recursively check for instances of type TComponent and FPComponent

Source: basic/as-component.js, line 1021

Returns:

true if the object has child components, false otherwise

Type:: boolean

(static) _isFPComponent(o) → {boolean}

Checks if the object is an instance of any FPComponent.

Parameters:

Name	Type	Description
`o`	any

Source: basic/as-component.js, line 1030

Returns:

true if the object is an FPComponent, false otherwise

Type:: boolean

(static) _isHTMLElement(o) → {boolean}

Check if an entry is HTML Element

Parameters:

Name	Type	Description
`o`	any

Source: basic/as-component.js, line 1042

Returns:

true if entry is an HTMLElement, false otherwise

Type:: boolean

(static) conditionProcessing(self, states) → {void}

Processes conditions and updates the component properties accordingly.

Parameters:

Name	Type	Description
`self`	object	The component instance.
`states`	Array.<any>	The states to process.

Source: basic/as-component.js, line 1352

Returns:

Type:: void

(static) disableComponentOn(self, condition) → {void}

Disables the component based on a condition.

Parameters:

Name	Type	Description
`self`	object	The component instance.
`condition`	object	The condition to evaluate.

Source: basic/as-component.js, line 1326

Returns:

Type:: void

(static) dynamicProperty(text, self, propName) → {string|number}

Generates dynamic value based on the input type.

Parameters:

Name	Type	Description
`text`	string \| number	The text to process.
`self`	object	The component instance.
`propName`	String	The property to update.

Deprecated: This interface is to be deprecated. If you need to perform multilingual parsing, please use TComponent.tParse.
Source: basic/as-component.js, line 1578

Returns:

The processed text.

Type:: string | number

(static) dynamicText(text, self) → {string|number}

Generates dynamic text based on the input type.

Parameters:

Name	Type	Description
`text`	string \| number	The text to process.
`self`	object	The component instance.

Source: basic/as-component.js, line 1565

Returns:

The processed text.

Type:: string | number

(static) genFuncTemplate(data, self) → {function|null}

Generates a function template from a string.

Parameters:

Name	Type	Description
`data`	string \| function \| any	The string containing the function body.
`self`	object	The component instance.

Source: basic/as-component.js, line 2077

Returns:

The generated function or null if the input is not a valid function.

Type:: function | null

(static) genFuncTemplateWithPopup(data, self)

Generates a function template from a string and pop up dialog if error happens.

Parameters:

Name	Type	Description
`data`	any
`self`	any

Deprecated: Will remove this
Source: basic/as-component.js, line 2113

(static) getBindData(strData, self) → {Object|null}

Extracts binding data from a string.

Parameters:

Name	Type	Description
`strData`	string	The string to extract data from.
`self`	object	The component instance.

Source: basic/as-component.js, line 1929

Returns:

The binding data or null if not applicable.

Type:: Object | null

(static) getDataStruct(vs, self) → {object}

Extracts data structure information from the variable string.

Parameters:

Name	Type	Description
`vs`	any	The variable string parts.
`self`	any	The component instance.

Source: basic/as-component.js, line 1884

Returns:

The extracted data structure information.

Type:: object

(static) getInstanceProperty(key) → {Component_A}

Retrieve instance attributes from the global instance table based on the key value

Parameters:

Name	Type	Description
`key`	string	The key name of the instance.

Source: basic/as-component.js, line 2180

Returns:

The target instance.

Type:: Component_A

(static) handleComponentOn(self, options, action) → {void}

Handles component state changes based on resource and action.

Parameters:

Name Type Description

self

object

The component instance.

options

object

The options for the handler.

Properties

Name	Type	Description
`resource`	string	The resource to monitor.
`instance`	object	The instance information.
`state`	string	The state to monitor.

action

string

The action to perform.

Source: basic/as-component.js, line 1242

Returns:

Type:: void

(static) hideComponentOn(self, condition) → {void}

Hides the component based on a condition.

Parameters:

Name	Type	Description
`self`	object	The component instance.
`condition`	object	The condition to evaluate.

Source: basic/as-component.js, line 1339

Returns:

Type:: void

(static) loadCssClassFromString(css) → {void}

Loads a CSS stylesheet from a string and inserts it into the document. This method uses a hash to avoid injecting the same CSS twice.

Parameters:

Name	Type	Description
`css`	string	The CSS string to load.

Source: basic/as-component.js, line 1056

Throws:

If the provided css argument is not a string.
Type Error

Returns:

Type:: void

(static) loadCssClassFromStringUnique(css, selector) → {void}

Loads a unique CSS stylesheet from a string and inserts it into the document. This method uses a hash to avoid injecting the same CSS twice.

Parameters:

Name	Type	Description
`css`	string	The CSS string to load.
`selector`	string	The CSS selector to apply the styles to.

Source: basic/as-component.js, line 1085

Throws:

If the provided arguments are not a string.
Type Error

Returns:

Type:: void

(static) mFor(array, markup) → {string}

Maps an array to a string of markup.

Parameters:

Name	Type	Description
`array`	Array.<any>	The array to map.
`markup`	function	The function to generate markup for each item.

Source: basic/as-component.js, line 1134

Returns:

The concatenated string of markup.

Type:: string

(static) mIf(condition, markup, elseMarkupopt) → {string}

Returns markup based on a condition.

Parameters:

Name	Type	Attributes	Default	Description
`condition`	boolean			The condition to evaluate.
`markup`	string			The markup to return if the condition is true.
`elseMarkup`	string	<optional>	''	The markup to return if the condition is false.

Source: basic/as-component.js, line 1120

Returns:

The appropriate markup based on the condition.

Type:: string

(static) resolveBindingExpression(text, self, propName) → {string|number}

Parse the specific value according to the bound text.

Parameters:

Name	Type	Description
`text`	string \| number	The text to process.
`self`	object	The component instance.
`propName`	String	The property to update.

Source: basic/as-component.js, line 1717

Returns:

The processed text.

Type:: string | number

(static) setLanguageAdapter(adapter) → {void}

Sets the language adapter for the component.

Parameters:

Name Type Description

adapter

object

The language adapter.

Properties

Name	Type	Description
`t`	function	The translation function.

Source: basic/as-component.js, line 2137

Throws:

If adapter.t is not a function.
Type Error

Returns:

Type:: void

(async, static) syncData(value, self) → {Promise.<boolean>}

Synchronizes data with a specified value.

Parameters:

Name	Type	Description
`value`	any	The value to synchronize.
`self`	object	The component instance.

Source: basic/as-component.js, line 1991

Returns:

A promise that resolves to true if synchronization is successful, otherwise false.

Type:: Promise.<boolean>

(static) t(key) → {string}

Translates a key using the language adapter.

Parameters:

Name	Type	Description
`key`	string	The key to translate.

Source: basic/as-component.js, line 2152

Returns:

The translated key.

Type:: string

(static) tParse(key) → {string}

Parses translation keys and replaces them with their corresponding values.

Parameters:

Name	Type	Description
`key`	string	The key to translate.

Source: basic/as-component.js, line 2165

Returns:

The translated value.

Type:: string