# Data Display

Level: atom.

## Purpose and use

Present a read-only label/value pair. Use Input for editing and Data Display Grid for arranging multiple pairs. Use Swap for verified custom value content.

## Anatomy and behavior

Label and value rows have independent optional info actions. Null value becomes empty text. Overflow is measured on mouseenter/focusin and enables a Tooltip. Swap projects `[wblDataDisplaySwap]` and suppresses the standard value and its info icon. Width auto normalizes to content; fixedWidth is used for fixed layout.

## Accessibility and content

The value row is labelled by the generated label ID. Icon buttons use their tooltip text as names and emit separate labelIconClick/valueIconClick events. Plain overflow text spans are not made focusable by the component; do not rely on a hover tooltip as the only way to read essential content. Projected content owns its own semantics.

## Open Questions

Keyboard access to truncated noninteractive text needs verification in the containing layout; overflow handling does not itself add a tab stop.

## Figma source and verified mapping

- Figma component set: [Data Display/Single — `4874:4031`](https://www.figma.com/design/EO9tuCsqwuHL8cZ4Eb2psR/%F0%9F%9A%9B-WB-Logistics-UI-kit?node-id=4874-4031), key `167da0204359776613ff8e4b67bd5b2029d34d01`.
- Verified in `D-021` ([GitLab Issue](https://gitlab.com/polozovdaniel/logistics-2/-/work_items/22)).
- The published set contains `Size=M, Content=Text`, `Size=L, Content=Text`,
  and `Size=L, Content=Swap-component`. Local `size` maps directly; local
  `content="Swap"` maps to Figma `Swap-component`.
- Figma `Label icon` and `Value icon` controls map to local `labelIcon` and
  `valueIcon`. The text label/value map to local `label` and `value`; the
  component-owned Figma Slot maps to `[wblDataDisplaySwap]` projection.

### Documented differences

- Local `width`, `fixedWidth`, tooltip text, overflow detection, and the two
  icon-click outputs are runtime behavior, not published Figma properties.
- Angular allows `Size=M` with `content="Swap"`; that combination is not a
  published Figma variant and remains implementation-only.

## Local component contract

This is the current owned contract for `component.data-display`. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.

### Public type values

`WblDataDisplaySize`: `M | L`; `WblDataDisplayContent`: `Text | Swap`; `WblDataDisplayWidth`: `full | fixed | content | auto`. Label accepts string/number, value string/number/null; tooltip overrides accept string/null.

### Classes and selectors

- `WblDataDisplayComponent` — `wbl-data-display` (src/app/design-system/primitives/data-display/data-display.component.ts).

### Inputs

- `WblDataDisplayComponent.size = input<WblDataDisplaySize>('L')`
- `WblDataDisplayComponent.content = input<WblDataDisplayContent>('Text')`
- `WblDataDisplayComponent.width = input<WblDataDisplayWidth>('full')`
- `WblDataDisplayComponent.fixedWidth = input('12rem')`
- `WblDataDisplayComponent.label = input<string | number>('Label')`
- `WblDataDisplayComponent.value = input<string | number | null>('Value')`
- `WblDataDisplayComponent.labelIcon = input(false)`
- `WblDataDisplayComponent.valueIcon = input(false)`
- `WblDataDisplayComponent.labelTooltip = input<string | null>(null)`
- `WblDataDisplayComponent.valueTooltip = input<string | null>(null)`
- `WblDataDisplayComponent.labelIconTooltip = input('Label')`
- `WblDataDisplayComponent.valueIconTooltip = input('Value')`

### Models

- None.

### Outputs

- `WblDataDisplayComponent.labelIconClick = output<void>()`
- `WblDataDisplayComponent.valueIconClick = output<void>()`

### Slots and projection markers

- `WblDataDisplayComponent: <ng-content select="[wblDataDisplaySwap]">`

### Local evidence

- Behavior/template: `src/app/design-system/primitives/data-display/data-display.component.html` (reviewed in D-025, 2026-09-05).

- Code: `src/app/design-system/primitives/data-display/data-display.component.ts`.
- Focused test: `src/app/design-system/primitives/data-display/data-display.component.spec.ts`.
- Public export: `export * from './primitives/data-display/data-display.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/data-display.stories.ts` (`Design System/Primitives/wbl-data-display`). This is the shared exact Source story for this family.

## Figma status

The source above is the verified Figma owner for the published Single states.
Fresh read-only Plugin API inspection and screenshot on 2026-09-22 verified
the Single set and its three variants. The sibling
[Single assembly contract](data-display.figma.md) now owns native Slot content,
centered alignment, spacing, token bindings and optional icon construction.
This adds no Angular API or Data Display Grid contract.

Documentation task: `LUU-427` · [GitHub Issue 10](https://github.com/logisticsdesign/logistics-2/issues/10) ·
verified member `danil-lebedev`, GitHub ID `50231562` · agent `Codex` / Specs ·
run/session `luu427-drawer-20260922`.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.