Led JAVASCRIPT UI Component API

Led Javascript API

Class

Led

Led

LET Toggle button with Checked boolean value.

Selector

smart-led

Properties

AanimationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled, and elements will display or update instantly without any transition effects. For other values, the specified animation mode will determine how visual changes are animated.
CcheckedGets the current check state or sets it to a specified value, typically used for checkbox, radio button, or similar UI elements. The check state indicates whether the element is checked, unchecked, or (if supported) in an indeterminate state.
CclickModeSpecifies the conditions under which the element will trigger a click event, allowing you to control when and how user interactions or programmatic actions cause the click event to be fired.
DdisabledControls the LED's power state by enabling (turning on) or disabling (turning off) the LED.
FfalseContentSpecifies the content to be displayed when the state is set to 'false'.
FfalseTemplateDefines a custom template that determines the LED's appearance or behavior when it is in the "off" or false state.
IindeterminateConfigures the LED to display an indeterminate state, typically represented by a blinking or animated pattern to indicate ongoing activity or a process with an unknown completion time. This is useful for scenarios where the system cannot determine or communicate a specific status or progress value.
IindeterminateContentDefines the content to be displayed when the component is in a 'null' or empty state, such as when no data is available or the value is undefined.
IindeterminateTemplateDefines a custom template to visually represent the LED component when it is in an indeterminate state, allowing you to specify the appearance or behavior of the LED during this undefined or transitional state.
UunlockKeySets or retrieves the unlockKey, a unique identifier or code required to unlock access to the product. This property allows you to manage product access by specifying or obtaining the key needed for unlocking restricted features or content.
LlocaleSpecifies or retrieves the current language setting for localization purposes. This property works together with the messages property to display interface text and messages in the selected language. When you set this property, the corresponding localized messages from messages are used throughout the application.
LlocalizeFormatFunctionA callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify or enhance localized messages—such as applying custom templates, injecting dynamic content, or adjusting formatting—before they are delivered to the user interface.
MmessagesDefines or retrieves an object containing localized strings used by the widget's user interface, such as labels, messages, and tooltips. This property works in tandem with the locale property to enable support for multiple languages, allowing developers to customize text displayed to users based on their selected language or region.
NnameSets or retrieves the value of the element's name attribute. The name attribute is used to identify form elements when submitting HTML forms, allowing their values to be sent to the server as key-value pairs. This attribute is essential for collecting user input in form processing.
RreadonlyIf the widget is set to read-only, users will be unable to interact with the element or modify its contents. All input and editing functionalities will be disabled, ensuring that the information displayed remains unchanged by the user.
RrightToLeftSets or retrieves the value that determines whether the element’s content is aligned to support languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew. This property ensures proper text direction and alignment for locales requiring RTL formatting.
SshapeSpecifies the geometric shape or appearance of the LED component, such as circle, square, rectangle, or custom shapes. This setting determines how the LED will be visually rendered in the user interface.
TthemeSpecifies the theme to be applied, which controls the visual appearance—such as colors, fonts, and styles—of the element. The selected theme ensures a consistent and cohesive look and feel across the user interface.
TtrueContentSpecifies the content that will be displayed or rendered when the associated state is evaluated as 'true'.
TtrueTemplateSpecifies a custom template that defines the behavior or appearance of the LED when its state is set to "true" (on). Use this template to customize how the LED should be displayed or controlled when activated.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or scripting methods such as element.focus().
VvalueSets a new value for the element or retrieves its current value, depending on whether an argument is provided. This is commonly used for form elements such as input, select, or textarea to programmatically update or access their contents.

Events

CchangeThis event is triggered whenever the widget’s checked state changes, that is, when the user selects (checks) or deselects (unchecks) the widget. It allows you to execute custom logic in response to the widget being either checked or unchecked.

Properties

animation"none" | "simple" | "advanced"

Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled, and elements will display or update instantly without any transition effects. For other values, the specified animation mode will determine how visual changes are animated.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-led animation='none'></smart-led>

Set the animation property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.animation = 'simple';

Get the animation property. 

 const led = document.querySelector('smart-led');
 let animation = led.animation;

checkedboolean

Gets the current check state or sets it to a specified value, typically used for checkbox, radio button, or similar UI elements. The check state indicates whether the element is checked, unchecked, or (if supported) in an indeterminate state.

Default value

false

Example

Set the checked property. 

 <smart-led checked></smart-led>

Set the checked property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.checked = false;

Get the checked property. 

 const led = document.querySelector('smart-led');
 let checked = led.checked;

clickMode"hover" | "press" | "release" | "pressAndRelease"

Specifies the conditions under which the element will trigger a click event, allowing you to control when and how user interactions or programmatic actions cause the click event to be fired.

Allowed Values

  • "hover" - Fires a click event on hover and sets the element to clicked state.
  • "press" - Fires a click event on press and sets the element to clicked state.
  • "release" - Fires a click event on release and sets the element to clicked state.
  • "pressAndRelease" - Fires a click event on press and a second click event on release and then sets the element to clicked state.

Default value

"release"

Example

Set the clickMode property. 

 <smart-led click-mode='press'></smart-led>

Set the clickMode property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.clickMode = 'pressAndRelease';

Get the clickMode property. 

 const led = document.querySelector('smart-led');
 let clickMode = led.clickMode;

disabledboolean

Controls the LED's power state by enabling (turning on) or disabling (turning off) the LED.

Default value

false

Example

Set the disabled property. 

 <smart-led disabled></smart-led>

Set the disabled property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.disabled = false;

Get the disabled property. 

 const led = document.querySelector('smart-led');
 let disabled = led.disabled;

falseContentstring

Specifies the content to be displayed when the state is set to 'false'.

Default value

""""

Example

Set the falseContent property. 

 <smart-led false-content='OFF'></smart-led>

Set the falseContent property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.falseContent = 'False';

Get the falseContent property. 

 const led = document.querySelector('smart-led');
 let falseContent = led.falseContent;

falseTemplateany

Defines a custom template that determines the LED's appearance or behavior when it is in the "off" or false state.

Example

Set the falseTemplate property. 

 <smart-led false-template='templateId1'></smart-led>

Set the falseTemplate property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.falseTemplate = templateId2;

Get the falseTemplate property. 

 const led = document.querySelector('smart-led');
 let falseTemplate = led.falseTemplate;

indeterminateboolean

Configures the LED to display an indeterminate state, typically represented by a blinking or animated pattern to indicate ongoing activity or a process with an unknown completion time. This is useful for scenarios where the system cannot determine or communicate a specific status or progress value.

Default value

false

Example

Set the indeterminate property. 

 <smart-led indeterminate></smart-led>

Set the indeterminate property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.indeterminate = false;

Get the indeterminate property. 

 const led = document.querySelector('smart-led');
 let indeterminate = led.indeterminate;

indeterminateContentstring

Defines the content to be displayed when the component is in a 'null' or empty state, such as when no data is available or the value is undefined.

Default value

""""

Example

Set the indeterminateContent property. 

 <smart-led indeterminate-content=''></smart-led>

Set the indeterminateContent property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.indeterminateContent = 'Indeterminate';

Get the indeterminateContent property. 

 const led = document.querySelector('smart-led');
 let indeterminateContent = led.indeterminateContent;

indeterminateTemplateany

Defines a custom template to visually represent the LED component when it is in an indeterminate state, allowing you to specify the appearance or behavior of the LED during this undefined or transitional state.

Example

Set the indeterminateTemplate property. 

 <smart-led indeterminate-template='templateId1'></smart-led>

Set the indeterminateTemplate property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.indeterminateTemplate = templateId2;

Get the indeterminateTemplate property. 

 const led = document.querySelector('smart-led');
 let indeterminateTemplate = led.indeterminateTemplate;

unlockKeystring

Sets or retrieves the unlockKey, a unique identifier or code required to unlock access to the product. This property allows you to manage product access by specifying or obtaining the key needed for unlocking restricted features or content.

Default value

""

Example

Set the unlockKey property. 

 <smart-led unlock-key=''></smart-led>

Set the unlockKey property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

 const led = document.querySelector('smart-led');
 let unlockKey = led.unlockKey;

localestring

Specifies or retrieves the current language setting for localization purposes. This property works together with the messages property to display interface text and messages in the selected language. When you set this property, the corresponding localized messages from messages are used throughout the application.

Default value

"en"

Example

Set the locale property. 

 <smart-led locale='de'></smart-led>

Set the locale property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.locale = 'fr';

Get the locale property. 

 const led = document.querySelector('smart-led');
 let locale = led.locale;

localizeFormatFunctionfunction | null

A callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this to modify or enhance localized messages—such as applying custom templates, injecting dynamic content, or adjusting formatting—before they are delivered to the user interface.

Example

Set the localizeFormatFunction property. 

 <smart-led localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-led>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const led = document.querySelector('smart-led');
 let localizeFormatFunction = led.localizeFormatFunction;

messagesobject

Defines or retrieves an object containing localized strings used by the widget's user interface, such as labels, messages, and tooltips. This property works in tandem with the locale property to enable support for multiple languages, allowing developers to customize text displayed to users based on their selected language or region.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property. 

 <smart-led messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-led>

Set the messages property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property. 

 const led = document.querySelector('smart-led');
 let messages = led.messages;

namestring

Sets or retrieves the value of the element's name attribute. The name attribute is used to identify form elements when submitting HTML forms, allowing their values to be sent to the server as key-value pairs. This attribute is essential for collecting user input in form processing.

Default value

""""

Example

Set the name property. 

 <smart-led name='Name'></smart-led>

Set the name property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.name = 'New Name';

Get the name property. 

 const led = document.querySelector('smart-led');
 let name = led.name;

readonlyboolean

If the widget is set to read-only, users will be unable to interact with the element or modify its contents. All input and editing functionalities will be disabled, ensuring that the information displayed remains unchanged by the user.

Default value

false

Example

Set the readonly property. 

 <smart-led readonly></smart-led>

Set the readonly property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.readonly = true;

Get the readonly property. 

 const led = document.querySelector('smart-led');
 let readonly = led.readonly;

rightToLeftboolean

Sets or retrieves the value that determines whether the element’s content is aligned to support languages that use right-to-left (RTL) scripts, such as Arabic or Hebrew. This property ensures proper text direction and alignment for locales requiring RTL formatting.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-led right-to-left></smart-led>

Set the rightToLeft property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.rightToLeft = false;

Get the rightToLeft property. 

 const led = document.querySelector('smart-led');
 let rightToLeft = led.rightToLeft;

shape"round" | "square"

Specifies the geometric shape or appearance of the LED component, such as circle, square, rectangle, or custom shapes. This setting determines how the LED will be visually rendered in the user interface.

Allowed Values

  • "round" - The LED represents a circle.
  • "square" - The LED representsa a square.

Default value

"round"

Example

Set the shape property. 

 <smart-led shape='square'></smart-led>

Set the shape property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.shape = 'round';

Get the shape property. 

 const led = document.querySelector('smart-led');
 let shape = led.shape;

themestring

Specifies the theme to be applied, which controls the visual appearance—such as colors, fonts, and styles—of the element. The selected theme ensures a consistent and cohesive look and feel across the user interface.

Default value

""

Example

Set the theme property. 

 <smart-led theme='blue'></smart-led>

Set the theme property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.theme = 'red';

Get the theme property. 

 const led = document.querySelector('smart-led');
 let theme = led.theme;

trueContentstring

Specifies the content that will be displayed or rendered when the associated state is evaluated as 'true'.

Default value

""""

Example

Set the trueContent property. 

 <smart-led true-content='ON'></smart-led>

Set the trueContent property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.trueContent = 'True';

Get the trueContent property. 

 const led = document.querySelector('smart-led');
 let trueContent = led.trueContent;

trueTemplateany

Specifies a custom template that defines the behavior or appearance of the LED when its state is set to "true" (on). Use this template to customize how the LED should be displayed or controlled when activated.

Example

Set the trueTemplate property. 

 <smart-led true-template='templateId1'></smart-led>

Set the trueTemplate property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.trueTemplate = templateId2;

Get the trueTemplate property. 

 const led = document.querySelector('smart-led');
 let trueTemplate = led.trueTemplate;

unfocusableboolean

When set to true, this property prevents the element from receiving keyboard focus, making it inaccessible via tab navigation or scripting methods such as element.focus().

Default value

false

Example

Set the unfocusable property. 

 <smart-led unfocusable></smart-led>

Set the unfocusable property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.unfocusable = false;

Get the unfocusable property. 

 const led = document.querySelector('smart-led');
 let unfocusable = led.unfocusable;

valuestring

Sets a new value for the element or retrieves its current value, depending on whether an argument is provided. This is commonly used for form elements such as input, select, or textarea to programmatically update or access their contents.

Default value

""""

Example

Set the value property. 

 <smart-led value='Value'></smart-led>

Set the value property by using the HTML Element's instance. 

 const led = document.querySelector('smart-led');
 led.value = 'New Value';

Get the value property. 

 const led = document.querySelector('smart-led');
 let value = led.value;

Events

changeCustomEvent

This event is triggered whenever the widget’s checked state changes, that is, when the user selects (checks) or deselects (unchecks) the widget. It allows you to execute custom logic in response to the widget being either checked or unchecked.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The previous value of the element before it was changed.
ev.detail.value - The new value of the element.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event. 

const led = document.querySelector('smart-led');
led.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

CSS Variables

--smart-led-default-widthvar()

Default value

"var(--smart-editor-height)"

smartLed default width

--smart-led-default-heightvar()

Default value

"var(--smart-editor-height)"

smartLed default height