`<mosaica-filter>`¶

A search box that filters the map by one column.

Use <mosaica-filter> when you want a search box for one column without the field card around it. Set column to a column meta.filterOperands lists. The box takes the form that the column's kind needs:

A text column takes words that an item must all contain. Double quotes match a phrase where the column supports phrases, and OR between terms matches either.
A category column suggests values as the viewer types. The arrow keys move through the suggestions, Enter chooses or removes one, and Escape clears what was typed.
A keyword column has a menu for choosing how to match, by contains, prefix or eq.

The box sets the filter 350 ms after the last keystroke, so that the map does not redraw for every letter. If your code sets a text filter the box cannot express, the box shows it read-only.

import '@mosaicajs/components/filter';

Attributes¶

Attribute	Property	Type	Default	Description
`column`	`column`	`string`	`''`	The column this box filters, a name `meta.filterOperands` lists. Unset or unknown, the box shows nothing.
`placeholder`	`placeholder`	`string`	`''`	Placeholder text for the box, in place of the default.
`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
`choose`	`((value: {key: string; title: string \| null}) => void) \| null`	`null`	Turns a category box into a value picker. Choosing a suggestion calls this with its key and title and empties the box, and no filter changes.
`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
`focus(options?: FocusOptions)`	`void`	Moves focus to the box.
`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-filterchange`	The box changed the column's filter.

Parts¶

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

Part	Description
`entry`	The box.
`mode`	The keyword column's operator button, which opens its menu.
`operators`	The menu of a keyword column's operators.
`operator`	One operator in the menu, with `aria-checked`.
`values`	The typeahead's suggestions.
`tick`	One suggested value, with `aria-selected`.
`bar`	A bar for a suggested value's share of the items counted.
`value-count`	A suggested value's count.
`more`	The note under the box when nothing matches, or when more values match than are listed.
`refusal`	The words "Values unavailable" if the values could not be listed, with `data-code` set to the refusal's code.

CSS custom properties¶

The theme tokens apply to this element.

<mosaica-filter>¶