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.

Specifies or retrieves the animation mode for the element. When set to 'none', all animations are disabled and no animation effects will be applied. Assigning other valid values enables different animation behaviors according to the selected mode.

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;

editableboolean

This property enables users to edit colors directly through the input field located within the element's action section. It accepts values in all supported color formats (such as HEX, RGB, or HSL). Please note, this property is effective only when the valueDisplayMode is set to either 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

Specifies the duration (in milliseconds) to wait before automatically closing the dropdown menu after it has been opened, applicable only when dropDownOpenMode is set to 'auto'. This delay allows users sufficient time to interact with the dropdown before it closes automatically.

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"

Defines the method for confirming the user's selected value in the color picker.
- In ''instantly'' mode, the new value is applied immediately whenever the user selects a color, with no further confirmation required.
- In ''useButtons'' mode, 'OK' and 'Cancel' buttons appear at the bottom of the color picker’s dropdown. The color change is only applied when the user clicks the 'OK' button. Clicking 'Cancel' will close the dropdown without applying the selected 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

Specifies how many columns of colors are displayed when using the 'grid', 'hexagonal', or 'spectrumGrid' displayModes. Adjusting this value determines the width of the color palette layout for these modes.

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"

Specifies the color palette to be used, including individual colors and their arrangement within the layout. This setting controls both which colors are displayed and how they appear in the user interface.

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

Controls whether the element is interactive or not. When enabled, the element can be interacted with by the user; when disabled, the element is not interactive and may appear visually distinct (e.g., grayed out) to indicate its inactive state.

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 the color panel's preview container reverts the selected color value to its previous state, effectively functioning as an undo action. Setting the 'disableUndo' option disables this functionality, so clicking the preview container will no longer revert the color value.

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

Defines the parent container in which the dropDown (popup) will be rendered. Accepts a CSS selector string, an element ID, or the literal value 'body'. This setting is helpful when the dropDown’s visibility is affected by CSS properties (such as overflow or z-index) applied to its parent elements. Specify 'body' to attach the dropDown directly to the element for maximum visibility. 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"

Controls the direction or orientation in which the dropdown menu appears when activated (e.g., opening upwards, downwards, to the left, or to the right). This setting dictates the dropdown's display position relative to its trigger element.

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"

Specifies the placement of the dropdown button relative to its parent element. This determines where the dropdown button will appear on the user interface, such as above, below, to the left, or to the right of the related element.

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"

Specifies the vertical placement of the dropDown menu relative to its trigger element. When set to 'Auto', the component intelligently chooses to display the dropDown either above or below the trigger based on available space within the viewport, ensuring optimal visibility and user experience.

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

Specifies the height of the dropdown menu. By default, this property is set to null, which means the component will use CSS variables (custom properties) to determine its height. If the browser does not support CSS variables, set this property to a specific value (e.g., '200px' or '2.5em') to manually define the dropdown's height. Use this property only to ensure compatibility with browsers that lack support for 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

When this property is enabled, opening the element’s dropdown will display a transparent overlay that covers the area between the dropdown menu and the rest of the page. This overlay visually separates the dropdown from other content and can help capture user interactions outside the dropdown, such as clicks to close the menu.

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

Defines the width of the dropdown component. By default, this property is set to null, which means the dropdown will use CSS variables (such as '--dropdown-width') to determine its width. If you need to support browsers that do not support CSS variables, explicitly set this property to a specific width value (e.g., ''200px'' or ''20em''). This ensures consistent dropdown sizing across all browsers, including those without CSS variable support.

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

Enables users to adjust the alpha (transparency) level of colors through an editor or slider interface. This functionality is available in the following display modes: 'palette', 'radial', and 'hexagonal', allowing for precise control over color opacity in each mode.

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

Enables users to choose a custom color through an editor popup interface. This feature provides custom color selection in modes where it is not available by default—such as 'grid', 'default', and 'spectrum grid'—enhancing flexibility and user experience across different color selection modes.

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 color values that serve as the theme colors for the component or section. These colors will be applied when the displayMode is set to either 'grid' or 'default', ensuring consistent theming across these display modes. Each color in the array should be specified in a valid CSS color format (e.g., HEX, RGB, or named color).

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

Specifies an array of color values to be used as shade colors within the relevant section when the displayMode is set to either 'grid' or 'default'. These colors determine the visual shading or background color scheme that appears in these display modes.

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

Specifies an array of colors to be used as the standard color palette within the relevant section when the displayMode is set to either 'grid' or 'default'. These colors will be available for selection or display in these display modes, providing a consistent and predefined set of color options for users.

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. The alpha editor is an input field that allows users to adjust the opacity (alpha value) of the currently selected color. It is available in the following display modes: 'radial', 'palette', and 'hexagonal'. The alpha editor is only shown when there is sufficient space in the UI. By default, this editor is visible unless explicitly hidden using this setting.

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[]

Specifies the priority order in which color editors are hidden when there is insufficient space to display them all. By default, these editors are only visible in the 'palette', 'radial', and 'hexagonal' display modes. This property enables you to control which editors remain visible by defining their visibility priority, ensuring that the most important editors are retained as the available space decreases.

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

The HEX editor is a user input field that allows users to view and edit the hexadecimal (HEX) color code, representing the selected color. By default, the HEX editor is visible within the interface, enabling users to enter or modify HEX values such as #FF5733. To hide the HEX editor from the interface, set the 'hideHEXeditor' property to true. Note: Setting 'hideRGBeditor' to true only hides the RGB editor and does not affect the visibility of the HEX editor.

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, which displays the currently selected value when using the 'palette', 'radial', or 'hexagonal' display modes. When this option is enabled, the user will not see the visual preview of their selection within the interface. This can be useful for creating a more compact UI or when the preview is not necessary for your workflow.

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 interface. The RGB editor consists of three individual input fields, each allowing users to specify the Red, Green, and Blue components of a color separately. By hiding the RGB editor, users will no longer see or interact with these color value inputs.

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

Displays supplementary helper text beneath the element, which becomes visible only when the element is focused, providing context-specific guidance to the user during interaction.

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 all colors displayed in the ‘spectrumGrid’, ‘hexagonal’, and ‘radial’ modes, producing their complementary (negative) color values for each element in these modes. This affects the entire color range shown, allowing for an alternative visual representation of the color palette.

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

Displays a descriptive label above the element to provide context or identify its purpose for users.

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;

unlockKeystring

Sets or retrieves the unlockKey, a value required to activate or grant access to the product’s features. This key is typically used for licensing or security purposes, ensuring only authorized users can unlock the product.

Default value

Example

Set the unlockKey property.

 <smart-color-picker unlock-key=''></smart-color-picker>

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

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

 colorpicker.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property.

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

 let unlockKey = colorpicker.unlockKey;

localestring

Specifies or retrieves the current language code (e.g., 'en', 'fr', 'es') to be used for localization purposes. This property works together with the messages property, which contains language-specific translations or text. Setting this value determines which set of messages is displayed to users based on their selected language.

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

A callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify the structure, content, or presentation of localized messages before they are delivered to your application.

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

Defines or retrieves an object containing the localized strings used within the widget’s user interface. This property works in conjunction with the locale property to enable the display of text in different languages, allowing developers to customize and provide translations for all UI elements and messages.

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

Specifies or retrieves the value of the element’s name attribute. The name attribute is used to identify form controls when submitting an HTML form; its value is included as the key in the form-data sent to the server and allows the server to process user input correctly.

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

Specifies if the popup component is currently visible (open) or hidden (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"

Specifies the color palette that will appear in the 'spectrumGrid', 'grid', and 'hexagonal' display modes. These colors define the available color options shown to users when any of these display modes are active.

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 a custom color palette as an array, which can be utilized in the display modes 'grid' and 'spectrum grid' when the palette property is set to custom. Each item in the array can either be a string representing a valid color format (such as HEX, RGB, or RGBA), or an object containing a color value. This allows you to specify a tailored set of colors for your application's interface, ensuring precise control over the available color options in supported display modes.

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

Specifies an array containing a predefined set of custom colors for use in the application's color picker component. This custom palette appears in the color grid when the color picker is in 'grid', 'default', or 'spectrum grid' displayModes. The custom colors are displayed below the custom color selection button, at the bottom of the color grid. These colors are only visible if the enableCustomColor property is set to true. This allows users to quickly access and select from your specified custom colors in supported display modes.

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 appears when no value has been entered, or if the current value is null. It provides a visual cue or hint to the user about the expected input until an actual value is provided.

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

Prevents any user interactions with the element, such as clicking, typing, or focusing, rendering it completely unresponsive to pointer and keyboard events.

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

Controls the visibility of the resize indicator located in the bottom-right corner of the dropdown menu. When set to true, the resize handle is displayed, allowing users to adjust the size of the dropdown. This property should be used alongside the resizeMode property to specify how resizing is handled.

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"

Specifies whether the drop-down menu can be resized by the user. When this option is enabled, a resize handle appears on either the top or bottom edge of the drop-down, allowing users to adjust its height interactively. If disabled, the drop-down’s size remains fixed and cannot be modified by the user.

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

Specifies or retrieves a value that determines whether the element's text direction is set to right-to-left (RTL) alignment, commonly used for languages such as Arabic or Hebrew. This property ensures the element properly supports locales that require right-to-left text display.

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

Specifies the theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styles, ensuring visual consistency across the user interface.

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"

Specifies the format and content used by the tooltip to display the value of the color when a user hovers over it. This setting controls how the color value is presented to the user, such as showing it as a HEX code, RGB value, or color name, within the tooltip interface.

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

When set to true, this property prevents the element from receiving keyboard focus, making it unreachable via tab navigation or programmatic focus methods (e.g., element.focus()).

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 currently selected color value assigned to the element. This value is typically formatted as a hexadecimal color code (e.g., "#FF5733"), reflecting the user's choice in a color picker input.

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"

Specifies the color format to be used, allowing selection between HEX, RGB, or RGBA formats. By default, the color format is automatically determined based on the current displayMode setting. This property ensures that colors are displayed in the preferred or most appropriate format for the context.

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"

Specifies which controls or buttons (such as ‘Apply’, ‘Cancel’, ‘Reset’, or custom actions) will appear in the action section of the color picker component. This determines the set of interactive elements available to users for confirming, cancelling, or modifying their color selection.

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 the user clicks the action button. The "Ok" button will only appear if the applyValueMode property is set to useButtons. In other modes, the "Ok" button is hidden and this event will not be available. This setting allows developers to control when value changes are confirmed by requiring explicit user action.

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 user clicks the 'Cancel' button. Note that the 'Cancel' button appears only if the applyValueMode property is set to useButtons. If a different value is set for applyValueMode, the 'Cancel' button will not be displayed, and this event will not be triggered.

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 whenever the color value is modified by the user or programmatically. It provides updated information about the new color selection, allowing you to perform actions—such as updating the UI or storing the new value—in response to the change.

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 dropdown menu is closed, either by selecting an option, clicking outside the dropdown, or pressing a key that dismisses the menu. It allows you to execute custom logic after the dropdown is no longer visible to the user.

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 fired just before the dropdown menu is closed. By handling this event, you can intervene and prevent the dropdown from closing by calling event.preventDefault() within your event handler. This provides an opportunity to validate data, display a confirmation dialog, or perform any custom logic before the dropdown is hidden.

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 whenever the custom color selection view is either opened or closed. The custom color selection view becomes accessible only when the enableCustomColors property is set to true. This event allows you to respond to user interactions with the custom color selector, such as initializing settings when the view opens or performing cleanup when it closes.

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 the user clicks on the dropdown button, indicating their intent to expand or collapse the dropdown menu. It can be used to execute custom logic—such as displaying options, updating UI elements, or tracking user interactions—whenever the dropdown button is activated.

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 user clicks the "OK" button. It can be used to execute custom logic in response to the user's confirmation action, such as submitting a form, closing a modal dialog, or proceeding to the next step in a workflow.

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 each time the dropdown menu becomes visible to the user, such as when it is clicked or otherwise activated. Use this event to execute custom logic when the dropdown opens, for example, loading dynamic content or initializing UI elements within the dropdown.

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 immediately before the dropdown menu is opened. Within the event handler, you can prevent the dropdown from opening by calling event.preventDefault(). This provides an opportunity to perform validation, execute custom logic, or conditionally cancel the opening of the dropdown based on specific criteria.

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 the user initiates the resizing action on the dropdown component, such as by clicking and dragging the resize handle or edge. It indicates the start of the resize interaction, allowing you to perform actions like displaying visual cues or preparing to handle the size change.

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 action of the dropdown component is complete, indicating that the user has finished adjusting its size. At this point, any changes to the dimensions of the dropdown are finalized, and you can safely perform operations that depend on its new size.

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

Displays the color picker’s drop-down panel, allowing users to select or customize a color.

Invoke the open method.

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

close(): void

Improved: "Closes the color picker dropdown menu, hiding the color selection options from view."

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