ColorPicker JAVASCRIPT UI Component API

ColorPicker Javascript API

Class

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

Events

Methods

Properties

animation"none" | "simple" | "advanced"

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

Default value

"advanced"

Example

Set the animation property.

 <smart-color-picker animation='none'></smart-color-picker>

Set the animation property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.animation = 'simple';

Get the animation property.

 const colorpicker = document.querySelector('smart-color-picker');
 let animation = colorpicker.animation;

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 value

false

Example

Set the editable property.

 <smart-color-picker editable></smart-color-picker>

Set the editable property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.editable = false;

Get the editable property.

 const colorpicker = document.querySelector('smart-color-picker');
 let editable = colorpicker.editable;

autoCloseDelaynumber

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

Default value

100

Example

Set the autoCloseDelay property.

 <smart-color-picker auto-close-delay='50'></smart-color-picker>

Set the autoCloseDelay property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.autoCloseDelay = 200;

Get the autoCloseDelay property.

 const colorpicker = document.querySelector('smart-color-picker');
 let autoCloseDelay = colorpicker.autoCloseDelay;

applyValueMode"instantly" | "useButtons"

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 value

"instantly"

Example

Set the applyValueMode property.

 <smart-color-picker apply-value-mode='useButtons'></smart-color-picker>

Set the applyValueMode property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.applyValueMode = 'instantly';

Get the applyValueMode property.

 const colorpicker = document.querySelector('smart-color-picker');
 let applyValueMode = colorpicker.applyValueMode;

columnCountnumber

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

Default value

8

Example

Set the columnCount property.

 <smart-color-picker column-count='5'></smart-color-picker>

Set the columnCount property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.columnCount = 3;

Get the columnCount property.

 const colorpicker = document.querySelector('smart-color-picker');
 let columnCount = colorpicker.columnCount;

displayMode"default" | "grid" | "palette" | "radial" | "hexagonal" | "spectrumGrid" | "materialGrid"

Determines the colors that will be displayed and their layout.

Default value

"default"

Example

Set the displayMode property.

 <smart-color-picker display-mode='radial'></smart-color-picker>

Set the displayMode property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.displayMode = 'hexagonal';

Get the displayMode property.

 const colorpicker = document.querySelector('smart-color-picker');
 let displayMode = colorpicker.displayMode;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

 <smart-color-picker disabled></smart-color-picker>

Set the disabled property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.disabled = false;

Get the disabled property.

 const colorpicker = document.querySelector('smart-color-picker');
 let disabled = colorpicker.disabled;

disableUndoboolean

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

Default value

false

Example

Set the disableUndo property.

 <smart-color-picker disable-undo></smart-color-picker>

Set the disableUndo property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.disableUndo = false;

Get the disableUndo property.

 const colorpicker = document.querySelector('smart-color-picker');
 let disableUndo = colorpicker.disableUndo;

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 value

body

Example

Set the dropDownAppendTo property.

 <smart-color-picker drop-down-append-to='null'></smart-color-picker>

Set the dropDownAppendTo property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.dropDownAppendTo = "body";

Get the dropDownAppendTo property.

 const colorpicker = document.querySelector('smart-color-picker');
 let dropDownAppendTo = colorpicker.dropDownAppendTo;

dropDownOpenMode"none" | "default" | "dropDownButton" | "auto"

Determines how the drop down is going to open.

Default value

"default"

Example

Set the dropDownOpenMode property.

 <smart-color-picker drop-down-open-mode='dropDownButton'></smart-color-picker>

Set the dropDownOpenMode property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.dropDownOpenMode = 'auto';

Get the dropDownOpenMode property.

 const colorpicker = document.querySelector('smart-color-picker');
 let dropDownOpenMode = colorpicker.dropDownOpenMode;

dropDownButtonPosition"left" | "right" | "top" | "bottom"

Determines the position of the drop down button.

Default value

"right"

Example

Set the dropDownButtonPosition property.

 <smart-color-picker drop-down-button-position='left'></smart-color-picker>

Set the dropDownButtonPosition property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.dropDownButtonPosition = null;

Get the dropDownButtonPosition property.

 const colorpicker = document.querySelector('smart-color-picker');
 let dropDownButtonPosition = colorpicker.dropDownButtonPosition;

dropDownPosition"auto" | "top" | "bottom" | "overlay-top" | "overlay-center" | "overlay-bottom" | "center-bottom" | "center-top"

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

Default value

"auto"

Example

Set the dropDownPosition property.

 <smart-color-picker drop-down-position='top'></smart-color-picker>

Set the dropDownPosition property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.dropDownPosition = 'bottom';

Get the dropDownPosition property.

 const colorpicker = document.querySelector('smart-color-picker');
 let dropDownPosition = colorpicker.dropDownPosition;

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"

Example

Set the dropDownHeight property.

 <smart-color-picker drop-down-height='300'></smart-color-picker>

Set the dropDownHeight property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.dropDownHeight = '500';

Get the dropDownHeight property.

 const colorpicker = document.querySelector('smart-color-picker');
 let dropDownHeight = colorpicker.dropDownHeight;

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 value

false

Example

Set the dropDownOverlay property.

 <smart-color-picker drop-down-overlay></smart-color-picker>

Set the dropDownOverlay property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.dropDownOverlay = false;

Get the dropDownOverlay property.

 const colorpicker = document.querySelector('smart-color-picker');
 let dropDownOverlay = colorpicker.dropDownOverlay;

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"

Example

Set the dropDownWidth property.

 <smart-color-picker drop-down-width='300'></smart-color-picker>

Set the dropDownWidth property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.dropDownWidth = '500';

Get the dropDownWidth property.

 const colorpicker = document.querySelector('smart-color-picker');
 let dropDownWidth = colorpicker.dropDownWidth;

editAlphaChannelboolean

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

Default value

false

Example

Set the editAlphaChannel property.

 <smart-color-picker edit-alpha-channel></smart-color-picker>

Set the editAlphaChannel property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.editAlphaChannel = false;

Get the editAlphaChannel property.

 const colorpicker = document.querySelector('smart-color-picker');
 let editAlphaChannel = colorpicker.editAlphaChannel;

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 value

false

Example

Set the enableCustomColors property.

 <smart-color-picker enable-custom-colors></smart-color-picker>

Set the enableCustomColors property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.enableCustomColors = false;

Get the enableCustomColors property.

 const colorpicker = document.querySelector('smart-color-picker');
 let enableCustomColors = colorpicker.enableCustomColors;

gridThemeColorsstring[] | null

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

Example

Set the gridThemeColors property.

 <smart-color-picker grid-theme-colors='['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe']'></smart-color-picker>

Set the gridThemeColors property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.gridThemeColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridThemeColors property.

 const colorpicker = document.querySelector('smart-color-picker');
 let gridThemeColors = colorpicker.gridThemeColors;

gridShadeColorsstring[] | null

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

Example

Set the gridShadeColors property.

 <smart-color-picker grid-shade-colors='['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe']'></smart-color-picker>

Set the gridShadeColors property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.gridShadeColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridShadeColors property.

 const colorpicker = document.querySelector('smart-color-picker');
 let gridShadeColors = colorpicker.gridShadeColors;

gridStandardColorsstring[] | null

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

Example

Set the gridStandardColors property.

 <smart-color-picker grid-standard-colors='['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe']'></smart-color-picker>

Set the gridStandardColors property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.gridStandardColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridStandardColors property.

 const colorpicker = document.querySelector('smart-color-picker');
 let gridStandardColors = colorpicker.gridStandardColors;

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 value

false

Example

Set the hideAlphaEditor property.

 <smart-color-picker hide-alpha-editor></smart-color-picker>

Set the hideAlphaEditor property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.hideAlphaEditor = false;

Get the hideAlphaEditor property.

 const colorpicker = document.querySelector('smart-color-picker');
 let hideAlphaEditor = colorpicker.hideAlphaEditor;

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.

Example

Set the hideContentToFit property.

 <smart-color-picker hide-content-to-fit='[ 'HEX', 'RGB', 'alpha', 'previewContainer' ]'></smart-color-picker>

Set the hideContentToFit property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.hideContentToFit = [ 'RGB', 'HEX', 'previewContainer', 'alpha' ];

Get the hideContentToFit property.

 const colorpicker = document.querySelector('smart-color-picker');
 let hideContentToFit = colorpicker.hideContentToFit;

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 value

false

Example

Set the hideHEXEditor property.

 <smart-color-picker hide-h-e-x-editor></smart-color-picker>

Set the hideHEXEditor property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.hideHEXEditor = false;

Get the hideHEXEditor property.

 const colorpicker = document.querySelector('smart-color-picker');
 let hideHEXEditor = colorpicker.hideHEXEditor;

hidePreviewContainerboolean

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

Default value

false

Example

Set the hidePreviewContainer property.

 <smart-color-picker hide-preview-container></smart-color-picker>

Set the hidePreviewContainer property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.hidePreviewContainer = false;

Get the hidePreviewContainer property.

 const colorpicker = document.querySelector('smart-color-picker');
 let hidePreviewContainer = colorpicker.hidePreviewContainer;

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 value

false

Example

Set the hideRGBEditor property.

 <smart-color-picker hide-r-g-b-editor></smart-color-picker>

Set the hideRGBEditor property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.hideRGBEditor = false;

Get the hideRGBEditor property.

 const colorpicker = document.querySelector('smart-color-picker');
 let hideRGBEditor = colorpicker.hideRGBEditor;

hintstring

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

Default value

""

Example

Set the hint property.

 <smart-color-picker hint='Helper text'></smart-color-picker>

Set the hint property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.hint = 'Hint';

Get the hint property.

 const colorpicker = document.querySelector('smart-color-picker');
 let hint = colorpicker.hint;

invertedboolean

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

Default value

false

Example

Set the inverted property.

 <smart-color-picker inverted></smart-color-picker>

Set the inverted property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.inverted = false;

Get the inverted property.

 const colorpicker = document.querySelector('smart-color-picker');
 let inverted = colorpicker.inverted;

labelstring

Sets a label above the element.

Default value

""

Example

Set the label property.

 <smart-color-picker label='Helper text'></smart-color-picker>

Set the label property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.label = 'Hint';

Get the label property.

 const colorpicker = document.querySelector('smart-color-picker');
 let label = colorpicker.label;

localestring

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

Default value

"en"

Example

Set the locale property.

 <smart-color-picker locale='de'></smart-color-picker>

Set the locale property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.locale = 'fr';

Get the locale property.

 const colorpicker = document.querySelector('smart-color-picker');
 let locale = colorpicker.locale;

localizeFormatFunctionfunction | null

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

Example

Set the localizeFormatFunction property.

 <smart-color-picker localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-color-picker>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const colorpicker = document.querySelector('smart-color-picker');
 let localizeFormatFunction = colorpicker.localizeFormatFunction;

messagesobject

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

}

Example

Set the messages property.

 <smart-color-picker messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{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 existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlende Bezugnahme auf {{file}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}.","redPrefix":"R:","greenPrefix":"G:","bluePrefix":"B:","hexPrefix":"#:","alphaPrefix":"Alpha:","ok":"OK","cancel":"STORNIEREN","customColor":"FREIWAEHLBARE FARBE ..."}}'></smart-color-picker>

Set the messages property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.messages = {"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 ..."}};

Get the messages property.

 const colorpicker = document.querySelector('smart-color-picker');
 let messages = colorpicker.messages;

namestring

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

Default value

""

Example

Set the name property.

 <smart-color-picker name='colorPicker1'></smart-color-picker>

Set the name property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.name = 'colorPicker2';

Get the name property.

 const colorpicker = document.querySelector('smart-color-picker');
 let name = colorpicker.name;

openedboolean

Determines whether the popup is opened or closed

Default value

false

Example

Set the opened property.

 <smart-color-picker opened></smart-color-picker>

Set the opened property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.opened = false;

Get the opened property.

 const colorpicker = document.querySelector('smart-color-picker');
 let opened = colorpicker.opened;

palette"default" | "gray" | "red" | "green" | "blue" | "custom"

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

Default value

"default"

Example

Set the palette property.

 <smart-color-picker palette='gray'></smart-color-picker>

Set the palette property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.palette = 'red';

Get the palette property.

 const colorpicker = document.querySelector('smart-color-picker');
 let palette = colorpicker.palette;

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

Example

Set the paletteColors property.

 <smart-color-picker palette-colors='[{ "name": "red", "value": "#e6194b" }, { "name": "green", "value": "#3cb44b" }, { "name": "yellow", "value": "#ffe119" }]'></smart-color-picker>

Set the paletteColors property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.paletteColors = ["#e6194b", "#3cb44b", "#3cb44b"];

Get the paletteColors property.

 const colorpicker = document.querySelector('smart-color-picker');
 let paletteColors = colorpicker.paletteColors;

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.

Example

Set the paletteCustomColors property.

 <smart-color-picker palette-custom-colors='["#e6194b" , "#3cb44b" , "#ffe119"]'></smart-color-picker>

Set the paletteCustomColors property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.paletteCustomColors = ["#808080", "#ffd8b1", "#aaffc3"];

Get the paletteCustomColors property.

 const colorpicker = document.querySelector('smart-color-picker');
 let paletteCustomColors = colorpicker.paletteCustomColors;

placeholderstring

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

Default value

""

Example

Set the placeholder property.

 <smart-color-picker placeholder='Placeholder'></smart-color-picker>

Set the placeholder property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.placeholder = 'Pick a color';

Get the placeholder property.

 const colorpicker = document.querySelector('smart-color-picker');
 let placeholder = colorpicker.placeholder;

readonlyboolean

Disables user interaction with the element.

Default value

false

Example

Set the readonly property.

 <smart-color-picker readonly></smart-color-picker>

Set the readonly property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.readonly = false;

Get the readonly property.

 const colorpicker = document.querySelector('smart-color-picker');
 let readonly = colorpicker.readonly;

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 value

false

Example

Set the resizeIndicator property.

 <smart-color-picker resize-indicator></smart-color-picker>

Set the resizeIndicator property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.resizeIndicator = false;

Get the resizeIndicator property.

 const colorpicker = document.querySelector('smart-color-picker');
 let resizeIndicator = colorpicker.resizeIndicator;

resizeMode"none" | "horizontal" | "vertical" | "both"

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.

Default value

"null"

Example

Set the resizeMode property.

 <smart-color-picker resize-mode='horizontal'></smart-color-picker>

Set the resizeMode property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.resizeMode = 'vertical';

Get the resizeMode property.

 const colorpicker = document.querySelector('smart-color-picker');
 let resizeMode = colorpicker.resizeMode;

rightToLeftboolean

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

Default value

false

Example

Set the rightToLeft property.

 <smart-color-picker right-to-left></smart-color-picker>

Set the rightToLeft property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.rightToLeft = true;

Get the rightToLeft property.

 const colorpicker = document.querySelector('smart-color-picker');
 let rightToLeft = colorpicker.rightToLeft;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property.

 <smart-color-picker theme='blue'></smart-color-picker>

Set the theme property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.theme = 'red';

Get the theme property.

 const colorpicker = document.querySelector('smart-color-picker');
 let theme = colorpicker.theme;

tooltipDisplayMode"none" | "rgb" | "rgba" | "hex"

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

Default value

"hex"

Example

Set the tooltipDisplayMode property.

 <smart-color-picker tooltip-display-mode='rgb'></smart-color-picker>

Set the tooltipDisplayMode property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.tooltipDisplayMode = 'hex';

Get the tooltipDisplayMode property.

 const colorpicker = document.querySelector('smart-color-picker');
 let tooltipDisplayMode = colorpicker.tooltipDisplayMode;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property.

 <smart-color-picker unfocusable></smart-color-picker>

Set the unfocusable property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.unfocusable = false;

Get the unfocusable property.

 const colorpicker = document.querySelector('smart-color-picker');
 let unfocusable = colorpicker.unfocusable;

valuestring

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

Default value

"null"

Example

Set the value property.

 <smart-color-picker value='#ff2600'></smart-color-picker>

Set the value property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.value = 'rgba(166, 255, 0, 1)';

Get the value property.

 const colorpicker = document.querySelector('smart-color-picker');
 let value = colorpicker.value;

valueFormat"default" | "rgb" | "rgba" | "hex"

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 value

"default"

Example

Set the valueFormat property.

 <smart-color-picker value-format='rgba'></smart-color-picker>

Set the valueFormat property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.valueFormat = 'rgb';

Get the valueFormat property.

 const colorpicker = document.querySelector('smart-color-picker');
 let valueFormat = colorpicker.valueFormat;

valueDisplayMode"default" | "colorBox" | "colorCode" | "none"

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

Default value

"default"

Example

Set the valueDisplayMode property.

 <smart-color-picker value-display-mode='colorBox'></smart-color-picker>

Set the valueDisplayMode property by using the HTML Element's instance.

 const colorpicker = document.querySelector('smart-color-picker');
 colorpicker.valueDisplayMode = 'colorCode';

Get the valueDisplayMode property.

 const colorpicker = document.querySelector('smart-color-picker');
 let valueDisplayMode = colorpicker.valueDisplayMode;

Events

actionButtonClickCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onActionButtonClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of actionButtonClick event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('actionButtonClick', function (event) {
	// event handling code goes here.
})

cancelButtonClickCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCancelButtonClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of cancelButtonClick event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('cancelButtonClick', function (event) {
	// event handling code goes here.
})

changeCustomEvent

This event is triggered when the color value is changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The previously selected color.
ev.detail.value - The new selected color.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

closeCustomEvent

This event is triggered when the drop down is closed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onClose

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

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.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onClosing

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of closing event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('closing', function (event) {
	// event handling code goes here.
})

customColorSelectionCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCustomColorSelection

Arguments

evCustomEvent
ev.detailObject
ev.detail.value - A boolean that indicates whether the custom color view is shown or not.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of customColorSelection event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('customColorSelection', function (event) {
    const detail = event.detail,
        value = detail.value;

	// event handling code goes here.
})

dropDownButtonClickCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onDropDownButtonClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dropDownButtonClick event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('dropDownButtonClick', function (event) {
	// event handling code goes here.
})

okButtonClickCustomEvent

This event is triggered when the ok button is clicked.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOkButtonClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of okButtonClick event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('okButtonClick', function (event) {
	// event handling code goes here.
})

openCustomEvent

This event is triggered when the drop down is opened.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onOpen

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of open event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

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.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onOpening

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of opening event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('opening', function (event) {
	// event handling code goes here.
})

resizeStartCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onResizeStart

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - An object containing the current left and top positions of the drop down.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeStart event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('resizeStart', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

resizeEndCustomEvent

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

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onResizeEnd

Arguments

evCustomEvent
ev.detailObject
ev.detail.position - An object containing the current left and top positions of the drop down.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of resizeEnd event.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.addEventListener('resizeEnd', function (event) {
    const detail = event.detail,
        position = detail.position;

	// event handling code goes here.
})

Methods

open(): void

Opens the drop down of the color picker.


Invoke the open method.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.open();

close(): void

Closes the drop down of the color picker.


Invoke the close method.

const colorpicker = document.querySelector('smart-color-picker');
colorpicker.close();

CSS Variables

--smart-color-picker-default-widthvar()

Default value

"var(--smart-editor-width)"

smartColorPicker default width

--smart-color-picker-default-heightvar()

Default value

"var(--smart-editor-height)"

smartColorPicker default height

--smart-color-picker-drop-down-widthvar()

Default value

"auto"

smartColorPicker default width

--smart-color-picker-drop-down-heightvar()

Default value

"auto"

smartColorPicker default height