<mosaica-item-card>

A card showing an item's fields, with an optional Open button.

Use the item card to show the record of the item a viewer has picked on the map, so that they can read its fields and open it elsewhere. It reads the store's selected item, or the item you set when you fetch records yourself.

The headline is the title-field field, or the item's mosaica_id when that field is unset or empty. To render a field your own way, as a link for example, put an element in its field-<name> slot.

A field named in image-fields whose value is an http: or https: address, or a path resolved against the page, is drawn as the image at that address, across the card's width. The viewer's browser loads it from the host that serves it, without a referrer. A value that is not such an address, and an image that does not load, are shown as text.

The Open button appears only when you set open-url or open. open-url is a link template such as https://www.geonames.org/{geonameid}, in which each {name} is replaced by the item's value for that field. Because the values are URL-encoded, a template cannot open an address that a field already holds, so set open to a function for that. An item gets no Open button when it has no value for a field the template names. A function in open is called with the item's mosaica_id and fields, and it takes precedence over open-url.

import '@mosaicajs/components/item-card';

Attributes

Attribute	Property	Type	Default	Description
title-field	titleField	string	''	The field the headline shows. Unset, or if the item has no value for it, the headline is the mosaica_id.
compact	compact	boolean	false	Shows a shorter card: the headline, the subtitle and three fields, with the rest under "Show all N fields".
subtitle-field	subtitleField	string	''	The field shown under the headline when compact is set. Unset, there is no subtitle.
card-fields	cardFields	string	''	The fields a compact card shows before "Show all", separated by spaces or commas, in order. Unset, the first three. The full list shows these fields first, then the rest.
image-fields	imageFields	string	''	The fields whose value is the address of an image, separated by spaces or commas. Each is drawn as its image rather than as text.
open-url	openUrl	string	''	The link template for Open, with {name} for the value of the field name and {mosaica_id} for the item's id. Without it or open, there is no Open button.
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
item	{id: bigint; detail: ItemDetail} | null	null	The item to show, if you fetch the record yourself. It replaces the store's selection.
refusal	Refusal | null	null	A refusal to show instead of an item, if you fetch the record yourself.
pick	PickOutcome	null	What the map's last click found (<mosaica-map>'s lastPick), shown while no item is selected. A miss shows "No item here" and a broken pick shows "Item unavailable".
meta	Meta | null	null	The server's /v1/meta, for the field order and view names, if the card has no store.
open	((item: MosaicaEventDetails['mosaica-open']) => void) | null	null	A function called with the item's mosaica_id and fields when Open is pressed. Takes precedence over open-url.
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
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-open	Open was pressed.
mosaica-close	The close button was pressed, with what set to item.
mosaica-viewfollow	A view chip was pressed, asking to show the item in that view.

Slots

Slot	Description
field-<name>	Replaces the value of the field <name>, in the grid or the headline.
actions	Buttons beside the close button, such as the explorer's Pin.

Parts

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

Part	Description
title	The header row: the headline or the state, and the close button.
close	The close button.
state	The state line, with data-state: shown, empty (no item, or a click that found nothing), refused or detached.
refusal	The words "Item unavailable", with data-code set to the refusal's code if the server refused the record. For a broken pick, the details are in the map's lastPick.
reason	The server's reason for refusing the record, under "Item unavailable".
headline	The headline, with data-name set to the field it shows.
subtitle	The subtitle-field value under the headline, when compact is set.
show-all	The "Show all N fields" button, when compact is set, with aria-expanded.
view-chip	One view the item is in, with data-view and aria-current on the current view.
field	One field, with data-name, and data-prose on a value over 60 characters.
label	A field's name, and the heading above the view chips.
value	A field's value.
image	A field's value drawn as an image, under image-fields.
scoped	The group-scoped values, grouped by key.
key	One key's heading among the group-scoped values, with data-key.
open	The Open button.
copy	The Copy id button, which copies the mosaica_id to the clipboard.

CSS custom properties

The theme tokens apply to this element.