PasswordTextBox JAVASCRIPT UI Component API

PasswordTextBox Javascript API

Class

PasswordTextBox

PasswordTextBox lets the user enter a password with the text hidden.

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-password-text-box animation='none'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.animation = 'simple';

Get the animation property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let animation = passwordtextbox.animation;

autoFocusboolean

Specifies that the element should be focused when the page is loaded.

Default value

false

Example

Set the autoFocus property.

 <smart-password-text-box auto-focus></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.autoFocus = false;

Get the autoFocus property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let autoFocus = passwordtextbox.autoFocus;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

 <smart-password-text-box disabled></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.disabled = false;

Get the disabled property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let disabled = passwordtextbox.disabled;

enterKeyBehavior"clearOnSubmit" | "submit"

Specifies the behavior on "Enter" key press. Default mode is "submit".

Allowed Values

"clearOnSubmit" - Clears the value of the input on Submit.
"submit" - Submits the value of the input but doesn't clear it.

Default value

"submit"

Example

Set the enterKeyBehavior property.

 <smart-password-text-box enter-key-behavior='newLine'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.enterKeyBehavior = 'submit';

Get the enterKeyBehavior property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let enterKeyBehavior = passwordtextbox.enterKeyBehavior;

formstring

The form that the element is associated with (its "form owner"). The value of the attribute must be the ID of a form element in the same document.

Default value

Example

Set the form property.

 <smart-password-text-box form='form1'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.form = 'form2';

Get the form property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let form = passwordtextbox.form;

hintany

Sets additional helper text below the element. Appears only when the element is focused.

Example

Set the hint property.

 <smart-password-text-box hint='Helper text'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.hint = Hint;

Get the hint property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let hint = passwordtextbox.hint;

labelstring

Sets label above the element. The label is displayed above the input and it's always visible.

Default value

Example

Set the label property.

 <smart-password-text-box label='Helper text'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.label = 'Hint';

Get the label property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let label = passwordtextbox.label;

localestring

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

Default value

"en"

Example

Set the locale property.

 <smart-password-text-box locale='de'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.locale = 'fr';

Get the locale property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let locale = passwordtextbox.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-password-text-box localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let localizeFormatFunction = passwordtextbox.localizeFormatFunction;

maxLengthnumber

Sets or gets the maximum number of characters that the user can enter.

Example

Set the maxLength property.

 <smart-password-text-box max-length='120'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.maxLength = 150;

Get the maxLength property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let maxLength = passwordtextbox.maxLength;

messagesobject

Sets an object with string values, related to the different states of passwords strength.

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.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}.",

"passwordStrength": "Password strength",

"short": "Short",

"weak": "Weak",

"far": "Far",

"good": "Good",

"strong": "Strong",

"showPassword": "Show password"

}

Try a demo showcasing the messages property.

Example

Set the messages property.

 <smart-password-text-box 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.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}.","passwordStrength":"Passwortstaerke","short":"kurz","weak":"schwach","far":"weit","good":"gut","strong":"stark","showPassword":"Passwort anzeigen"}}'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.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.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}.","passwordStrength":"Password strength","short":"Short","weak":"Weak","far":"Far","good":"Good","strong":"Strong","showPassword":"Show password"}};

Get the messages property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let messages = passwordtextbox.messages;

minLengthnumber

Sets or gets the minimum number of characters that the user can enter.

Default value

Example

Set the minLength property.

 <smart-password-text-box min-length='20'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.minLength = 50;

Get the minLength property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let minLength = passwordtextbox.minLength;

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-password-text-box name='TextArea'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.name = 'textarea';

Get the name property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let name = passwordtextbox.name;

passwordStrengthfunction | null

With this property the user can set a custom callback function that determines the password strength. The returned string from the function determines the how strong the current password is. The string should be one of the following: 'short', 'weak', 'far', 'good', 'strong'.

Try a demo showcasing the passwordStrength property.

Example

Set the passwordStrength property.

 <smart-password-text-box password-strength='function (password, allowedSymbols) { return 'weak'; }'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.passwordStrength = function (password, allowedSymbols) { return 'strong'; };

Get the passwordStrength property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let passwordStrength = passwordtextbox.passwordStrength;

placeholderstring

The placeholder text that is displayed when no value is applied to the element.

Default value

Try a demo showcasing the placeholder property.

Example

Set the placeholder property.

 <smart-password-text-box placeholder='Placeholder'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.placeholder = 'PlaceHolder';

Get the placeholder property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let placeholder = passwordtextbox.placeholder;

requiredboolean

Specifies that the user must fill in a value before submitting a form that contains the element.

Default value

false

Example

Set the required property.

 <smart-password-text-box required></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.required = false;

Get the required property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let required = passwordtextbox.required;

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-password-text-box right-to-left></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.rightToLeft = false;

Get the rightToLeft property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let rightToLeft = passwordtextbox.rightToLeft;

selectAllOnFocusboolean

Specifies whether the content of the input will be selected on focus.

Default value

false

Try a demo showcasing the selectAllOnFocus property.

Example

Set the selectAllOnFocus property.

 <smart-password-text-box select-all-on-focus></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.selectAllOnFocus = false;

Get the selectAllOnFocus property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let selectAllOnFocus = passwordtextbox.selectAllOnFocus;

showPasswordIconboolean

Determines whether the password icon is visible.

Default value

false

Try a demo showcasing the showPasswordIcon property.

Example

Set the showPasswordIcon property.

 <smart-password-text-box show-password-icon></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.showPasswordIcon = false;

Get the showPasswordIcon property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let showPasswordIcon = passwordtextbox.showPasswordIcon;

showPasswordStrengthboolean

Determines whether a tooltip which shows the password's strength will be shown.

Default value

false

Try a demo showcasing the showPasswordStrength property.

Example

Set the showPasswordStrength property.

 <smart-password-text-box show-password-strength></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.showPasswordStrength = false;

Get the showPasswordStrength property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let showPasswordStrength = passwordtextbox.showPasswordStrength;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

 <smart-password-text-box theme='blue'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.theme = 'red';

Get the theme property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let theme = passwordtextbox.theme;

tooltipArrowboolean

Determines whether Tooltip's arrow will be shown or not.

Default value

false

Try a demo showcasing the tooltipArrow property.

Example

Set the tooltipArrow property.

 <smart-password-text-box tooltip-arrow></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.tooltipArrow = false;

Get the tooltipArrow property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let tooltipArrow = passwordtextbox.tooltipArrow;

tooltipDelaynumber

Determines the delay before the tooltip appears in miliseconds.

Default value

Example

Set the tooltipDelay property.

 <smart-password-text-box tooltip-delay='200'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.tooltipDelay = 300;

Get the tooltipDelay property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let tooltipDelay = passwordtextbox.tooltipDelay;

tooltipPosition"absolute" | "bottom" | "top" | "left" | "right"

Determines the position of the tooltip.

Allowed Values

"absolute" - The tooltip is positioned absolutely by the user.
"bottom" - The tooltip is positioned below the input.
"top" - The tooltip is positioned above the input.
"left" - The tooltip is positioned to the left of the input.
"right" - The tooltip is positioned to the right the input.

Default value

"top"

Try a demo showcasing the tooltipPosition property.

Example

Set the tooltipPosition property.

 <smart-password-text-box tooltip-position='left'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.tooltipPosition = 'right';

Get the tooltipPosition property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let tooltipPosition = passwordtextbox.tooltipPosition;

tooltipTemplatestring

Sets a custom template for the content of the tooltip.

Default value

"null"

Try a demo showcasing the tooltipTemplate property.

Example

Set the tooltipTemplate property.

 <smart-password-text-box tooltip-template='templateId1'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.tooltipTemplate = 'templateId2';

Get the tooltipTemplate property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let tooltipTemplate = passwordtextbox.tooltipTemplate;

unfocusableboolean

If true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-password-text-box unfocusable></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.unfocusable = false;

Get the unfocusable property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let unfocusable = passwordtextbox.unfocusable;

valuestring

Sets or gets the value of the element.

Default value

Example

Set the value property.

 <smart-password-text-box value='Demo value.'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');

 passwordtextbox.value = 'New demo value.';

Get the value property.

 const passwordtextbox = document.querySelector('smart-password-text-box');

 let value = passwordtextbox.value;

Events

changeCustomEvent

This event is triggered when the value of the element is changed.

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.

Try a demo showcasing the change event.

Example

Set up the event handler of change event.

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

	// event handling code goes here.
})

changingCustomEvent

This event is triggered on each key up event of the TextBox, if the value is changed.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onChanging

Arguments

evCustomEvent

ev.detailObject

ev.detail.oldValue - The previous value before it was changed.

ev.detail.value - The new value.

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

const passwordtextbox = document.querySelector('smart-password-text-box');
passwordtextbox.addEventListener('changing', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

focus(): void

Focuses the element.

Invoke the focus method.

const passwordtextbox = document.querySelector('smart-password-text-box');
passwordtextbox.focus();

reset(): void

The method is used to reset input to it's initial value.

Invoke the reset method.

const passwordtextbox = document.querySelector('smart-password-text-box');
passwordtextbox.reset();

CSS Variables

--smart-password-text-box-default-widthvar()

Default value

"var(--smart-editor-width)"

smartPasswordTextBox default width

--smart-password-text-box-default-heightvar()

Default value

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

smartPasswordTextBox default height