ColorPicker Typescript API

Interface

ColorPicker

ColorPicker is an advanced color picking component with Pallete, Spectrum Grid, Radial Palette and Excel-like options. Users can input colors either by a dropdown or input field.

Selector

smart-color-picker

Properties

animationAnimation

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

Default valueadvanced

editableboolean

This property allows editting of colors via the input inside the element's action section. Accepts values in all supported types. This property works when 'valueDisplayMode' is set to default or colorCode.

Default valuefalse

autoCloseDelaynumber

Determines the delay before the opened drop down closes when dropDownOpenMode is set to 'auto'.

Default value100

applyValueModeColorApplyValueMode

Specifies how the user applies the selected value. In 'instantly' mode the value is applied immediately when color is selected. In 'useButtons' mode are shown 'Ok' and 'Cancel' buttons at the botom of the colorpicker's drop down. Only click on 'OK' button applies the value.

Default valueinstantly

columnCountnumber

Defines the number of columns for the colors in displayModes 'grid', 'hexagonal' and 'spectrumGrid'.

Default value8

displayModeColorDisplayMode

Determines the colors that will be displayed and their layout.

Default valuedefault

disabledboolean

Enables or disables the element.

Default valuefalse

disableUndoboolean

By default clicking on color panel's preview container returns the color value to it's previous state. 'disableUndo' prevents this functionality.

Default valuefalse

dropDownAppendToany

Sets the parent container of the dropDown (the popup). Used when a CSS property of unknowned parent is interfering with the visibility of the dropDown.

Default valuebody

dropDownOpenModeDropDownOpenMode

Determines how the drop down is going to open.

Default valuedefault

dropDownButtonPositionDropDownButtonPosition

Determines the position of the drop down button.

Default valueright

dropDownPositionDropDownPosition

Determines the vertical position of the dropDown. 'Auto' means its automatically determined depending on the viewport size.

Default valueauto

dropDownHeightstring

Sets the height of the drop down. Default value of null means that CSS variables are used. This property should be used when the browser doesn not support CSS variables.

Default value"auto

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.

Default valuefalse

dropDownWidthstring

Sets the width of the drop down. Default value of null means that CSS variables are used. This property should be used when the browser doesn't support CSS variables.

Default value"auto

editAlphaChannelboolean

Allows to edit the alpha(transparency) of the colors via an editor/slider in the following displayModes: 'palette', 'radial', 'hexagonal'

Default valuefalse

enableCustomColorsboolean

Allows to select a custom color via an editor popup. Custom color selection is available in modes that don't have this option by default, like: 'grid', 'default, 'spectrum grid'.

Default valuefalse

gridThemeColorsstring[] | null

Defines an Array of colors that will be used as the Theme Colors in the corresponding section of displayMode: 'grid' and 'default'.

gridShadeColorsstring[] | null

Defines an Array of colors that will be used as the Shade Colors in the corresponding section of displayMode: 'grid' and 'default'.

gridStandardColorsstring[] | null

Defines an Array of colors that will be used as the Standart Colors in the corresponding section of displayMode: 'grid' and 'default'.

hideAlphaEditorboolean

Hides the alpha editor. Alpha editor is an input containing the value of the current color opacity. The input is available in the following modes: 'radial', 'palette', 'hexagonal'. The input is only visible if there's enough space. This editor is visible by default.

Default valuefalse

hideContentToFitstring[]

Determines which color editors will be hidden first when there's not enough space for all of them to be visible. By default the editors are only visible in 'palette', 'radial' and 'hexagonal' display modes. This property allows to prioritize the visibility of the editors.

hideHEXEditorboolean

HEX editor is an input containing the hexadecimal representation of a color. This editor is visible by default. Setting 'hideRGBeditor' to true hides it.

Default valuefalse

hidePreviewContainerboolean

Hides the preview container. Preview container is used to show the currently selected value in 'palette', 'radial' and 'hexagonal' display modes.

Default valuefalse

hideRGBEditorboolean

Hides the RGB editor. This editor is a group of three separate inputs for the Red, Green and Blue values of the color.

Default valuefalse

hintstring

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

Default value"

invertedboolean

Inverts the colors in 'spectrumGrid', 'hexagonal', 'radial' modes.

Default valuefalse

labelstring

Sets a label above the element.

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.

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}}'!",

"methodInvalidValueType": "Invalid '{{name}}' method argument value type! Actual type: '{{actualType}}', Expected type: '{{type}}' for argument with index: '{{argumentIndex}}'!",

"methodInvalidArgumentsCount": "Invalid '{{name}}' method arguments count! Actual arguments count: '{{actualArgumentsCount}}', Expected at least: '{{argumentsCount}}' argument(s)!",

"methodInvalidReturnType": "Invalid '{{name}}' method return 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}}: Web 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}}.",

"redPrefix": "R:",

"greenPrefix": "G:",

"bluePrefix": "B:",

"hexPrefix": "#:",

"alphaPrefix": "Alpha:",

"ok": "OK",

"cancel": "CANCEL",

"customColor": "CUSTOM COLOR ..."

}

namestring

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

Default value"

openedboolean

Determines whether the popup is opened or closed

Default valuefalse

paletteColorPalette

Determines what colors will be displayed in 'spectrumGrid', 'grid' and 'hexagonal' displayModes.

Default valuedefault

paletteColors{name: string, value: string}[] | string[] | null

Defines an array of colors that form a custom palette. This palette can be used in displayModes 'grid' and 'spectrum grid' if the palette property is set to custom. The value of the property can be an array of strings or objects that contain valid colors ( HEX, RGBA, etc).

paletteCustomColorsstring[] | null

Defines an array of colors that represent a predefined list of custom colors. This palette can be used in displayModes 'grid', 'default' and 'spectrum grid'. Custom colors are displayed at the bottom of the color grid below the button for custom color selection. They are only visible if enableCustomColor property is true.

placeholderstring

The placeholder is shown when the value is not set yet or is set to null.

Default value"

readonlyboolean

Disables user interaction with the element.

Default valuefalse

resizeIndicatorboolean

Determines whether the resize indicator in the bottom right corner of the drop down is visible or not. This property is used in conjunction with resizeMode.

Default valuefalse

resizeModeResizeMode

Determines whether the dropDown can be resized or not. When resizing is enabled, a resize bar appears on the top/bottom side of the drop down.

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. Theme defines the look of the element

Default value"

tooltipDisplayModeColorTooltipDisplayMode

Determines how the tooltip displays the value of the color that is being hovered.

Default valuehex

unfocusableboolean

If is set to true, the element cannot be focused.

Default valuefalse

valuestring

Represents the value of the selected color as the value of the element.

Default value"null

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

valueDisplayModeColorValueDisplayMode

Determines which elements will be displayed in color picker's action section.

Default valuedefault

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

This event is triggered when user clicks on the action button. 'Ok' button is visible only when applyValueMode is set to useButtons.

Arguments

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

This event is triggered when the cancel button is clicked. 'Cancel' button is visible only when applyValueMode is set to useButtons.

Arguments

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

This event is triggered when the color value is changed.

Arguments

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

This event is triggered when the drop down is closed.

Arguments

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

This event is triggered when the drop down is about to be closed. This event allows to cancel the closing operation calling event.preventDefault() in the event handler function.

Arguments

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

This event is triggered when the custom color selection view is opened/closed. Custom color selection view is available when enableCustomColors property is true.

Arguments

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

This event is triggered when user clicks on the drop down button.

Arguments

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

This event is triggered when the ok button is clicked.

Arguments

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

This event is triggered when the drop down is opened.

Arguments

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

This event is triggered when the drop down is about to be opened. This event allows to cancel the opening operation calling event.preventDefault() in the event handler function.

Arguments

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

This event is triggered when user starts resizing the drop down.

Arguments

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

This event is triggered when the resizing of the drop down is finished.

Arguments

Methods

open(): void

Opens the drop down of the color picker.

close(): void

Closes the drop down of the color picker.

Enums