Deze release bevat changes voor het volgende component:

• Banner (HTML/CSS Component)

Deze release bevat breaking changes voor de volgende componenten:

• Modal (Web Component)
• Input Number (HTML/CSS Component)
• List Button (HTML/CSS Component)

Card: Opsplitsen naar Card, Plekinfo Card en Document Card​

Een aangepaste Card is de oorzaak van deze breaking release! De bestaande Card is 'uitgekleed' of 'slanker' gemaakt. Het 'surplus aan kleding' of 'overgewicht' is overgeheveld naar twee nieuwe Web Componenten: PlekinfoCard en DocumentCard.

Pagination: aanpassingen t.b.v. toegankelijkheid​

In deze breaking release is binnen het component Pagination een <nav> element om de <ul> geplaatst met aria-label="Paginering". Daarnaast heeft het laatste item van de paginering de alleen voor screenreaders 'zichtbare' aanduiding "(laatste pagina)" gekregen.

In deze breaking release is binnen het component Accordion de (optioneel) te tonen Badge component vervangen door een Label en zijn kleine verbeteringen aan het formulier doorgevoerd.

In deze breaking release is het legacy HTML/CSS Component Panel verwijderd, en zijn kleine verbeteringen aan het formulier doorgevoerd.

Breaking change​

In deze release is de ondersteuning voor Angular 15 komen te vervallen. Vanaf deze release ondersteunt DSO Toolkit Angular versies 16, 17 en 18.

In deze release zijn twee nieuwe features aan het Logo component toegevoegd, die op zich niet breaking zijn, maar toch een toelichting behoeven.

In deze release is een bug in de Modal opgelost waardoor in sommige gevallen de modal in een viewport onder 768px breedte verdween.

In deze release is een regressie bug in de Date Picker opgelost die in v60.0.0 is geintroduceerd.

Date Picker​

Het change event dsoDateChange van <dso-date-picker> moet de value als dd-mm-jjjj emitten. In versie v60.0.0 is dit per abuis jjjj-mm-dd geworden. In #2391 is dit opgelost en is de output format weer dd-mm-jjjj.

Tegelijkertijd hebben we #2380 Date Picker: Bij handmatige invoer van datum buiten min/max, geen event met error opgelost. Dit betekent dat event.error weer klopt. Met de komst van <input type="date"> in het Web Component is dit ook een erg beperkte API gebleven. Daarom hebben we de API uitgebreid met het validatieobject van de browser validity: ValidityState.

export interface DatePickerChangeEvent {
  component: "dso-date-picker";
  originalEvent: Event;
  value: string;
  valueAsDate: Date | undefined;
  error?: "required" | "min-range" | "max-range" | "invalid";

  // Nieuw
  validity: ValidityState;
}

Selectable​

Het SelectableChangeEvent was voorheen een alias voor Event. Dit was verwarrend en we hebben dit gelijkgetrokken met de overige events:

// ❌ Oud
interface SelectableChangeEvent extends Event {}

// ✅ Nieuw
export interface SelectableChangeEvent {
  originalEvent: Event;
  checked: boolean;
}

Voor het één-op-één migratiepad geldt dat het vorige DsoSelectableCustomEvent<SelectableChangeEvent>.detail object nu op DsoSelectableCustomEvent<SelectableChangeEvent>.detail.originalEvent staat:

event.detail === event.detail.originalEvent;

Voor de afnemers die de checked state willen weten kunnen ook gebruik maken van DsoSelectableCustomEvent<SelectableChangeEvent>.detail.checked:

event.detail.target.checked === event.detail.checked;