<mosaica-colour-editor>

A dialog for choosing the colour of each category value or cluster.

Use the colour editor when viewers should choose their own colours while the map is coloured by a category or a layer. The explorer's Edit colours button opens it. In your own layout, set field to a rendered category column or to cluster:<layer>, then call show() to open the dialog.

Each row counts the items the viewer may see with that value, ignoring the filters and the camera, so the rows keep their order as the viewer pans or filters. For a nested or dag layer, the rows are the clusters the map currently draws, and the search box reaches the rest. To recolour several rows at once, viewers tick them and press Set colour.

The colours are kept in the store, so every element that uses the store shows a change at once. Each change also fires one mosaica-valuecolour or mosaica-clustercolour event naming every value or cluster it changed.

import '@mosaicajs/components/colour-editor';

Attributes

Attribute	Property	Type	Default	Description
field	field	string	''	What the dialog colours: a rendered category column, or cluster:<layer>.
cluster-level	level	number | null	null	The level of a stacked or tiered layer whose clusters are listed. null is the coarsest level.
viewer-url	viewerUrl	string	''	The base URL of the Mosaica viewer server, for the store the element builds: a full URL such as https://maps.example.org, or a path such as /mosaica. Unset, the page's own origin. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store.
token	token	string	''	A viewer token for the store the element builds. Without token or authorise, only an open server (serve.open) answers. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store.
artifacts-per-tile	artifactsPerTile	number | null	null	The most artifacts one level of a layer shows per map tile, for the store the element builds. Unset, 50, or the server's selection.max_artifacts_per_tile if lower. A value above that maximum is refused. Read only by the map, the explorer and <mosaica-store>. Changing it builds a new store.

Properties

Set as JavaScript properties; they have no attribute.

Property	Type	Default	Description
store	Store | null	null	The store to use, ahead of one from context or one the element would build. The element never disposes it.
authorise	TokenSupplier | null	null	A function that returns a viewer token, used instead of token and called again before the token expires. A different function builds a new store, so keep it stable across renders. Set it together with viewer-url: a store built from viewer-url alone first sends a request with no token, and is replaced when authorise arrives.
activeStore	Store | null	read-only	The store this element is using, or null if it has none.
source	StoreSource	read-only	Where activeStore came from.

Methods

Method	Returns	Description
show()	Promise<void>	Open the dialog.
close()	void	Close the dialog and return focus to the element that had it before.
dispose()	void	Dispose of the store this element built. Removing the element from the page does not, so call this when you are done with the element. A store you passed in is left to you.

Events

Each bubbles and is composed. Events gives each detail.

Event	Fired when
mosaica-valuecolour	Colours were chosen or reset for values of a category.
mosaica-clustercolour	Colours were chosen or reset for clusters of a layer.

Parts

Styled from outside the element with ::part().

Part	Description
dialog	The dialog, while it is open.
title	The field's or the layer's name.
sub	Under the name: the level or the cut, and the palette.
close	The close button.
columns	The headings over the rows.
rows	The list of rows.
row	One row, with data-key, data-found if the search box found it, and data-ticked while it is ticked.
check	A row's checkbox.
swatch	A row's colour button, which opens the colour picker. It carries data-unmet, and is drawn as an outline, for a value the map has not given a colour yet.
name	A row's name, with data-unnamed for a cluster that has none.
path	A cluster row's parents.
count	A row's count over everything the viewer may see.
selected	The bar shown while rows are ticked.
set-colour	Its Set colour button.
deselect	Its Deselect button.
reset-all	The Reset to palette button.
changed	How many colours are chosen.
done	The Done button.
colour-popover	The colour picker, while it is open.
choice	A colour in the picker's palette rows, with aria-pressed.
sv	The picker's saturation and brightness area, a slider in two directions.
hue	The picker's hue bar, a slider.
hex	The picker's hex field.
reset	The picker's Reset button.
filter-<part>	A part of the inner <mosaica-filter>.
cluster-filter-<part>	A part of the inner <mosaica-cluster-filter>.

CSS custom properties

The theme tokens apply to this element.