ColorPanel JAVASCRIPT UI Component API

ColorPanel Javascript API

Class

ColorPanel

ColorPanel is an advanced color chooser with Pallete, Spectrum Grid, Radial Palette and Excel-like options.

Selector

smart-color-panel

Events

Cchange

CcancelButtonClick

CcustomColorSelection

OokButtonClick

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-panel animation='none'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.animation = 'simple';

Get the animation property.

 const colorpanel = document.querySelector('smart-color-panel');

 let animation = colorpanel.animation;

applyValueMode"instantly" | "useButtons"

Specifies how the value is applied.

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-panel apply-value-mode='useButtons'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.applyValueMode = 'instantly';

Get the applyValueMode property.

 const colorpanel = document.querySelector('smart-color-panel');

 let applyValueMode = colorpanel.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-panel column-count='5'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.columnCount = 3;

Get the columnCount property.

 const colorpanel = document.querySelector('smart-color-panel');

 let columnCount = colorpanel.columnCount;

disabledboolean

Enables or disables the element. Disabled elements can not be interacted with.

Default value

false

Example

Set the disabled property.

 <smart-color-panel disabled></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.disabled = false;

Get the disabled property.

 const colorpanel = document.querySelector('smart-color-panel');

 let disabled = colorpanel.disabled;

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-panel display-mode='radial'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.displayMode = 'hexagonal';

Get the displayMode property.

 const colorpanel = document.querySelector('smart-color-panel');

 let displayMode = colorpanel.displayMode;

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-panel disable-undo></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.disableUndo = false;

Get the disableUndo property.

 const colorpanel = document.querySelector('smart-color-panel');

 let disableUndo = colorpanel.disableUndo;

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-panel edit-alpha-channel></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.editAlphaChannel = false;

Get the editAlphaChannel property.

 const colorpanel = document.querySelector('smart-color-panel');

 let editAlphaChannel = colorpanel.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-panel enable-custom-colors></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.enableCustomColors = false;

Get the enableCustomColors property.

 const colorpanel = document.querySelector('smart-color-panel');

 let enableCustomColors = colorpanel.enableCustomColors;

gridThemeColorsstring[] | null

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

Example

Set the gridThemeColors property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.gridThemeColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridThemeColors property.

 const colorpanel = document.querySelector('smart-color-panel');

 let gridThemeColors = colorpanel.gridThemeColors;

gridShadeColorsstring[] | null

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

Example

Set the gridShadeColors property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.gridShadeColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridShadeColors property.

 const colorpanel = document.querySelector('smart-color-panel');

 let gridShadeColors = colorpanel.gridShadeColors;

gridStandardColors[] | null

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

Example

Set the gridStandardColors property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.gridStandardColors = ['#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];

Get the gridStandardColors property.

 const colorpanel = document.querySelector('smart-color-panel');

 let gridStandardColors = colorpanel.gridStandardColors;

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-panel hide-alpha-editor></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.hideAlphaEditor = false;

Get the hideAlphaEditor property.

 const colorpanel = document.querySelector('smart-color-panel');

 let hideAlphaEditor = colorpanel.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-panel hide-content-to-fit='[ 'HEX', 'RGB', 'alpha', 'previewContainer' ]'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.hideContentToFit = [ 'RGB', 'HEX', 'previewContainer', 'alpha' ];

Get the hideContentToFit property.

 const colorpanel = document.querySelector('smart-color-panel');

 let hideContentToFit = colorpanel.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-panel hide-h-e-x-editor></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.hideHEXEditor = false;

Get the hideHEXEditor property.

 const colorpanel = document.querySelector('smart-color-panel');

 let hideHEXEditor = colorpanel.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-panel hide-preview-container></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.hidePreviewContainer = false;

Get the hidePreviewContainer property.

 const colorpanel = document.querySelector('smart-color-panel');

 let hidePreviewContainer = colorpanel.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-panel hide-r-g-b-editor></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.hideRGBEditor = false;

Get the hideRGBEditor property.

 const colorpanel = document.querySelector('smart-color-panel');

 let hideRGBEditor = colorpanel.hideRGBEditor;

invertedboolean

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

Default value

false

Try a demo showcasing the inverted property.

Example

Set the inverted property.

 <smart-color-panel inverted></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.inverted = false;

Get the inverted property.

 const colorpanel = document.querySelector('smart-color-panel');

 let inverted = colorpanel.inverted;

localestring

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

Default value

"en"

Try a demo showcasing the locale property.

Example

Set the locale property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.locale = 'fr';

Get the locale property.

 const colorpanel = document.querySelector('smart-color-panel');

 let locale = colorpanel.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-panel localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const colorpanel = document.querySelector('smart-color-panel');

 let localizeFormatFunction = colorpanel.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-panel 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-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.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 colorpanel = document.querySelector('smart-color-panel');

 let messages = colorpanel.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-panel name='colorPanel1'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.name = 'colorPanel2';

Get the name property.

 const colorpanel = document.querySelector('smart-color-panel');

 let name = colorpanel.name;

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-panel palette='gray'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.palette = 'red';

Get the palette property.

 const colorpanel = document.querySelector('smart-color-panel');

 let palette = colorpanel.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-panel palette-colors='[{ "name": "red", "value": "#e6194b" }, { "name": "green", "value": "#3cb44b" }, { "name": "yellow", "value": "#ffe119" }]'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.paletteColors = ["#e6194b", "#3cb44b", "#3cb44b"];

Get the paletteColors property.

 const colorpanel = document.querySelector('smart-color-panel');

 let paletteColors = colorpanel.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 enableCustomColors property is true.

Try a demo showcasing the paletteCustomColors property.

Example

Set the paletteCustomColors property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.paletteCustomColors = ["#808080", "#ffd8b1", "#aaffc3"];

Get the paletteCustomColors property.

 const colorpanel = document.querySelector('smart-color-panel');

 let paletteCustomColors = colorpanel.paletteCustomColors;

readonlyboolean

If the element is readonly, users cannot interact with it.

Default value

false

Example

Set the readonly property.

 <smart-color-panel readonly></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.readonly = true;

Get the readonly property.

 const colorpanel = document.querySelector('smart-color-panel');

 let readonly = colorpanel.readonly;

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-panel right-to-left></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.rightToLeft = true;

Get the rightToLeft property.

 const colorpanel = document.querySelector('smart-color-panel');

 let rightToLeft = colorpanel.rightToLeft;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.theme = 'red';

Get the theme property.

 const colorpanel = document.querySelector('smart-color-panel');

 let theme = colorpanel.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"

Try a demo showcasing the tooltipDisplayMode property.

Example

Set the tooltipDisplayMode property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.tooltipDisplayMode = 'hex';

Get the tooltipDisplayMode property.

 const colorpanel = document.querySelector('smart-color-panel');

 let tooltipDisplayMode = colorpanel.tooltipDisplayMode;

valuestring

Represents the value of the selected color.

Default value

"null"

Try a demo showcasing the value property.

Example

Set the value property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.value = 'rgba(166, 255, 0, 1)';

Get the value property.

 const colorpanel = document.querySelector('smart-color-panel');

 let value = colorpanel.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"

Example

Set the valueFormat property.

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

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.valueFormat = 'rgb';

Get the valueFormat property.

 const colorpanel = document.querySelector('smart-color-panel');

 let valueFormat = colorpanel.valueFormat;

valueMemberstring

Determines the value member for the color when the paletteColors consists of objects. Usefull in cases where the colors are loaded as objects in an array and the attribute that holds the color key is not named 'value'.

Default value

"null"

Example

Set the valueMember property.

 <smart-color-panel value-member='value'></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.valueMember = 'colorCode';

Get the valueMember property.

 const colorpanel = document.querySelector('smart-color-panel');

 let valueMember = colorpanel.valueMember;

unfocusableboolean

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

Default value

false

Example

Set the unfocusable property.

 <smart-color-panel unfocusable></smart-color-panel>

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

 const colorpanel = document.querySelector('smart-color-panel');

 colorpanel.unfocusable = false;

Get the unfocusable property.

 const colorpanel = document.querySelector('smart-color-panel');

 let unfocusable = colorpanel.unfocusable;

Events

changeCustomEvent

This event is triggered when the color 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 colorpanel = document.querySelector('smart-color-panel');
colorpanel.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// 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 colorpanel = document.querySelector('smart-color-panel');
colorpanel.addEventListener('cancelButtonClick', 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 colorpanel = document.querySelector('smart-color-panel');
colorpanel.addEventListener('customColorSelection', function (event) {
    const detail = event.detail,
        value = detail.value;

	// event handling code goes here.
})

okButtonClickCustomEvent

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

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 colorpanel = document.querySelector('smart-color-panel');
colorpanel.addEventListener('okButtonClick', function (event) {
	// event handling code goes here.
})

Default value

"auto"

smartColorPanel default width

--smart-color-panel-default-heightvar()

Default value

"auto"

smartColorPanel default height

--smart-color-panel-palette-sizevar()

Default value

"300px"

smartColorPanel palette size

--smart-color-panel-grid-mode-item-sizevar()

Default value

"20px"

smartColorPanel item size

--smart-color-panel-grid-mode-column-countvar()

Default value

"8"

smartColorPanel column count

--smart-color-panel-grid-mode-columns-gapvar()

Default value

"1px"

smartColorPanel column gap size

--smart-color-panel-brightnessvar()

Default value

"0"

smartColorPanel brightness

--smart-color-panel-default-mode-sections-gapvar()

Default value

"8px"

smartColorPanel gap size in default mode

--smart-color-panel-palette-widthvar()

Default value

"var(--smart-color-panel-palette-size)"

smartColorPanel palette width

--smart-color-panel-palette-heightvar()

Default value

"var(--smart-color-panel-palette-size)"

smartColorPanel palette height

--smart-color-panel-alpha-channel-colorvar()

Default value

"white"

Used as a default color for the Alpha Scale

ColorPanel Javascript API

Class

ColorPanel

ColorPanel

Selector

Properties

Events

Properties

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

Default value

Example

applyValueMode"instantly" | "useButtons"

Default value

Example

columnCountnumber

Default value

Example

disabledboolean

Default value

Example

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

Default value

Example

disableUndoboolean

Default value

Example

editAlphaChannelboolean

Default value

Example

enableCustomColorsboolean

Default value

Example

gridThemeColorsstring[] | null

Example

gridShadeColorsstring[] | null

Example

gridStandardColors[] | null

Example

hideAlphaEditorboolean

Default value

Example

hideContentToFitstring[]

Example

hideHEXEditorboolean

Default value

Example

hidePreviewContainerboolean

Default value

Example

hideRGBEditorboolean

Default value

Example

invertedboolean

Default value

Example

localestring

Default value

Example

localizeFormatFunctionfunction | null

Example

messagesobject

Default value

Example

namestring

Default value

Example

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

Default value

Example

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

Example

paletteCustomColorsstring[] | null

Example

readonlyboolean

Default value

Example

rightToLeftboolean

Default value