UI Components

Terminal output

A terminal's output, read-only, such as an earlier Run's frozen under its block: its TerminalOutputLines in the kit's terminal colors, the terminal's monospace font and size, and the terminal pane's rows, on the terminal's background, with no cursor, input or scrollback of its own. A row is xterm's: the font's ascent and descent, rounded up to a device pixel, times --nol-line-terminal, rounded down to one. Each run's text is lifted to at least 4.5:1 against its background, as the terminal pane's minimum contrast ratio lifts it, dim and inverse runs included; the view follows the theme, the fonts and the device pixel ratio as they change. A long line wraps at the view's width, and a line the terminal wrapped joins the one before it and wraps again here. Past a TerminalOutputComponent.maxHeight, it opens at its end and follows new lines while it is there, as a log does. The text is one text, its runs only spans, so a screen reader reads it whole and a selection copies it with its line breaks. Under forced colors it draws in the system's colors, as terminal.css sets the terminal tokens.

Examples

Loading…

States

Loading…

API

Selector nol-terminal-output

Import from @noldova/ui.components.angular

Inputs

NameTypeDefaultDescription
linesreadonly TerminalOutputLine[] Required

The lines, in order; a line whose TerminalOutputLine.wraps is true continues the one before it.

maxHeightnumber | nullnull

The tallest the view grows, in rem, past which it scrolls inside, open at its end, and keeps its newest line in view as lines come while it is scrolled to its end; null, when not bound, grows with its lines.

Accessibility

It takes no keys of its own.

Its output is one preformatted text, each run of color or style only a span with no role, so a screen reader reads it whole and a selection copies it with its line breaks.

Invisible text is drawn transparent, yet it is still selected and copied.

Each run's text keeps at least 4.5:1 contrast against its background; under forced colors it draws in the system's text and background colors.

The sample it measures its rows with is hidden from assistive technology.

Capped, it scrolls inside, open at its end, and keeps its newest line in view as lines come while it is scrolled to its end.

Specification

Loading…