Edwin van den Houdt
e82309786d
One-time prettier --write so the new format:check CI gate starts green. .prettierignore excludes generated (api-client.ts, documentation.json), vendored (public/cibg-huisstijl), and backend (dotnet format owns it). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
36 lines
1.5 KiB
TypeScript
36 lines
1.5 KiB
TypeScript
import { Component, input } from '@angular/core';
|
|
import { HeadingComponent } from '@shared/ui/heading/heading.component';
|
|
|
|
/** Molecule: CIBG Huisstijl **Datablock** (designsystem.cibg.nl/componenten/datablock)
|
|
— THE way to show user/application data. A grey `.data-block` surface holds a white
|
|
`.block-wrapper` panel with a `<dl>` of projected `<app-data-row>`s. Use `stacked`
|
|
(`.data-block--stacked`) when labels/values are long and should stack. Replaces the
|
|
`app-card + dl` idiom for data views (the datablock carries its own surface, so it is
|
|
NOT wrapped in an `app-card` — see WP-12). When there is no visible `heading`, pass an
|
|
`ariaLabel` so the definition list is announced. */
|
|
@Component({
|
|
selector: 'app-data-block',
|
|
imports: [HeadingComponent],
|
|
template: `
|
|
@if (heading()) {
|
|
<app-heading [level]="level()">{{ heading() }}</app-heading>
|
|
}
|
|
<div class="data-block" [class.data-block--stacked]="stacked()">
|
|
<div class="block-wrapper">
|
|
<dl class="mb-0" [attr.aria-label]="ariaLabel() || null">
|
|
<ng-content />
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
`,
|
|
})
|
|
export class DataBlockComponent {
|
|
heading = input('');
|
|
/** Heading level when `heading` is set (default h3, matching `app-card`). */
|
|
level = input<1 | 2 | 3 | 4 | 5>(3);
|
|
/** Stacks label above value (`.data-block--stacked`) for long content. */
|
|
stacked = input(false);
|
|
/** Accessible name for the `<dl>` when there is no visible heading. */
|
|
ariaLabel = input('');
|
|
}
|