<tl-seat-explorer>
The seat map: the venue's sections, flown into one at a time, and its seats in their categories' colours.
| HTML tag | <tl-seat-explorer> |
| React | import { TlSeatExplorer } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM), native (planned React Native set) |
The seat map: the venue's sections, flown into one at a time, and its seats in their categories' colours. A tap reserves a seat on its category's default ticket type and pins a card beside it with the type to change; a tap on a held seat gives it back. Keyboard navigation over sections and seats, a list of each section's seats, and every reserve, release and lost seat announced. When the seat map publishes a venue model, a toggle shows the venue in 3D, read only when it opens, with the same seats, taps and keys.
The seat card and the map key are other Elements placed here as a host
would place them (tl-seat-card, tl-map-key), each unstyled when this
one is.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dimension | dimension | Start on the flat map (2d) or in the venue in 3D (3d). 3D is offered only when the seat map publishes a venue model, and is read only when it opens; the buyer can switch, and a browser that cannot draw it stays on the flat map | "2d" | "3d" | '2d' |
eventId (required) | event-id | The event, for its prices | string | undefined |
focusSection | focus-section | Start flown into this section, by its id | string | undefined | undefined |
mode | mode | Start on the map, or on the list of each section's seats (the buyer can switch) | "list" | "map" | 'map' |
occurrenceId (required) | occurrence-id | The occurrence whose seats to show | string | undefined |
showKey | show-key | Show the map key (the venue minimap and the price bands) in the corner | boolean | true |
staff | staff | Box office mode, on a client that offers the staff capabilities: holds, comps, sales, other carts and allocations drawn and counted in the map key's Status tab, kills released on the occurrence drawn as on sale, a compact seat card, a held seat sold after a confirm, a single seat gap sold after a confirm, and no hold countdown | boolean | false |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-seat-explorer__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
viewHost | view-host | Where the view from a seat opens: over this map (self), or in a tl-seat-view the page places over something bigger (page), as the buy modal does over its whole panel | "page" | "self" | 'self' |
Events#
| Event | Description | Type |
|---|---|---|
tlCartChange | The seats this buyer holds for the occurrence changed | CustomEvent<{ seats: number[]; }> |
tlError | The seat map could not be loaded, or a seat could not be written | CustomEvent<{ message: string; }> |
tlRecommendationSelect | A best available suggestion was taken: its seats are being reserved | CustomEvent<{ seats: number[]; }> |
tlSeatSelect | A seat was reserved (selected) or given back (not selected) | CustomEvent<{ seat: number; sectionId: string | null; selected: boolean; }> |
tlSeatView | The buyer opened the view from a seat | CustomEvent<{ seat: number; }> |
tlSectionFocus | The map flew into a section, or back out to the venue (null) | CustomEvent<{ sectionId: string | null; sectionName: string | null; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.
Related elements#
Renders: <tl-seat-card>, <tl-map-key>, <tl-seat-view>
Used by: <tl-buy-modal>