RepeatButton JAVASCRIPT UI Component API

RepeatButton Javascript API

Class

RepeatButton

RepeatButton

RepatButton provides press-and-hold functionality and it is an ideal UI component for allowing end-users to control an increasing or decreasing value.

Selector

smart-repeat-button

Properties

AanimationGets or sets the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, specifying a different value will enable and control the element’s animation behavior according to the selected mode.
CclickModeDefines how the button responds to user click interactions, determining whether actions are triggered on mouse press, release, or other specific conditions.
DdelaySpecifies the amount of time, in milliseconds, to wait between each repeated action or event. This determines how long the system pauses before triggering the repeat again.
DdisabledControls whether the ratio button is visible and can be interacted with. When enabled, users can use the ratio button; when disabled, the button is hidden or inactive.
IinitialDelaySpecifies the amount of time, in milliseconds, to wait before starting the first repeat iteration. This delay occurs only before the initial repetition and does not affect subsequent iterations.
IinnerHTMLAssigns the specified HTML markup to the element's inner content, replacing all existing child elements and text. Be cautious when inserting dynamic content to avoid potential security risks such as cross-site scripting (XSS).
UunlockKeySets or retrieves the unlockKey used to authorize and enable access to the product. This key is required to unlock product features or functionalities that are otherwise restricted.
LlocaleSpecifies or retrieves the current language code (e.g., "en", "fr", "es") used for localizing content. This property works together with the messages property to determine which set of translations or text strings to display based on the selected language. Setting this value controls which messages from the messages object are shown to users.
LlocalizeFormatFunctionCallback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update interface text based on the selected locale.
MmessagesDefines an object containing string values that represent the various states of password strength, such as "weak," "medium," and "strong." Each property in the object corresponds to a specific password strength level, allowing for the customization of messages or labels displayed to users based on the evaluated strength of their password.
NnameRetrieves the current name of the widget or assigns a new name to the widget. This property allows you to identify and reference the widget programmatically.
RreadonlyWhen the custom element is set to "readonly", all user interactions—such as input, edits, or selection—are disabled. The element's content is visible but cannot be modified or interacted with by the user. This ensures that the data remains unchanged while still allowing it to be displayed.
TthemeSpecifies the visual theme to be applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, ensuring a consistent look and feel across the interface.
UunfocusableIf set to true, the element will be removed from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard (e.g., by pressing the Tab key), enhancing accessibility control.
VvalueSets a new value for the widget or retrieves its current value, allowing for both updating and accessing the widget's data.

Events

CclickThis event is triggered each time the user clicks on the specified element. It occurs after a complete click action, which includes both the pressing and releasing of the mouse button (typically the left button) over the element. The event provides access to click-related information, such as the mouse position and any modifier keys pressed during the click.

Properties

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

Gets or sets the animation mode for the element. When this property is set to 'none', all animations are disabled. Otherwise, specifying a different value will enable and control the element’s animation behavior according to the selected 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-repeat-button animation='none'></smart-repeat-button>

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.animation = 'simple';

Get the animation property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let animation = repeatbutton.animation;

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

Defines how the button responds to user click interactions, determining whether actions are triggered on mouse press, release, or other specific conditions.

Default value

"release"

Example

Set the clickMode property. 

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

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.clickMode = 'release';

Get the clickMode property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let clickMode = repeatbutton.clickMode;

delaynumber

Specifies the amount of time, in milliseconds, to wait between each repeated action or event. This determines how long the system pauses before triggering the repeat again.

Default value

50

Example

Set the delay property. 

 <smart-repeat-button delay='20'></smart-repeat-button>

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.delay = 100;

Get the delay property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let delay = repeatbutton.delay;

disabledboolean

Controls whether the ratio button is visible and can be interacted with. When enabled, users can use the ratio button; when disabled, the button is hidden or inactive.

Default value

false

Example

Set the disabled property. 

 <smart-repeat-button disabled></smart-repeat-button>

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.disabled = false;

Get the disabled property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let disabled = repeatbutton.disabled;

initialDelaynumber

Specifies the amount of time, in milliseconds, to wait before starting the first repeat iteration. This delay occurs only before the initial repetition and does not affect subsequent iterations.

Default value

150

Example

Set the initialDelay property. 

 <smart-repeat-button initial-delay='50'></smart-repeat-button>

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.initialDelay = 500;

Get the initialDelay property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let initialDelay = repeatbutton.initialDelay;

innerHTMLstring

Assigns the specified HTML markup to the element's inner content, replacing all existing child elements and text. Be cautious when inserting dynamic content to avoid potential security risks such as cross-site scripting (XSS).

Default value

""""

Example

Set the innerHTML property. 

 <smart-repeat-button inner-h-t-m-l='Repeat Button Label'></smart-repeat-button>

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.innerHTML = 'New Repeat Button Label';

Get the innerHTML property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let innerHTML = repeatbutton.innerHTML;

unlockKeystring

Sets or retrieves the unlockKey used to authorize and enable access to the product. This key is required to unlock product features or functionalities that are otherwise restricted.

Default value

""

Example

Set the unlockKey property. 

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

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

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

Get the unlockKey property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let unlockKey = repeatbutton.unlockKey;

localestring

Specifies or retrieves the current language code (e.g., "en", "fr", "es") used for localizing content. This property works together with the messages property to determine which set of translations or text strings to display based on the selected language. Setting this value controls which messages from the messages object are shown to users.

Default value

"en"

Example

Set the locale property. 

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

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.locale = 'fr';

Get the locale property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let locale = repeatbutton.locale;

localizeFormatFunctionfunction | null

Callback function associated with the localization module, typically invoked to handle language changes, load localized resources, or update interface text based on the selected locale.

Example

Set the localizeFormatFunction property. 

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

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

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

Get the localizeFormatFunction property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let localizeFormatFunction = repeatbutton.localizeFormatFunction;

messagesobject

Defines an object containing string values that represent the various states of password strength, such as "weak," "medium," and "strong." Each property in the object corresponds to a specific password strength level, allowing for the customization of messages or labels displayed to users based on the evaluated strength of their password.

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

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

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

namestring

Retrieves the current name of the widget or assigns a new name to the widget. This property allows you to identify and reference the widget programmatically.

Default value

""""

Example

Set the name property. 

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

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.name = 'New Name';

Get the name property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let name = repeatbutton.name;

readonlyboolean

When the custom element is set to "readonly", all user interactions—such as input, edits, or selection—are disabled. The element's content is visible but cannot be modified or interacted with by the user. This ensures that the data remains unchanged while still allowing it to be displayed.

Default value

false

Example

Set the readonly property. 

 <smart-repeat-button readonly></smart-repeat-button>

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.readonly = false;

Get the readonly property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let readonly = repeatbutton.readonly;

themestring

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

Default value

""

Example

Set the theme property. 

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

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.theme = 'red';

Get the theme property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let theme = repeatbutton.theme;

unfocusableboolean

If set to true, the element will be removed from the tab order and cannot receive keyboard focus. This means users will not be able to focus on the element using the keyboard (e.g., by pressing the Tab key), enhancing accessibility control.

Default value

false

Example

Set the unfocusable property. 

 <smart-repeat-button unfocusable></smart-repeat-button>

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.unfocusable = false;

Get the unfocusable property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let unfocusable = repeatbutton.unfocusable;

valuestring

Sets a new value for the widget or retrieves its current value, allowing for both updating and accessing the widget's data.

Default value

""""

Example

Set the value property. 

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

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

 const repeatbutton = document.querySelector('smart-repeat-button');
 repeatbutton.value = 'New Value';

Get the value property. 

 const repeatbutton = document.querySelector('smart-repeat-button');
 let value = repeatbutton.value;

Events

clickCustomEvent

This event is triggered each time the user clicks on the specified element. It occurs after a complete click action, which includes both the pressing and releasing of the mouse button (typically the left button) over the element. The event provides access to click-related information, such as the mouse position and any modifier keys pressed during the click.

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

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 click event. 

const repeatbutton = document.querySelector('smart-repeat-button');
repeatbutton.addEventListener('click', function (event) {
	// event handling code goes here.
})