TextBox
TextBox is an input field with auto-suggest options.
Selector
smart-text-box
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
autoFocusboolean
Determines whether the text box will be focused on page load or not.
Default valuefalse
autoCompleteAutoComplete
Determines the autocomplete mode. Auto complete modes filter the items from the dataSource and show only those that match the input.
Default valuemanual
autoCompleteDelaynumber
Determines the delay before the drop down opens to show the matches from the auto complete operation.
Default value100
dataSourceany
Determines the data source that will be loaded to the ComboBox. The dataSource can be an array of strings, numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.
disabledboolean
Enables or disables the element.
Default valuefalse
displayLoadingIndicatorboolean
Determines whether an indicator will appear during filtering and remote item loading.
Default valuefalse
displayMemberstring
Sets or gets the displayMember. The displayMember specifies the name of a property to display. The name is contained in the collection specified by the 'dataSource' property.
Default value"""
displayModeTextBoxDisplayMode
Determines how the characters are displayed inside the input.
Default valuedefault
dropDownAppendToany
Determines the drop down parent. The drop down can be removed from the body of the element and continue to work in another container. This is usefull when one of the parents of the element doesn't allow overflowing, by settings this property to 'body' the drop down will be appended to the DOM and the drop down will open/close as usual. dropDownAppendTo can be a string representing the id of an HTML element on the page or a direct reference to that element. Reseting it back to null will take the drop down back to it's original place.
dropDownHeightstring | number
Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.
Default value
dropDownMaxHeightstring | number
Sets the maximum Height of the drop down. By default it's set to an empty string. In this case the maxHeight of the drop down is controlled by a CSS variable.
Default value
dropDownMaxWidthstring | number
Sets the maximum Width of the drop down. By default it's set to an empty string. In this case the maxWidth of the drop down is controlled by a CSS variable.
Default value
dropDownMinHeightstring | number
Sets the minimum Height of the drop down. By default it's set to an empty string. In this case the minHeight of the drop down is controlled by a CSS variable.
Default value
dropDownMinWidthstring | number
Sets the minimum Width of the drop down. By default it's set to an empty string. In this case the minWidth of the drop down is controlled by a CSS variable.
Default value
dropDownOpenModeDropDownOpenMode
Determines how the drop down is going to open.
Default valuedefault
dropDownOverlayboolean
If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document. The purpose of the overlay is to make sure that clicking anywhere outside the drop down will will target the overlay and not the DOM.
Default valuefalse
dropDownPlaceholderstring
Determines the placeholder for the drop down, displayed when there are no items in it.
Default value"No Items
dropDownPositionDropDownPosition
Determines the position of the drop down when opened.
Default valueauto
dropDownWidthstring | number
Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.
Default value
escKeyModeEscKeyMode
Determines the behavior of the element when Escape key is pressed.
Default valuenone
enterKeyBehaviorEnterKeyBehavior
Specifies the behavior of "Enter" key.
Default valuesubmit
formstring
The form element 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. The hint is visible only when the element is focused.
horizontalScrollBarVisibilityHorizontalScrollBarVisibility
Determines the visibility of the horizontal Scroll bar thats inside the drop down.
Default valueauto
inputMemberstring
Represents the property name of a List item. Determines the value of the input when a ListItem is selected. Usefull in cases where the user wants to display for example the value of an item instead of it's label. By default the label is displayed in the input.
Default value"
inputPurposestring
Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
Default value"off
itemHeightnumber | null
Sets the height for all list items. Used only when virtualization is enabled.
itemMeasureModeListItemMeasureMode
Determines the item width measuring algorithm.
Default valueauto
itemsany
A getter that returns an array of all List items inside the drop down.
Default value
itemTemplateany
The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM. It's used to set a customize the content of the list items.
labelstring
Sets a little text label above the element.
Default value"
loadingIndicatorPlaceholderstring
Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.
Default value"Loading...
loadingIndicatorPositionVerticalAlignment
Determines the position of the loading indicator.
Default valuecenter
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.
minLengthnumber
Sets or gets the minimum number of characters that the user have to enter to trigger the auto complete functionality.
Default value2
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.
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}}."
}
namestring
Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
Default value"
openedboolean
Determines whether the drop down is opened or closed
Default valuefalse
placeholderstring
Determines the input's placeholder.
Default value"
readonlyboolean
Disables user interaction with 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
requiredboolean
Specifies that the user must fill the input before submitting a form with the element.
Default valuefalse
selectAllOnFocusboolean
Determines whether the content of the input will be selected on focus or not.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
valuestring
Sets or gets the value of the element.
Default value"
valueMemberstring
Determines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items.
Default value"""
verticalScrollBarVisibilityVerticalScrollBarVisibility
Determines the visibility of the vertical scroll bar that's inside the drop down.
Default valueauto
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the value of the Text Box is changed.
Arguments
evEvent
ev.detailObject
ev.detail.oldValue - The previous value before it was changed.
ev.detail.value - The new value.
ev.detail.type - The type of the event.
Methods
close(): void
Closes the drop down. The drop down is used only when auto complete is enabled.
open(): void
Opens the drop down. The drop down is used only when auto complete is enabled.
reset(): void
The method is used to reset the input back to it's initial value.
Enums
Animation
None Simple AdvancedAutoComplete
None Auto Inline ManualDropDownOpenMode
None Default AutoDropDownPosition
Auto Top Bottom OverlayTop OverlayCenter OverlayBottom CenterBottom CenterTopEnterKeyBehavior
Submit ClearOnSubmitEscKeyMode
None PreviousValue ClearValueHorizontalScrollBarVisibility
Auto Disabled Hidden VisibleListItemMeasureMode
Auto PreciseTextBoxDisplayMode
Default EscapedVerticalAlignment
Bottom Center TopVerticalScrollBarVisibility
Auto Disabled Hidden VisibleListItem
Defines a list item for ListBox, ComboBox, DropDownList.
Selector
smart-list-item
Properties
alternationIndexnumber
Default value-1
colorstring
Default value"
displayModeListItemDisplayMode
Default valueplain
groupedboolean
Default valuefalse
selectedboolean
Default valuefalse
valuestring
Default value"
labelstring
Default value"
detailsstring
Default value"
groupstring
Default value"
hiddenboolean
Default valuefalse
readonlyboolean
Default valuefalse
ListItemsGroup
Defines a group of list items.
Selector
smart-list-items-group
Properties
labelstring
Default value"