DSO Toolkit v101.0.0 😺

Deze release bevat BREAKING changes voor Angular-gebruikers en de volgende componenten:

• Form Group
• Document Header

Angular 21 of 22 vereist

Breaking: De ondersteuning voor Angular 20 is verwijderd. De nieuwe Signal Forms-adapters gebruiken @angular/forms/signals, dat pas vanaf Angular 21 beschikbaar is. Omdat de adapters onderdeel zijn van het hoofdpackage @dso-toolkit/angular, vereist deze package nu Angular 21 of 22.

Signal Forms

Voor Angular Signal Forms zijn de adapters beschikbaar via @dso-toolkit/angular. Importeer de gewone DSO-componenten en de Signal Forms-adapters uit hetzelfde package:

import {
  DsoDatePicker,
  DsoDatePickerFieldControl,
  DsoSelectable,
  DsoSelectableCheckboxFieldControl,
  DsoSelectableRadioGroupFieldControl,
} from "@dso-toolkit/angular";

Gebruik de adapters samen met Angulars FormField-directive:

import { Component, signal } from "@angular/core";
import { FormField, form } from "@angular/forms/signals";

@Component({
  standalone: true,
  imports: [DsoDatePicker, DsoSelectable, DsoDatePickerFieldControl, DsoSelectableCheckboxFieldControl, FormField],
  template: `
    <dso-date-picker [formField]="myForm.datum" minDate="01-01-2024" maxDate="31-12-2024" />
    <dso-selectable type="checkbox" [formField]="myForm.akkoord" />
  `,
})
export class ExampleComponent {
  model = signal({ datum: "", akkoord: false });
  myForm = form(this.model);
}

Bij een Date Picker met [formField] gebruik je minDate en maxDate voor datumgrenzen. De namen min en max zijn binnen Angular Signal Forms gereserveerd voor numerieke formuliergrenzen. Angular geeft die getallen ook door aan de gegenereerde Date Picker-proxy. Daarom accepteren min en max in Core naast datumstrings ook getallen; getallen stellen geen datumgrens in. De FormField-adapter geeft de datumstrings via minDate en maxDate door aan de Date Picker.

Voor radio-Selectables komt [formField] op een fieldset met dsoSelectableRadioGroup. Zo behouden de radio's hun vaste value en beheert de groep de formulierwaarde:

<fieldset dsoSelectableRadioGroup [formField]="myForm.keuze">
  <legend>Maak een keuze</legend>
  <dso-selectable type="radio" name="keuze" value="ja">Ja</dso-selectable>
  <dso-selectable type="radio" name="keuze" value="nee">Nee</dso-selectable>
</fieldset>

Importeer hiervoor ook DsoSelectableRadioGroupFieldControl en voeg keuze toe aan je formuliermodel.

Form Group

Breaking: In het HTML/CSS component Form Group (Static) schrijven wij nog het gebruik voor van een icon-only Button. Dit gaan we vervangen door een Icon Button (dso-icon-button).

Migratiepad

Gebruik het Web Component Icon Button.

❌
<div class="form-group dso-static">
  <div class="dso-label-container">
    <label class="control-label" for="mijn-id"> Kleur van object </label>
    <dso-info-button label="Toelichting bij veld"></dso-info-button>
  </div>
  <div class="dso-field-container">
    rood

    <button type="button" class="dso-tertiary">
      <span class="sr-only">Edit</span><dso-icon icon="pencil"></dso-icon>
    </button>
  </div>
</div>

✅
<div class="form-group dso-static">
  <div class="dso-label-container">
    <label class="control-label" for="mijn-id"> Kleur van object </label>
    <dso-info-button label="Toelichting bij veld"></dso-info-button>
  </div>
  <div class="dso-field-container">
    rood

    <dso-icon-button variant="tertiary" icon="pencil" label="Edit"></dso-icon-button>
  </div>
</div>

Document Header

Breaking: In het HTML/CSS component Document Header schrijven wij nog het gebruik voor van een icon-only Button. Dit gaan we vervangen door een Icon Button (dso-icon-button).

Migratiepad

Gebruik het Web Component Icon Button.

❌
<dso-responsive-element class="dso-document-header">
  ...
  <div class="dso-document-header-container">
    ...
    <button type="button" class="dso-document-header-map-action">
      <span class="sr-only">Actie</span><dso-icon icon="map-location"></dso-icon>
    </button>
    ...
  </div>
</dso-responsive-element>

✅
<dso-responsive-element class="dso-document-header">
  ...
  <div class="dso-document-header-container">
    ...
    <dso-icon-button variant="tertiary" icon="map-location" label="Actie"></dso-icon-button>
    ...
  </div>
</dso-responsive-element>