ColorPanel
ColorPanel is an advanced color chooser with Pallete, Spectrum Grid, Radial Palette and Excel-like options.
Selector
smart-color-panel
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
applyValueModeColorApplyValueMode
Specifies how the value is applied.
Default valueinstantly
columnCountnumber
Defines the number of columns for the colors in displayModes 'grid', 'hexagonal' and 'spectrumGrid'.
Default value8
disabledboolean
Enables or disables the element. Disabled elements can not be interacted with.
Default valuefalse
displayModeColorDisplayMode
Determines the colors that will be displayed and their layout.
Default valuedefault
disableUndoboolean
By default clicking on color panel's preview container returns the color value to it's previous state. 'disableUndo' prevents this functionality.
Default valuefalse
editAlphaChannelboolean
Allows to edit the alpha(transparency) of the colors via an editor/slider in the following displayModes: 'palette', 'radial', 'hexagonal'
Default valuefalse
enableCustomColorsboolean
Allows to select a custom color via an editor popup. Custom color selection is available in modes that don't have this option by default, like: 'grid', 'default, 'spectrum grid'.
Default valuefalse
gridThemeColorsstring[] | null
Defines an Array of colors that will be used as the Theme Colors in the corresponding section in displayMode: 'default'.
gridShadeColorsstring[] | null
Defines an Array of colors that will be used as the Shade Colors in the corresponding section of displayMode: 'default'.
gridStandardColors[] | null
Defines an Array of colors that will be used as the Standart Colors in the corresponding section of displayMode: 'default'.
hideAlphaEditorboolean
Hides the alpha editor. Alpha editor is an input containing the value of the current color opacity. The input is available in the following modes: 'radial', 'palette', 'hexagonal'. The input is only visible if there's enough space. This editor is visible by default.
Default valuefalse
hideContentToFitstring[]
Determines which color editors will be hidden first when there's not enough space for all of them to be visible. By default the editors are only visible in 'palette', 'radial' and 'hexagonal' display modes. This property allows to prioritize the visibility of the editors.
hideHEXEditorboolean
HEX editor is an input containing the hexadecimal representation of a color. This editor is visible by default. Setting 'hideRGBeditor' to true hides it.
Default valuefalse
hidePreviewContainerboolean
Hides the preview container. Preview container is used to show the currently selected value in 'palette', 'radial' and 'hexagonal' display modes.
Default valuefalse
hideRGBEditorboolean
Hides the RGB editor. This editor is a group of three separate inputs for the Red, Green and Blue values of the color.
Default valuefalse
invertedboolean
Inverts the colors in 'spectrumGrid', 'hexagonal', 'radial' modes.
Default valuefalse
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: '{{actualValue}}', Expected value: '{{value}}'!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: '{{actualType}}', Expected type: '{{type}}'!",
"methodInvalidValueType": "Invalid '{{name}}' method argument value type! Actual type: '{{actualType}}', Expected type: '{{type}}' for argument with index: '{{argumentIndex}}'!",
"methodInvalidArgumentsCount": "Invalid '{{name}}' method arguments count! Actual arguments count: '{{actualArgumentsCount}}', Expected at least: '{{argumentsCount}}' argument(s)!",
"methodInvalidReturnType": "Invalid '{{name}}' method return type! Actual type: '{{actualType}}', Expected type: '{{type}}'!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to '{{files}}'.",
"htmlTemplateNotSuported": "{{elementType}}: Web Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}.",
"redPrefix": "R:",
"greenPrefix": "G:",
"bluePrefix": "B:",
"hexPrefix": "#:",
"alphaPrefix": "Alpha:",
"ok": "OK",
"cancel": "CANCEL",
"customColor": "CUSTOM COLOR ..."
}
namestring
Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
Default value"
paletteColorPalette
Determines what colors will be displayed in 'spectrumGrid', 'grid' and 'hexagonal' displayModes.
Default valuedefault
paletteColorsany
Defines an array of colors that form a custom palette. This palette can be used in displayModes 'grid' and 'spectrum grid' if the palette property is set to custom. The value of the property can be an array of strings or objects that contain valid colors ( HEX, RGBA, etc).
paletteCustomColorsstring[] | null
Defines an array of colors that represent a predefined list of custom colors. This palette can be used in displayModes 'grid', 'default' and 'spectrum grid'. Custom colors are displayed at the bottom of the color grid below the button for custom color selection. They are only visible if enableCustomColors property is true.
readonlyboolean
If the element is readonly, users cannot interact with it.
Default valuefalse
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
themestring
Determines the theme. Theme defines the look of the element
Default value"
tooltipDisplayModeColorTooltipDisplayMode
Determines how the tooltip displays the value of the color that is being hovered.
Default valuehex
valuestring
Represents the value of the selected color.
Default value"null
valueFormatColorValueFormat
Determines the format of the color. Whether it's in HEX, RGB or RGBA. By default it shows the color depending on the displayMode.
Default valuedefault
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
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the color is changed.
Arguments
evEvent
ev.detailObject
ev.detail.oldValue - The previously selected color.
ev.detail.value - The new selected color.
oncancelbuttonclick((this: Window, ev: Event) => any) | null
This event is triggered when the cancel button is clicked. 'Cancel' button is visible only when applyValueMode is set to useButtons.
Arguments
evEvent
oncustomcolorselection((this: Window, ev: Event) => any) | null
This event is triggered when the custom color selection view is opened/closed. Custom color selection view is available when enableCustomColors property is true.
Arguments
evEvent
ev.detailObject
ev.detail.value - A boolean that indicates whether the custom color view is shown or not.
onokbuttonclick((this: Window, ev: Event) => any) | null
This event is triggered when the ok button is clicked. 'Ok' button is visible only when applyValueMode is set to useButtons.