@quario/viewer

The embeddable viewer. Lays a compiled report out on your page geometry, paints the pages, and wires export buttons. It compiles nothing and never touches the event stream. It sits on @quario/landing, the package the two surface elements share, which a host never imports.

Registering the element

signature

const TAG: 'quario-viewer'

Import @quario/viewer/register to define the element, or import QuarioViewer and define it yourself.

`QuarioViewer`

A LitElement. Set properties as element properties, not attributes.

Property	Type	Meaning
`report`	`ViewableReport`	The compiled report to show.
`data`	`unknown`	The dataset to render it against.
`targets`	`readonly Target[]`	Export targets, wired as buttons in array order.
`page`	`ViewerPage`	Page geometry, the same shape the PDF target takes.
`fonts`	`ViewerFonts`	TrueType families, so preview and document break lines alike.
`zoom`	`'fit'` or number	Zoom level.
`filename`	`string`	Base name for a downloaded export.
`colorScheme`	`'light'`, `'dark'`, `'auto'`	Chrome only. The sheet stays the document’s.

signature

get renderComplete(): Promise<boolean>

Resolves once a pending render settles.

Types

signature

type ViewableReport = CompiledReport
type ViewerPage = LayoutPage
type ViewerFonts = LayoutFonts

Pass the same fonts record here and to pdf({ fonts }), and hold it across renders. It’s the identity the viewer remembers a face by.

Events

signature

interface QuarioViewerEventMap {
  rendered: CustomEvent<undefined>
  error: CustomEvent<ViewerErrorDetail>
}

interface ViewerErrorDetail {
  error: unknown
  kind: 'mount-render' | 'update-render' | 'export' | 'host-option'
}

host-option names a property the viewer rejected, which reached no render at all. mount-render covers a failure before any render has landed on the sheet and update-render covers one after, with export for a download the viewer couldn’t produce.

addEventListener and removeEventListener take their types from that map.

An unlicensed report carries the marking on the sheet the viewer paints, just as it does in an export.

@quario/viewer

Registering the element

QuarioViewer

Types

Events

A compiled report, on screen.

`QuarioViewer`