new Component_A(parent, props)
Creates an instance of TComponents.Component class. This is the base parent class of all TComponent.
| Name | Type | Description |
|---|---|---|
parent | HTMLElement | HTMLElement that is going to be the parent of the component. |
props | TComponents. | Parameters to create the component. |
- Source
const component = new TComponents.Component_A(document.body, {
label: 'My Component',
labelPos: 'top',
options: {
async: true
}
});Extends
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.
- object
| Name | Type | Description |
|---|---|---|
CUSTOM | string | A custom processing strategy for input variables. |
SYNC | string | A synchronous processing strategy for input variables. |
- Source
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.
- object
| 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
enabled
Enables or disables the component and all its child components.
- Source
this.enabled = true;globalEvents :Eventing_A
Global event handler for the Component_A class.
- Source
languageAdapter :object
language adapter for the Component_A class.
- object
- Source
(static) isTComponent
Static method to check if an object is a TComponent.
- Source
Methods
(protected) _addTips() → {void}
Add the tooltip HTML Element for the component.
- Source
- Type:
- void
(protected) _enterTip() → {void}
Shows the tooltip when mouse enters.
- Source
- Type:
- void
(protected) _leaveTip() → {void}
Hides the tooltip when mouse leaves.
- Source
- Type:
- void
(protected) addEventListener(element, eventType, listener, optionsopt) → {void}
Adds an event listener to the specified element and keeps tracking of it.
| 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 | | <optional> | Optional options object or useCapture flag. |
- Source
Throws an error if the specified element is not found.
- Type
- Error
- 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.
| Name | Type | Description |
|---|---|---|
selector | string | A string containing one selector to match. This string must be a valid CSS selector string |
- Source
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.
| Name | Type | Description |
|---|---|---|
element | HTMLElement | | Container DOM element |
- Source
- Type:
- void
css(properties) → {string}
Sets or returns the contents of a style declaration as a string.
| Name | Type | Description |
|---|---|---|
properties | string | | Specifies the content of a style declaration. E.g.: "background-color:pink;font-size:55px;border:2px dashed green;color:white;" |
- Source
- Type:
- string
cssAddClass(selector, classNames, allopt) → {void}
Adds a class to underlying element(s) containing the input selector
| 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
- Type:
- void
cssBox(enable) → {void}
Changes apperance of the component (border and background color) to frame it or not.
| Name | Type | Description |
|---|---|---|
enable | boolean | if true, the component is framed, if false, not frame is shown |
- Source
- Type:
- void
cssRemoveClass(selector, classNames, allopt) → {void}
Removes a class to underlying element(s) containing the input selector
| 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
- Type:
- void
(protected) defaultProps() → {TComponents.ComponentProps}
Returns the default values of class properties (excluding parent properties).
- Overrides
- Source
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
- 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.
| Name | Type | Description |
|---|---|---|
selector | string | A string containing one selector to match. This string must be a valid CSS selector string |
- Source
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
- 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
- Source
The TComponents instance on which this method was called.
- Type:
- Promise.<object>
(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
Contains all child TComponents instances used within the component.
- Type:
- object
(abstract) markup(self) → {string}
Generates the HTML definition corresponding to the component.
| Name | Type | Description |
|---|---|---|
self | object | The TComponents instance on which this method was called. |
- Source
- Type:
- string
(async, protected) onCreated() → {Promise.<void>}
Lifecycle hook called when the component is created.
- Source
- Type:
- Promise.<void>
(async, abstract) onDestroy()
This method is called internally during clean up process orchestrated by destroy.
- Source
(async, abstract) onInit()
Contains component specific asynchronous implementation (like access to controller). This method is called internally during initialization process orchestrated by init.
- Source
(async, protected) onMounted() → {Promise.<void>}
Lifecycle hook called when the component is mounted.
- Source
- 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
(protected) removeAllEventListeners() → {void}
Removes all the event listeners that were added using addEventListener.
- Source
- 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.
| Name | Type | Attributes | Description |
|---|---|---|---|
data | object | <optional> | Data that can be passed to the component, which may be required for the rendering process. |
- Overrides
- Source
The TComponents instance on which this method was called.
- Type:
- Promise.<object>
replaceContent(content) → {void}
Replace the content of the component's container.
| Name | Type | Description |
|---|---|---|
content | string | | The new content to replace the current content. |
- Source
- Type:
- void
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
- 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.
| Name | Type | Description |
|---|---|---|
value | any | The value to be synchronized. This can be of any type depending on the implementation. |
- Source
If binding data is null or synchronization fails unexpectedly.
- Type
- Error
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.
| Name | Type | Description |
|---|---|---|
value | any | The value to be synchronized. |
- Source
If synchronization fails.
- Type
- Error
- Type:
- Promise.<void>
updateProps(_newPropsopt) → {void}
Updates the properties of the component.
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
_newProps | object | <optional> | {} | The new properties to merge with the current properties. |
- Source
- Type:
- void
(static) _hasChildComponent() → {boolean}
Recursively check for instances of type TComponent and FPComponent
- Source
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.
| Name | Type | Description |
|---|---|---|
o | any |
- Source
true if the object is an FPComponent, false otherwise
- Type:
- boolean
(static) _isHTMLElement(o) → {boolean}
Check if an entry is HTML Element
| Name | Type | Description |
|---|---|---|
o | any |
- Source
true if entry is an HTMLElement, false otherwise
- Type:
- boolean
(static) conditionProcessing(self, states) → {void}
Processes conditions and updates the component properties accordingly.
| Name | Type | Description |
|---|---|---|
self | object | The component instance. |
states | Array.<any> | The states to process. |
- Source
- Type:
- void
(static) disableComponentOn(self, condition) → {void}
Disables the component based on a condition.
| Name | Type | Description |
|---|---|---|
self | object | The component instance. |
condition | object | The condition to evaluate. |
- Source
- Type:
- void
(static) dynamicProperty(text, self, propName) → {string|number}
Generates dynamic value based on the input type.
| Name | Type | Description |
|---|---|---|
text | string | | The text to process. |
self | object | The component instance. |
propName | String | The property to update. |
- Source
The processed text.
- Type:
- string |
number
(static) dynamicText(text, self) → {string|number}
Generates dynamic text based on the input type.
| Name | Type | Description |
|---|---|---|
text | string | | The text to process. |
self | object | The component instance. |
- Source
The processed text.
- Type:
- string |
number
(static) genFuncTemplate(data, self) → {function|null}
Generates a function template from a string.
| Name | Type | Description |
|---|---|---|
data | string | | The string containing the function body. |
self | object | The component instance. |
- Source
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.
| Name | Type | Description |
|---|---|---|
data | any | |
self | any |
- Source
(static) getBindData(strData, self) → {Object|null}
Extracts binding data from a string.
| Name | Type | Description |
|---|---|---|
strData | string | The string to extract data from. |
self | object | The component instance. |
- Source
The binding data or null if not applicable.
- Type:
- Object |
null
(static) getDataStruct(vs, self) → {object}
Extracts data structure information from the variable string.
| Name | Type | Description |
|---|---|---|
vs | any | The variable string parts. |
self | any | The component instance. |
- Source
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
| Name | Type | Description |
|---|---|---|
key | string | The key name of the instance. |
- Source
The target instance.
- Type:
- Component_A
(static) handleComponentOn(self, options, action) → {void}
Handles component state changes based on resource and action.
| Name | Type | Description | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
self | object | The component instance. | ||||||||||||
options | object | The options for the handler. Properties
| ||||||||||||
action | string | The action to perform. |
- Source
- Type:
- void
(static) hideComponentOn(self, condition) → {void}
Hides the component based on a condition.
| Name | Type | Description |
|---|---|---|
self | object | The component instance. |
condition | object | The condition to evaluate. |
- Source
- 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.
| Name | Type | Description |
|---|---|---|
css | string | The CSS string to load. |
- Source
If the provided css argument is not a string.
- Type
- Error
- 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.
| Name | Type | Description |
|---|---|---|
css | string | The CSS string to load. |
selector | string | The CSS selector to apply the styles to. |
- Source
If the provided arguments are not a string.
- Type
- Error
- Type:
- void
(static) mFor(array, markup) → {string}
Maps an array to a string of markup.
| Name | Type | Description |
|---|---|---|
array | Array.<any> | The array to map. |
markup | function | The function to generate markup for each item. |
- Source
The concatenated string of markup.
- Type:
- string
(static) mIf(condition, markup, elseMarkupopt) → {string}
Returns markup based on a condition.
| 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
The appropriate markup based on the condition.
- Type:
- string
(static) processEventError(e, eventName)
Processes event execution error.
| Name | Type | Description |
|---|---|---|
e | any | Error to be processed. |
eventName | string | Event name. |
- Source
(static) setLanguageAdapter(adapter) → {void}
Sets the language adapter for the component.
| Name | Type | Description | ||||||
|---|---|---|---|---|---|---|---|---|
adapter | object | The language adapter. Properties
|
- Source
If adapter.t is not a function.
- Type
- Error
- Type:
- void
(async, static) syncData(value, self) → {Promise.<boolean>}
Synchronizes data with a specified value.
| Name | Type | Description |
|---|---|---|
value | any | The value to synchronize. |
self | object | The component instance. |
- Source
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.
| Name | Type | Description |
|---|---|---|
key | string | The key to translate. |
- Source
The translated key.
- Type:
- string