ColorInput
ColorInput is an input field with colors displayed in a DropDown grid like in Excel.
Selector
smart-color-input
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
autoCompleteDelaynumber
Determines the delay before the drop down opens to show the matches from the auto complete operation. The delay is measured in miliseconds.
Default value100
dataSourceany
Determines the data source ( that represent valid colors ) that will be loaded to the Input. The dataSource can be an array of strings 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
displayModeColorDisplayMode
Determines the colors that will be displayed and their layout.
Default valuedefault
dropDownButtonPositionDropDownButtonPosition
Determines the position of the drop down button.
Default valuenone
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
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
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
itemsnumber
Determines the maximum number of matched items that should be visible inside the drop down as a result of a new autoComplete query. By default the maximum number of 8 items can be displayed inside the drop down.
Default value8
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.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
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}}."
}
minLengthnumber
Determines the minimum number of characters inside the input in order to trigger the autocomplete functionality that will open the drop down and show the matched items.
Default value1
namestring
Sets or gets the name attribute for the element. Name is used when submiting data inside an HTML form.
Default value"
openedboolean
Determines whether the drop down is opened or not.
Default valuefalse
placeholderstring
Determines the placeholder of the input.
Default value"
querystring | number
Sets or gets the query that is used to filter the items. Query is used by the autoComplete operation. Empty string means that all items from the data source will be displayed and no filter query is applied.
Default value
queryModeColorQueryMode
Determines the auto complete query mode. This property also determines the matching algorithm for the autocomplete operation.
Default valuecontainsIgnoreCase
readonlyboolean
Determines whether the user can enter text inside the input or not. Determines whether the element acts as a ComboBox or a DropDownList if a dataSource is provided.
Default valuefalse
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
themestring
Determines the theme for the element. Themes define the look of the elements.
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"
valueDisplayModeColorValueDisplayMode
Determines what will be displayed inside the color picker's action section.
Default valuedefault
valueFormatColorValueFormat
Determines the format of the color. Whether it's in HEX, RGB or RGBA. By default it shows the color depending on the displayMode.
Default valuedefault
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the selection is changed.
Arguments
evEvent
ev.detailObject
ev.detail.label - The label of the new selected color.
ev.detail.oldLabel - The label of the color that was previously selected before the event was triggered.
ev.detail.oldValue - The value of the color that was previously selected before the event was triggered.
ev.detail.value - The value of the new selected color.
Methods
close(): void
Closes the drop down.
open(): void
Opens the drop down.
select(): void
Selects the text inside the input or if it is readonly then the element is focused.