Led JAVASCRIPT UI Component API

Led Javascript API

Class

Led

LET Toggle button with Checked boolean value.

Properties

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

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

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

Sets or gets the check 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"

Determines when the element fires a click event.

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

Enables or disables 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

Sets the content for the 'false' state.

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

Sets custom template for LED's 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

Sets the LED to indeterminate state.

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

Sets the content for the 'null' state.

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

Sets a custom template for LED's indeterminate 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;

localestring

Sets or gets the language. Used in conjunction with the property messages.

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

Callback used to customize the format of the messages that are returned from the Localization Module.

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

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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 gets the name attribute for the element. Name is used when submiting HTML forms.

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 widgets is readonly, the users cannot iteract with the element.

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 gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

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"

Sets the shape of LED.

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

Determines the theme. Theme defines the look of the element

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

Sets the content for the 'true' state.

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

Sets custom template for LED's true state.

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

If is set to true, the element cannot be focused.

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 or gets the element's value.

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 when the widget is checked/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