Color Swatches¶

This webcomponent is allowing user to pick single or multiple colors form provided color-items. Clicking on any one of them dispatches a custom event which contains information about which color or colors were picked, other components may listen to this event and perform some actions.

To work properly h-color-swatches requires to manually add one or many h-color-item

Attributes¶

Attribute name	Type	Default	Description
`multiple` (optional)	boolean	false	Allows to choose more than one color
`numberOfVisibleColors` (optional)	number	false	Allows to set how many items should be visible, all the others will be hidden and button to unhide them will be displayed

Public methods¶

Method name	Parameters	Return type	Description
`selectColors()`	HColorItem[ ] `\|` HColorItem	void	Select or deselect colors according to the passed parameter
`clearAllColors()`	null	void	Clear all selected colors

DOM Events¶

This webcomponent listens to the following DOM events:

This webcomponent also dispatches the following DOM events:

change

Example¶

sourceoutput

<h-color-swatches multiple>
    <h-color-item color="#048A81"></h-color-item>
    <h-color-item color="#8A89C0"></h-color-item>
    <h-color-item color="#54C6EB"></h-color-item>
</h-color-swatches>

<h-color-swatches multiple class="color-swatches">
    <h-color-item color="#048A81" tabindex="0" role="button" aria-label="#048A81" class="color-item color-swatches__color-item" style="background-color: rgb(4, 138, 129);"></h-color-item>
    <h-color-item color="#8A89C0" tabindex="0" role="button" aria-label="#8A89C0" class="color-item color-swatches__color-item" style="background-color: rgb(138, 137, 192);"></h-color-item>
    <h-color-item color="#54C6EB" tabindex="0" role="button" aria-label="#54C6EB" class="color-item color-swatches__color-item" style="background-color: rgb(84, 198, 235);"></h-color-item>
</h-color-swatches>