Label display

[Sobyt483]

openmfp/portal-ui-lib#416

Summary by CodeRabbit

• New Features

  • Customizable label styling for field values via labelDisplay (background, color, weight, style, decoration, transform) across list, detail, grouped and non-grouped views.
  • New label-style UI element to render styled field labels.

• Documentation

  • Updated docs and examples to show labelDisplay usage in list/detail views.

• Tests

  • Expanded unit tests covering label rendering, input normalization, URL/boolean/string edge cases and rendering priorities.

• Refactor

  • Grouped fields unified to a consistent fields structure for predictable rendering.

[coderabbitai]

Walkthrough

Adds a LabelDisplay model and per-field labelDisplay support across Generic UI, introduces a wc-label-value component and template bindings, and refactors grouped field shape from group.values to group.fields in processing code, docs, and tests.

Changes

Cohort / File(s)	Summary
Docs docs/readme-generic-ui.md	Documents new labelDisplay FieldDefinition property and updates list/detail examples to show labelDisplay usage.
Models: FieldDefinition / LabelDisplay projects/lib/models/models/resource.ts	Adds exported LabelDisplay interface and updates FieldDefinition to include `labelDisplay?: LabelDisplay
Generic UI templates (list/detail) projects/wc/src/app/components/generic-ui/detail-view/detail-view.component.html, projects/wc/src/app/components/generic-ui/list-view/list-view.component.html	Change grouped iteration from group.values to group.fields; use field/field.label instead of prior value/value.property; pass the field object to getResourceValueByJsonPath; bind [labelDisplay] to value-cell in grouped and non-grouped branches.
ValueCell: new LabelValue component projects/wc/src/app/components/generic-ui/value-cell/label-value/label-value.component.ts, projects/wc/src/app/components/generic-ui/value-cell/label-value/label-value.component.html, projects/wc/src/app/components/generic-ui/value-cell/label-value/label-value.component.scss, projects/wc/src/app/components/generic-ui/value-cell/label-value/label-value.component.spec.ts	Adds standalone wc-label-value component with required value and labelDisplay inputs; template renders a .label-value span applying inline styles from labelDisplay; includes SCSS and a basic creation unit test.
ValueCell usage and API projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.ts, projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.html	Adds labelDisplay input (`LabelDisplay
Field processing utilities and tests projects/wc/src/app/utils/proccess-fields.ts, projects/wc/src/app/utils/proccess-fields.spec.ts	Refactors processed group shape to use fields?: FieldDefinition[] instead of values?: ProcessedValue[]; removes internal ProcessedValue type; updates grouping logic and tests to use group.fields.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between 02e82ff and 9ce4a79.

📒 Files selected for processing (1)

• projects/wc/src/app/components/generic-ui/value-cell/value-cell.component.spec.ts (2 hunks)

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Sobyt483]

Changed label styles