Color Picker

shadow

Color picker is an element that displays a color palette and allows users to select one of its colors. Displays the hex code of the selected color, which can be easily copied by the user.

Basic usage

The sample represents a basic color selection flow without further integrations. It is the best start to understand the behavior of a component.

When to use

Use wje-color-picker when the user enters a value, selects options, or performs an action on a form.

When not to use

Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.

Accessibility

Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.

Recommended practices

• Keep validation rules and error states consistent across the entire form.
• For asynchronous operations, display the load status or disabled status.
• For complex forms, prefer smaller sections and immediate feedback.

Attributes and properties

color

Popis	Nastavuje farbu komponentu.
Atribút	color
Typ	string
Predvolené	#000000

inputEditable

Popis	Určuje, či je voľba input-editable zapnutá a ovplyvňuje správanie komponentu.
Atribút	input-editable
Typ	boolean
Predvolené	false

noColorArea

Popis	Riadi farebné štýlovanie súvisiace s voľbou no-color-area.
Atribút	no-color-area
Typ	boolean
Predvolené	false

noControls

Popis	Určuje, či je voľba no-controls zapnutá a ovplyvňuje správanie komponentu.
Atribút	no-controls
Typ	boolean
Predvolené	false

noSwatches

Popis	Určuje, či je voľba no-swatches zapnutá a ovplyvňuje správanie komponentu.
Atribút	no-swatches
Typ	boolean
Predvolené	false

swatches

Popis	Nastavuje textovú hodnotu uloženú vo voľbe swatches.
Atribút	swatches
Typ	string
Predvolené	-

Events

Názov	Popis
wje-color-picker:select	Vyvolá sa pri výbere položky.

Methods

parseSwatches

Popis	Spustí metódu parseSwatches na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(value: string) => string[]

createSwatches

Popis	Vytvorí swatches a pripojí ho do štruktúry komponentu.
Signatúra	(node: any) => void

setSliders

Popis	Nastaví sliders a aplikuje súvisiace zmeny stavu.
Signatúra	(color: any) => void

dimension

Popis	Spustí metódu dimension na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	() => object

getPointerPosition

Popis	Vráti pointer position z aktuálneho stavu komponentu.
Signatúra	(e: any) => {x: number, y: number}

setMarkerPosition

Popis	Nastaví marker position a aplikuje súvisiace zmeny stavu.
Signatúra	(x: any, y: any) => void

clampMarkerPosition

Popis	Spustí metódu clampMarkerPosition na vykonanie logiky komponentu a aktualizáciu jeho stavu.
Signatúra	(x: number, y: number) => {x: number, y: number}

setColorAtPosition

Popis	Nastaví color at position a aplikuje súvisiace zmeny stavu.
Signatúra	(x: any, y: any, alpha: any) => *｜tinycolor

getHueAreaColor

Popis	Vráti hue area color z aktuálneho stavu komponentu.
Signatúra	(color: string) => string

CSS shadow parts

Názov	Popis
anchor	Štýluje shadow časť anchor.
picker	Štýluje shadow časť picker.
marker	Štýluje shadow časť marker.
color-area	Štýluje shadow časť color-area.
hue	Štýluje shadow časť hue.
alpha	Štýluje shadow časť alpha.
color-preview	Štýluje shadow časť color-preview.
input	Štýluje shadow časť input.

CSS custom variables

Názov	Popis
--wje-color-picker-area	Vlastná CSS premenná na štýlovanie komponentu (area).
--wje-color-picker-value	Vlastná CSS premenná na štýlovanie komponentu (value).
--wje-color-picker-swatch	Vlastná CSS premenná na štýlovanie komponentu (swatch).
--wje-color-picker-size	Vlastná CSS premenná na štýlovanie komponentu (size).
--wje-color-picker-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.