PowerButton JAVASCRIPT UI Component API

PowerButton Javascript API

Class

PowerButton

PowerButton

PowerButton is On/Off rounded button.

Selector

smart-power-button

Properties

AanimationSpecifies or retrieves the current animation mode for the element. When the property is set to 'none', all animations are disabled and the element will render without any animated transitions or effects. Otherwise, animations will be applied according to the specified mode.
CcheckedSets or retrieves the current checked state of the element, indicating whether it is selected, unselected, or in an indeterminate state.
CclickModeSpecifies how the button responds to user clicks, determining the interaction behavior such as whether the action is triggered on mouse press, release, or another click event.
DdisabledControls whether the power button is active or inactive. When enabled, the power button is functional and can be used to perform its designated action. When disabled, the power button is unresponsive and cannot be used.
UunlockKeyGets or sets the unlockKey property, a unique string used to authenticate and unlock access to the product’s features or full version. This key must be valid to successfully enable restricted functionality.
LlocaleSpecifies the current language to be used for message localization. This property determines which language's messages are retrieved from the messages property. You can use it to set or get the active language code (e.g., 'en', 'fr', 'es'), ensuring the appropriate localized messages are displayed to users.
LlocalizeFormatFunctionCallback function associated with the localization module, typically used to handle language changes, load translations, or update content based on the selected locale.
MmessagesDefines or retrieves an object containing the text strings used within the widget, allowing for customization and localization of user interface elements. This property works together with the locale setting to display the widget's labels, messages, and other textual content in the appropriate language. The provided object maps text keys to their localized string values.
NnameGets the current name of the widget or sets a new name for the widget. This property allows you to retrieve the widget's identifier or assign a custom name to help distinguish it from other widgets in your application.
RreadonlyWhen the custom element is set to readonly, its content cannot be modified by the user either through direct input or interaction with form controls within the element. However, users may still be able to focus, highlight, or copy its content, depending on its implementation. No actions or events that would change the element’s value or state will be permitted.
TthemeSpecifies the theme to be applied to the element. The selected theme controls the visual style, including colors, fonts, and overall appearance, ensuring a consistent look and feel across the component.
UunfocusableIf set to true, the element will be excluded from the tab sequence and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key or programmatically set focus to it.
VvalueRetrieves the current value of the widget or assigns a new value to it. This property allows you to read the widget's state or update it programmatically.

Events

CchangeThis event is triggered whenever the widget's state changes, specifically when it becomes either checked or unchecked. It allows you to handle actions in response to the user selecting or deselecting the widget.

Properties

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

Specifies or retrieves the current animation mode for the element. When the property is set to 'none', all animations are disabled and the element will render without any animated transitions or effects. Otherwise, animations will be applied according to the specified mode.

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-power-button animation='none'></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.animation = 'simple';

Get the animation property. 

 const powerbutton = document.querySelector('smart-power-button');
 let animation = powerbutton.animation;

checkedboolean

Sets or retrieves the current checked state of the element, indicating whether it is selected, unselected, or in an indeterminate state.

Default value

false

Example

Set the checked property. 

 <smart-power-button checked></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.checked = false;

Get the checked property. 

 const powerbutton = document.querySelector('smart-power-button');
 let checked = powerbutton.checked;

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

Specifies how the button responds to user clicks, determining the interaction behavior such as whether the action is triggered on mouse press, release, or another click event.

Default value

"release"

Example

Set the clickMode property. 

 <smart-power-button click-mode='hover'></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.clickMode = 'release';

Get the clickMode property. 

 const powerbutton = document.querySelector('smart-power-button');
 let clickMode = powerbutton.clickMode;

disabledboolean

Controls whether the power button is active or inactive. When enabled, the power button is functional and can be used to perform its designated action. When disabled, the power button is unresponsive and cannot be used.

Default value

false

Example

Set the disabled property. 

 <smart-power-button disabled></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.disabled = false;

Get the disabled property. 

 const powerbutton = document.querySelector('smart-power-button');
 let disabled = powerbutton.disabled;

unlockKeystring

Gets or sets the unlockKey property, a unique string used to authenticate and unlock access to the product’s features or full version. This key must be valid to successfully enable restricted functionality.

Default value

""

Example

Set the unlockKey property. 

 <smart-power-button unlock-key=''></smart-power-button>

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

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

Get the unlockKey property. 

 const powerbutton = document.querySelector('smart-power-button');
 let unlockKey = powerbutton.unlockKey;

localestring

Specifies the current language to be used for message localization. This property determines which language's messages are retrieved from the messages property. You can use it to set or get the active language code (e.g., 'en', 'fr', 'es'), ensuring the appropriate localized messages are displayed to users.

Default value

"en"

Example

Set the locale property. 

 <smart-power-button locale='de'></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.locale = 'fr';

Get the locale property. 

 const powerbutton = document.querySelector('smart-power-button');
 let locale = powerbutton.locale;

localizeFormatFunctionfunction | null

Callback function associated with the localization module, typically used to handle language changes, load translations, or update content based on the selected locale.

Example

Set the localizeFormatFunction property. 

 <smart-power-button localize-format-function='function(){return '...'}'></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property. 

 const powerbutton = document.querySelector('smart-power-button');
 let localizeFormatFunction = powerbutton.localizeFormatFunction;

messagesobject

Defines or retrieves an object containing the text strings used within the widget, allowing for customization and localization of user interface elements. This property works together with the locale setting to display the widget's labels, messages, and other textual content in the appropriate language. The provided object maps text keys to their localized string values.

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-power-button 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-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.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 powerbutton = document.querySelector('smart-power-button');
 let messages = powerbutton.messages;

namestring

Gets the current name of the widget or sets a new name for the widget. This property allows you to retrieve the widget's identifier or assign a custom name to help distinguish it from other widgets in your application.

Default value

""""

Example

Set the name property. 

 <smart-power-button name='Name'></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.name = 'New Name';

Get the name property. 

 const powerbutton = document.querySelector('smart-power-button');
 let name = powerbutton.name;

readonlyboolean

When the custom element is set to readonly, its content cannot be modified by the user either through direct input or interaction with form controls within the element. However, users may still be able to focus, highlight, or copy its content, depending on its implementation. No actions or events that would change the element’s value or state will be permitted.

Default value

false

Example

Set the readonly property. 

 <smart-power-button readonly></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.readonly = false;

Get the readonly property. 

 const powerbutton = document.querySelector('smart-power-button');
 let readonly = powerbutton.readonly;

themestring

Specifies the theme to be applied to the element. The selected theme controls the visual style, including colors, fonts, and overall appearance, ensuring a consistent look and feel across the component.

Default value

""

Example

Set the theme property. 

 <smart-power-button theme='blue'></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.theme = 'red';

Get the theme property. 

 const powerbutton = document.querySelector('smart-power-button');
 let theme = powerbutton.theme;

unfocusableboolean

If set to true, the element will be excluded from the tab sequence and cannot receive keyboard focus. This means users will not be able to navigate to the element using the Tab key or programmatically set focus to it.

Default value

false

Example

Set the unfocusable property. 

 <smart-power-button unfocusable></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.unfocusable = false;

Get the unfocusable property. 

 const powerbutton = document.querySelector('smart-power-button');
 let unfocusable = powerbutton.unfocusable;

valuestring

Retrieves the current value of the widget or assigns a new value to it. This property allows you to read the widget's state or update it programmatically.

Default value

""""

Example

Set the value property. 

 <smart-power-button value='Value'></smart-power-button>

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

 const powerbutton = document.querySelector('smart-power-button');
 powerbutton.value = 'New Value';

Get the value property. 

 const powerbutton = document.querySelector('smart-power-button');
 let value = powerbutton.value;

Events

changeCustomEvent

This event is triggered whenever the widget's state changes, specifically when it becomes either checked or unchecked. It allows you to handle actions in response to the user selecting or deselecting the widget.

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

Arguments

evCustomEvent

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 powerbutton = document.querySelector('smart-power-button');
powerbutton.addEventListener('change', function (event) {
	// event handling code goes here.
})

CSS Variables

--smart-power-button-default-widthvar()

Default value

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

smartPowerButton default width

--smart-power-button-default-heightvar()

Default value

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

smartPowerButton default height