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.