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.

Properties

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

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

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

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;

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

Try a demo showcasing the editable property.

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.

Allowed Values

"instantly" - The value is applied immediately when a color is selected
"useButtons" - Two buttons are shown below the color selection area: 'Ok' and 'Cancel' buttons. Clicking on the 'OK' button applies the new value. Clicking on 'Cancel' cancels the current selection and and resets to previous.

Default value

"instantly"

Try a demo showcasing the applyValueMode property.

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

Try a demo showcasing the columnCount property.

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.

Allowed Values

"default" - Represents a grid of all standart colors that are most frequently used.
"grid" - Represents a predefined grid of colors or a custom grid of colors. The palette property determines the colors that will be loaded in the grid. If palette mode is set to custom it is possible to completely customize the colors of the grid via the paletteColors property.
"palette" - Represents a classic palette view if colors that allows to select a specific color. Additionaly input fields are available to enter the RGBA values if necessary.
"radial" - Similar to 'palette' mode but has a radial palette. In this mode the colors vary from the center to the edges.
"hexagonal" - A hexagon is used to display the colors.
"spectrumGrid" - Similar to 'grid' mode the spectrum of the colors determined by the palette property will be displayed. Palette mode custom allows to define a number of custom colors equal to the columnCount property that will be dispalyed below the grid. The custom colors are defined via the paletteColors property.
"materialGrid" - A non-customizable grid of colors that offers a complete list of all material colors along with their names.

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;

dropDownAppendTostring

Sets the parent container of the dropDown (the popup). The expected value is CSS Selector, ID or 'body'. Used when a CSS property of unknowned parent is interfering with the visibility of the dropDown. Example: 'body'.

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.

Allowed Values

"none" - The drop down can't be opened.
"default" - The drop down opens when the user clicks on the element
"dropDownButton" - The element is split in two button: action and drop down buttons. The drop down opens only when the button is clicked. The action button fires a custom event when clicked on. The event can be used to execute a custom operation on click.
"auto" - The drop down opens when the element is hovered and closed when not.

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.

Allowed Values

"left" - Positions the drop down button on the left side of the element.
"right" - Positions the drop down button on the right side of the element.
"top" - Positions the drop down button on the top side of the element.
"bottom" - Positions the drop down button on the bottom side of the element.

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.

Allowed Values

"auto" - The position is automatically determines by measuring the available distance around the element for the drop down to open freely without being clipped by the edges of the browser. By default the drop down will try to open below the element. If the available space is not enough for the popup to appear it will open in one of the following directions, if possible: top, over.
"top" - The drop down opens above the element.
"bottom" - The drop down opens under the element.
"overlay-top" - The drop down opens above and over the element. The bottom edges of the drop down cover the element.
"overlay-center" - The drop down opens at the center, over the element.
"overlay-bottom" - The drop down opens under and over the element. The top edges of the drop down cover the element.
"center-bottom" - The drop down opens at the center, below the element.
"center-top" - The drop down opens at the center, over the element.

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

Try a demo showcasing the editAlphaChannel property.

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

Try a demo showcasing the enableCustomColors property.

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

Try a demo showcasing the hideAlphaEditor property.

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

Try a demo showcasing the hideHEXEditor property.

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

Try a demo showcasing the hidePreviewContainer property.

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

Try a demo showcasing the hideRGBEditor property.

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.

Allowed Values

"default" - The default colors are displayed inside the element.
"gray" - The spectrum of the gray color is displayed.
"red" - The spectrum of the red color is displayed.
"green" - The spectrum of the green color is displayed.
"blue" - The spectrum of the blue color is displayed.
"custom" - A custom array of colors is displayed inside the element. The array of colors is defined via the paletteColors property. Not applicable to displayMode 'hexagonal'

Default value

"default"

Try a demo showcasing the palette property.

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

Try a demo showcasing the paletteColors property.

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.

Try a demo showcasing the paletteCustomColors property.

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

Try a demo showcasing the placeholder property.

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.

Allowed Values

"none" - Resizing the drop down is not allowed.
"horizontal" - Horizontal resizing of the drop down is allowed but not vertical.
"vertical" - Vertical resizing of the drop down is allowed but not horizontal.
"both" - Resizing the drop down is allowed in all directions.

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

Try a demo showcasing the rightToLeft property.

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.

Allowed Values

"none" - The tooltip is never shown.
"rgb" - The tooltip displays the color in RGB format.
"rgba" - The tooltip displays the color in RGBA format ( includes the opacity of the color )
"hex" - The tooltip displays the color in HEX format.

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.

Allowed Values

"default" - The value is presented depending on the displayMode.
"rgb" - The value is presented as RGB color.
"rgba" - The value is presented as RGBA color.
"hex" - The value is presented as HEX color.

Default value

"default"

Try a demo showcasing the valueFormat property.

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.

Allowed Values

"default" - The color box and the color code are displayed next to the drop down button.
"colorBox" - Only the color box is visible next to the drop down button.
"colorCode" - Only the color code is dispalyed next to the drop down button.
"none" - Only the drop down button is displayed.

Default value

"default"

Try a demo showcasing the valueDisplayMode property.

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.

Try a demo showcasing the change event.

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

ColorPicker Javascript API

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

Default value

Example

editableboolean

Default value

Example

autoCloseDelaynumber

Default value

Example

applyValueMode"instantly" | "useButtons"

Default value

Example

columnCountnumber

Default value

Example

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

Default value

Example

disabledboolean

Default value

Example

disableUndoboolean

Default value

Example

dropDownAppendTostring

Default value

Example

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

Default value

Example

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

Default value

Example

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

Default value

Example

dropDownHeightstring

Default value

Example

dropDownOverlayboolean

Default value

Example

dropDownWidthstring

Default value

Example

editAlphaChannelboolean

Default value

Example

enableCustomColorsboolean

Default value

Example

gridThemeColorsstring[] | null

Example

gridShadeColorsstring[] | null

Example

gridStandardColorsstring[] | null

Example

hideAlphaEditorboolean

Default value

Example

hideContentToFitstring[]

Example

hideHEXEditorboolean

Default value

Example

hidePreviewContainerboolean

Default value

Example