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;

🚨 Breaking release! We hebben een nieuw component erbij: het logo! Je kunt nu door middel van dit component gemakkelijk een smal logo in de header plaatsen. Om te laten zien hoe dat werkt hebben we het header component in Storybook ook aangepast. De wijzigingen in het logo maken dit een breaking change.

Logo​

In de oude situatie gaf je één of twee statische afbeeldingen door aan het header component. Een afbeelding voor het logo (een afbeelding van het beeldmerk en het woordmerk) en een afbeelding met daarin de applicatienaam.

In het component laden we nu alleen het beeldmerk als afbeelding in (als inline SVG), en komen het woordmerk, de 'ribbon' en de applicatienaam terug als tekst. Dit maakt het gebruik van het logo flexibeler en toegankelijker, en bovendien konden we het bepaald gewenst responsive gedrag meegeven.

Vanaf nu kun je op deze manier het logo tonen in je applicatie:

<dso-logo label="Regels op de kaart" ribbon="beta"></dso-logo>

De applicatienaam geven we mee als label op het dso-logo component. Dit label is optioneel.

Het 'beta' blokje dat in deze fase op het logo staat kan worden ingezet door het logo component het attribuut ribbon mee te geven met de gewenste tekst. Zo kunnen we het logo straks ook gebruiken om visueel te communiceren dat we bijvoorbeeld op de pre- of acceptatie omgeving zijn. Ook dit attribuut is optioneel.

Afgesproken is om voor voornoemde gebruik steeds de prefix van de omgeving te gebruiken:

Opgelet: de header verandert ook​

Om het logo in het header component te plaatsen en goed te laten zien, is ook het header component aangepast. Er is nu geen sub-logo slot meer.

❌
<dso-header>
  <div slot="logo">
    <img alt="Omgevingsloket" src="LOGO" />
  </div>
  <img slot="sub-logo" alt="Regels op de kaart" src="LABEL" />
</dso-header>

✅
<dso-header>
  <div slot="logo">
    <dso-logo label="Regels op de kaart" ribbon="beta"></dso-logo>
  </div>
</dso-header>

Responsive gedrag​

Het nieuwe logo component wordt zo breed als nodig, maar als er niet genoeg ruimte is krimpt het vanzelf.

Op beeldschermen waar er genoeg ruimte is om het hoofdmenu volledig te tonen, ziet de bezoeker het beeldmerk, de tekst 'Omgevingsloket' met een beta ribbon, en de applicatienaam. In dit geval de tekst 'Maatregelen op maat'.

Als het scherm minder breed is, bijvoorbeeld bij tablets, verdwijnt de tekst Omgevingsloket en wordt alleen de applicatienaam Maatregelen op maat getoond. Deze tekst lijnt uit met een knop waarmee het menu kan worden geopend.

Op kleine telefoons waar de applicatienaam niet op één regel past, wordt de tekst vanzelf verdeeld over twee regels. De tekst blijft verticaal gecentreerd uitgelijnd ten opzichte van het logo.