import { Component, input } from '@angular/core';

/** Molecule: one key/value row in a CIBG Huisstijl "controlestap" data summary
    (`dt.col-md-4` / `dd.col-md-8`). `display:contents` so the dt/dd become direct
    flex children of the parent `<dl class="row">` — the Bootstrap grid classes
    need that to lay out correctly. Wrap several in a `<dl class="row mb-0">`. */
@Component({
  selector: 'app-data-row',
  styles: [`:host{display:contents}`],
  template: `
    <dt class="col-md-4">{{ key() }}</dt>
    <dd class="col-md-8"><ng-content>{{ value() }}</ng-content></dd>
  `,
})
export class DataRowComponent {
  key = input.required<string>();
  value = input<string | null>('');
}