PasswordTextBox Typescript API

Interface

PasswordTextBox

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

Selector

smart-password-text-box

Properties

animationAnimation

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

Default valueadvanced

autoFocusboolean

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

Default valuefalse

disabledboolean

Enables or disables the element.

Default valuefalse

enterKeyBehaviorEnterKeyBehavior

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

Default valuesubmit

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"

hintany

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

labelstring

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

Default value"

localestring

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

Default value"en

localizeFormatFunctionany

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

maxLengthnumber

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

messagesany

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"

}


minLengthnumber

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

Default value2

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value"

passwordStrengthany

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'.

placeholderstring

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

Default value"

requiredboolean

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

Default valuefalse

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default valuefalse

selectAllOnFocusboolean

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

Default valuefalse

showPasswordIconboolean

Determines whether the password icon is visible.

Default valuefalse

showPasswordStrengthboolean

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

Default valuefalse

themestring

Determines the theme. Theme defines the look of the element

Default value"

tooltipArrowboolean

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

Default valuefalse

tooltipDelaynumber

Determines the delay before the tooltip appears in miliseconds.

Default value0

tooltipPositionPasswordTextBoxTooltipPosition

Determines the position of the tooltip.

Default valuetop

tooltipTemplatestring

Sets a custom template for the content of the tooltip.

Default value"null

unfocusableboolean

If true, the element cannot be focused.

Default valuefalse

valuestring

Sets or gets the value of the element.

Default value"

onchange((this: Window, ev: Event) => any) | null

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

Arguments

evEvent
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

focus(): void

Focuses the element.


reset(): void

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



Enums

Animation

None Simple Advanced

EnterKeyBehavior

ClearOnSubmit Submit

PasswordTextBoxTooltipPosition

Absolute Bottom Top Left Right