In deze release introduceren we een nieuwe set iconen. Alle iconen zijn nu op een 4px grid gebouwd. We hebben ook iconen verwijderd, hernoemd en toegevoegd.
Daarnaast is de Angular-integratie verbeterd: builds falen nu correct bij niet-kloppende props op DSO Toolkit componenten.
De HTML/CSS implementatie van het component Label is in 𧽠Release 79.0.0 deprecated. In deze
release is deze implementatie verwijderd.
Gebruik de Core implementatie van Label.
β
<span class="dso-label dso-label-primary">Label content</span>
β
<dso-label status="primary">Label content</dso-label>
β
<dso-accordion-section icon="[Oud]" ...></dso-accordion-section>
<dso-icon icon="[Oud]"></dso-icon>
<dso-icon-button icon="[Oud]" ...></dso-icon-button>
β
<dso-accordion-section icon="[Nieuw]" ...></dso-accordion-section>
<dso-icon icon="[Nieuw]"></dso-icon>
<dso-icon-button icon="[Nieuw]" ...></dso-icon-button>
| Oud | Nieuw |
|---|---|
| angle-down | chevron-down |
| angle-left | chevron-left |
| angle-right | chevron-right |
| angle-up | chevron-up |
| Oud | Nieuw |
|---|---|
| air | weather |
| balloon | balloon-outline |
| clock | clock-outline |
| copy | copy-outline |
| mail-outline | |
| help-active | help-solid |
| help | help-outline |
| house | home |
| info-active | info-solid |
| info | info-outline |
| location-outline | location-orange |
| postcard | |
| minus-circle | minus-circle-outline |
| minus-square | minus-square-outline |
| more | more-horizontal |
| plus-circle | plus-circle-outline |
| plus-square | plus-square-outline |
| procedures | settings |
| safety | security |
| status-danger | status-warning-red-solid |
| status-info | status-info-solid |
| status-warning-inline | status-warning-red-solid |
| status-warning-inline-negative | status-warning-red-outline |
| table | table-outline |
| times | cross |
| user-line | user-outline |
| user | user-solid |
| wip-wip | wip |
| Nieuw |
|---|
| balloon-solid |
| caret-up |
| chevron-down-down |
| chevron-down-up |
| chevron-up-down |
| chevron-up-up |
| clock-solid |
| copy-solid |
| internet |
| mail-solid |
| map |
| minus-circle-solid |
| minus-square-solid |
| more-vertical |
| pause |
| play |
| plus-circle-solid |
| plus-square-solid |
| question |
| share |
| status-forbidden |
| status-info-outline |
| stop |
| table-solid |
| user-solid |
De Angular output target gebruikt nu inlineProperties. Hierdoor controleert de Angular Language Service (en daarmee ook de build) of properties op DSO Toolkit componenten correct zijn gebruikt.
Voorheen werden fouten in component properties alleen runtime in de browserconsole gemeld. Vanaf nu worden deze fouten al tijdens de build gedetecteerd.
Angular-projecten die DSO Toolkit componenten gebruiken met onjuiste properties zullen nu een build-error krijgen. Dit is gewenst gedrag: fouten worden eerder ontdekt in plaats van stilzwijgend genegeerd.
Controleer na het updaten of je Angular-project nog succesvol bouwt. Eventuele build-fouten wijzen op properties die niet (meer) bestaan of een verkeerd type hebben. Corrigeer deze aan de hand van de foutmeldingen.
]]>Legend Item is opgegaan in Legend en mag alleen nog worden gebruikt binnen een dso-legend-group. Elke dso-legend-group beheert de groepskop en de edit/view-modus van zijn onderliggende dso-legend-item elementen.
Voorheen werden groepskoppen als dso-legend-item met een <h3 slot="label"> gerenderd. Er was geen concept van groepering, edit/view-modus of verwijderfunctionaliteit.
Nu worden dso-legend-item elementen geplaatst in een dso-legend-group. De groepskop wordt via het heading-slot van dso-legend-group meegegeven. dso-legend-group beheert de mode ("edit" | "view") van zijn onderliggende items.
dso-legend-groupβ| Property / Slot | Beschrijving |
|---|---|
mode | "edit" | "view" β Schakelt de modus van de groep en cascadeert naar onderliggende dso-legend-item elementen. Wanneer niet gezet wordt er geen edit/view icoon getoond. |
dsoLegendGroupModeChange | Event dat wordt geΓ«mit wanneer de gebruiker de modus wijzigt. Bevat { next: LegendMode, originalEvent: MouseEvent }. |
heading slot | De groepskop. Verwacht een <h3 slot="heading">...</h3>. |
options slot | Controls die alleen in edit-modus zichtbaar zijn (bijv. dso-input-range voor transparantie). Gebruik <div slot="options">...</div>. |
dso-legend-itemβ| Property / Event | Beschrijving |
|---|---|
dsoDelete | Event dat wordt geΓ«mit wanneer de gebruiker op de verwijderknop klikt (zichtbaar in edit-modus). |
De mode van een dso-legend-item wordt intern beheerd door de bovenliggende dso-legend-group en hoeft niet handmatig gezet te worden.
dso-legend-item met <h3> β dso-legend-groupβGroepskoppen die voorheen als dso-legend-item met een <h3 slot="label"> werden gerenderd, worden nu als dso-legend-group met een <h3 slot="heading"> weergegeven. De bijbehorende items worden als children in de groep geplaatst.
β
<dso-legend>
<dso-legend-item>
<h3 slot="label">Geselecteerde kenmerken</h3>
</dso-legend-item>
<dso-legend-item>
<span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
<span slot="label">Bomen kappen</span>
</dso-legend-item>
<dso-legend-item>
<span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
<span slot="label">Acculader in werking</span>
</dso-legend-item>
</dso-legend>
β
<dso-legend>
<dso-legend-group>
<h3 slot="heading">Geselecteerde kenmerken</h3>
<dso-legend-item>
<span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
<span slot="label">Bomen kappen</span>
</dso-legend-item>
<dso-legend-item>
<span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
<span slot="label">Acculader in werking</span>
</dso-legend-item>
</dso-legend-group>
</dso-legend>
dso-rich-content wrapper verwijderenβDe <div class="dso-rich-content"> wrapper binnen dso-legend is niet meer nodig en mag niet meer gebruikt worden. De content wordt direct in dso-legend geplaatst.
β
<dso-legend>
<div class="dso-rich-content">
<dso-legend-group>
<h3 slot="heading">Geselecteerde kenmerken</h3>
...
</dso-legend-group>
</div>
</dso-legend>
β
<dso-legend>
<dso-legend-group>
<h3 slot="heading">Geselecteerde kenmerken</h3>
...
</dso-legend-group>
</dso-legend>
Om de edit/view-modus te activeren, zet mode op de dso-legend-group. De groep cascadeert deze modus automatisch naar alle onderliggende dso-legend-item elementen. Luister naar dsoLegendGroupModeChange om de modus te wijzigen. Wanneer mode niet wordt meegegeven, wordt er geen edit/view icoon getoond in de groepskop.
In edit-modus toont elk dso-legend-item een verwijderknop. Luister naar het dsoDelete event om hierop te reageren.
mode="view")β<dso-legend>
<dso-legend-group mode="view">
<h3 slot="heading">Geselecteerde kenmerken</h3>
<dso-legend-item>
<span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
<span slot="label">Bomen kappen</span>
</dso-legend-item>
</dso-legend-group>
</dso-legend>
mode="edit")βWanneer de gebruiker naar edit-modus schakelt via het potloodicoon, emit dso-legend-group het dsoLegendGroupModeChange event. Na het updaten van mode naar "edit" toont elk item een verwijderknop die bij klik het dsoDelete event emit. Daarnaast wordt de inhoud van het options-slot zichtbaar (bijv. een transparantieregelaar):
<dso-legend>
<dso-legend-group mode="edit">
<h3 slot="heading">Geselecteerde kenmerken</h3>
<div slot="options">
<label>Zichtbaarheid</label>
<dso-input-range label="Transparantie" unit="%"></dso-input-range>
</div>
<dso-legend-item>
<span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
<span slot="label">Bomen kappen</span>
</dso-legend-item>
</dso-legend-group>
</dso-legend>
Info Button het dsoToggle event, zolang het slot name="toggletip" niet is gevuld.slot name="toggletip" is toegevoegd om de Toggletip functionaliteit door Info Button te laten
verzorgen. Wanneer dit slot is gevuld, neemt de Info Button het tonen en verbergen van de Toggletip over op
basis van klik op de Info Button. Dit is nieuwe optionele functionaliteit; bestaande implementaties zonder dit
slot blijven werken zoals voorheen.<dso-info-button label="Toelichting bij vraag">
<div slot="toggletip">
<div class="dso-rich-content">
<h2>Samenspel tussen wetgever en ontwikkelaars</h2>
<p>
Het DSO wordt ontwikkeld door het programma
<a href="https://aandeslagmetdeomgevingswet.nl/digitaal-stelsel/">Aan de slag met de Omgevingswet</a>
in samenwerking met haar partners. De ontwikkeling vraagt een intensief samenspel tussen de wetgever en de
ontwikkelpartners van het DSO. Enerzijds moeten wetgever en de ontwikkelpartners zorgen dat alles wat in de wet-
en regelgeving wordt geregeld ook makkelijk toegankelijk is of kan worden. Anderzijds moeten zij zorgen dat
alles wat digitaal wordt gerealiseerd, ook juridisch verankerd is of kan worden.
</p>
</div>
</div>
</dso-info-button>
De properties bevatOntwerpInformatie en genesteOntwerpInformatie zijn verwijderd. Hiervoor in de plaats zijn de generieke properties label, labelStatus, badge, badgeStatus en badgeTooltip gekomen.
Voorheen was de "Ontwerp"-status hardcoded in het component: bevatOntwerpInformatie toonde altijd een geel "Ontwerp" label en genesteOntwerpInformatie toonde altijd een waarschuwingsbadge. Met deze wijziging kan de afnemer zelf de tekst, status en tooltip instellen. Dit maakt het component geschikt voor meerdere scenario's, zoals "Ontwerp" en "Besluitversie".
bevatOntwerpInformatie)βDe property bevatOntwerpInformatie is vervangen door label en labelStatus. Waar voorheen het component zelf het label "Ontwerp" renderde, geeft de afnemer nu expliciet de tekst en kleur mee.
β
<dso-document-component bevat-ontwerp-informatie></dso-document-component>
β
<dso-document-component label="Ontwerp" label-status="warning"></dso-document-component>
genesteOntwerpInformatie)βDe property genesteOntwerpInformatie is vervangen door badge, badgeStatus en badgeTooltip. Waar voorheen het component automatisch een "!" badge met tooltip toonde, geeft de afnemer nu zelf de badge-inhoud, kleur en tooltip mee.
β
<dso-document-component geneste-ontwerp-informatie></dso-document-component>
β
<dso-document-component
badge="!"
badge-status="warning"
badge-tooltip="Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp."
></dso-document-component>
Door de generieke opzet is het nu ook mogelijk om andere statussen weer te geven:
<dso-document-component
label="Besluitversie"
label-status="primary"
badge="B"
badge-status="primary"
badge-tooltip="Dit onderdeel bevat een besluitversie."
></dso-document-component>
Waar voorheen de Badge's aan het eind van het slot="status" werden geplaatst, worden de Badge's nu in het slot="interactions" geplaatst.
β
<dso-document-card href="#">
<h2 slot="heading">Omgevingsplan Amsterdam</h2>
<div slot="meta">
<dso-label status="warning" compact="">Ontwerp</dso-label>
</div>
<div slot="type">
<span class="dso-document-card-type-item">Omgevingsplan</span>
<span class="dso-document-card-type-item">Gemeente Amsterdam</span>
</div>
<div slot="status">
Vastgesteld 07-06-2024 - geheel onherroepelijk in werking
<dso-badge status="outline">!</dso-badge>
<dso-badge status="warning">!</dso-badge>
</div>
</dso-document-card>
β
<dso-document-card href="#">
<h2 slot="heading">Omgevingsplan Amsterdam</h2>
<div slot="type">
<span class="dso-document-card-type-item">Omgevingsplan</span>
<span class="dso-document-card-type-item">Gemeente Amsterdam</span>
</div>
<span slot="meta">
<dso-label status="warning" compact="">Ontwerp</dso-label>
</span>
<span slot="status">Vastgesteld 07-06-2024 - geheel onherroepelijk in werking</span>
<span slot="interactions">
<dso-badge status="outline">!</dso-badge>
<dso-badge status="warning">!</dso-badge>
</span>
</dso-document-card>
Daarnaast is in deze release de ondersteuning voor Angular 18 komen te vervallen. Vanaf deze release ondersteunt DSO Toolkit Angular versies 19, 20 en 21.
Er was een probleem met de toegankelijkheid van een activatable Legend Item: het aria-label van de Slide Toggle
button met role="switch" was niet gekoppeld aan het label van het Legend Item. Dit hebben we nu verholpen.
Daardoor is het vanaf nu voorgeschreven dat het label in een span met attribuut slot="label" wordt geplaatst,
zodat Legend Item via de property accessibleLabel van de Slide Toggle het aria-label van de button op de
voorgeschreven manier kan vullen.
Plaats het label dat voorheen zonder HTML markup in het anonieme slot werd geplaatst voortaan in en span met
attribuut slot="label".
β
<dso-legend-item>
<span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span> Legenda item label
<div slot="options"><dso-input-range label="Transparantie" unit="%"></dso-input-range></div>
</dso-legend-item>
β
<dso-legend-item>
<span slot="symbol"><span class="symboolcode" data-symboolcode="regelingsgebied"></span></span>
<span slot="label">Legenda item label</span>
<div slot="options"><dso-input-range label="Transparantie" unit="%"></dso-input-range></div>
</dso-legend-item>
Het slot="meta" is verwijderd. Het Label dat voorheen in het slot="meta" stond is nu verplaatst naar het begin van het slot="status".
β
<dso-document-card href="#">
<h2 slot="heading">Omgevingsplan Amsterdam</h2>
<div slot="type">
<span class="dso-document-card-type-item">Omgevingsplan</span>
<span class="dso-document-card-type-item">Gemeente Amsterdam</span>
</div>
<div slot="status">
Vastgesteld 07-06-2024 - geheel onherroepelijk in werking
<dso-badge status="outline">!</dso-badge>
<dso-badge status="warning">!</dso-badge>
</div>
</dso-document-card>
β
<dso-document-card href="#">
<h2 slot="heading">Omgevingsplan Amsterdam</h2>
<div slot="type">
<span class="dso-document-card-type-item">Omgevingsplan</span>
<span class="dso-document-card-type-item">Gemeente Amsterdam</span>
</div>
<span slot="status"> Vastgesteld 07-06-2024 - geheel onherroepelijk in werking</span>
<span slot="interactions">
<dso-badge status="outline">!</dso-badge>
<dso-badge status="warning">!</dso-badge>
</span>
</dso-document-card>
De property suggestOnFocus is verwijderd. Het gedrag dat de voorgaande suggesties opnieuw getoond worden, wanneer de
invoer weer de focus krijgt, is nu het standaard gedrag bij meer dan 1 suggestie.
β
<dso-autosuggest suggest-on-focus>
<input id="autosuggestInputId" type="text" class="form-control" />
</dso-autosuggest>
β
<dso-autosuggest>
<input id="autosuggestInputId" type="text" class="form-control" />
</dso-autosuggest>
In deze release is het volgende component deprecated:
In π Release 78.0.0 is het component Progress Bar deprecated. Dit component bleek niet meer in gebruik te zijn. In deze release is dit component verwijderd.
β
<div class="progress">
<span
class="progress-bar"
role="progressbar"
aria-labelledby="progress-bar-label"
aria-valuenow="60"
aria-valuemin="0"
aria-valuemax="100"
>
<span style="width: 60%"></span>
</span>
<span id="progress-bar-label">Genereren export: nog ongeveer 4 minuten.</span>
</div>
β <dso-progress-bar progress="60">Genereren export: nog ongeveer 4 minuten.</dso-progress-bar>
Het HTML/CSS component Document List werd niet meer gebruikt. Daarom hebben we het in deze release verwijderd.
De HTML/CSS implementatie van het component Progress Indicator is in π Release 81.0.0 deprecated. In deze
release is deze implementatie verwijderd.
Gebruik de Core implementatie van Progress Indicator.
β
<div class="dso-progress-indicator dso-medium">
<span class="dso-progress-indicator-spinner" role="progressbar" aria-labelledby="progress-indicator-label"></span>
<span id="progress-indicator-label" class="dso-progress-indicator-label">
Resultaten laden: een moment geduld alstublieft.
</span>
</div>
β
<dso-progress-indicator size="medium"></dso-progress-indicator>
De HTML/CSS implementatie van het component Card is in π Release 80.0.0 deprecated. In deze
release is deze implementatie verwijderd.
Gebruik de Core implementatie van Card.
β
<div class="dso-card">
<div class="dso-card-container">
<div class="dso-card-heading">
<a href="#">
<h2>
<span id="card-title">Omgevingsplan Nieuwegein</span>
<!-- START DEPRECATED --><svg class="di di-chevron-right">
<use href="#chevron-right"></use></svg
><!-- END DEPRECATED -->
</h2>
</a>
</div>
<div class="dso-rich-content"><p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p></div>
</div>
</div>
β
<dso-card href="#">
<h2 slot="heading" id="card-title">Omgevingsplan Nieuwegein</h2>
<div class="dso-rich-content" slot="content">
<p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p>
</div>
</dso-card>
De HTML/CSS implementatie van het component Dropdown Menu is deprecated. In een toekomstige BREAKING release zal de
HTML/CSS implementatie verwijderd worden.
Gebruik de Core implementatie van Dropdown Menu.
β
<div class="dso-dropdown-menu dso-open">
<button type="button" id="0d47f401-0f17-4192-9dc7-10ecb5b1beee" class="dso-secondary">
<span>Opties</span>
</button>
<div class="dso-dropdown-options" role="menu" aria-labelledby="0d47f401-0f17-4192-9dc7-10ecb5b1beee">
<ul role="group" aria-labelledby="">
<li role="none">
<button type="button" role="menuitem">Bewerken</button>
</li>
<li role="none">
<button type="button" role="menuitem">Verwijderen</button>
</li>
</ul>
</div>
</div>
β
<dso-dropdown-menu dropdown-align="left">
<button type="button" id="6120c29d-e6d6-493c-b020-e2f77afe32de" class="dso-secondary" slot="toggle">
<span>Opties</span>
</button>
<div class="dso-dropdown-options" aria-labelledby="6120c29d-e6d6-493c-b020-e2f77afe32de">
<ul>
<li>
<button type="button">Bewerken</button>
</li>
<li>
<button type="button">Verwijderen</button>
</li>
</ul>
</div>
</dso-dropdown-menu>
Deze release bevat een deprecation voor het volgende component:
De HTML/CSS implementatie van het component Selectable is in π Release 78.0.0 deprecated. In deze
release is deze implementatie verwijderd.
Gebruik de Core implementatie van Selectable.
β
<div class="dso-selectable">
<input type="checkbox" id="1234" value="the-value" aria-invalid="false" />
<script>
document.getElementById("1234").indeterminate = false;
</script>
<label for="1234">Label</label>
<div class="dso-info">
<div class="dso-rich-content" slot="info">
<p>Rijke inhoud</p>
<p>Ziet er zo uit</p>
<ul>
<li>Lijstjes</li>
</ul>
<p>Kan allemaal</p>
</div>
</div>
</div>
β
<dso-selectable type="checkbox" identifier="1234" value="the-value">
Label
<div class="dso-rich-content" slot="info">
<p>Rijke inhoud</p>
<p>Ziet er zo uit</p>
<ul>
<li>Lijstjes</li>
</ul>
<p>Kan allemaal</p>
</div>
</dso-selectable>
De HTML/CSS implementatie van het component Accordion is in π¦ Release 78.1.0 deprecated. In deze
release is deze implementatie verwijderd.
Gebruik de Core implementatie van Accordion.
β
<div class="dso-accordion">
<div class="dso-accordion-section dso-open">
<h2 class="dso-section-handle">
<button type="button" aria-expanded="true">
Is het verplicht om de Vergunningcheck te doen?
<div class="dso-section-handle-addons">
<span class="dso-label dso-label-attention dso-compact"> Attentie </span>
</div>
</button>
</h2>
<div class="dso-section-body">
<p>
Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
heeft of melding moet doen.
</p>
<p>
Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
dan meegenomen in de aanvraag of melding.
</p>
</div>
</div>
</div>
β
<dso-accordion>
<dso-accordion-section
heading="h2"
handle-title="Is het verplicht om de Vergunningcheck te doen?"
label="Attentie"
label-status="attention"
open
>
<p>
Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
heeft of melding moet doen.
</p>
<p>
Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
dan meegenomen in de aanvraag of melding.
</p>
</dso-accordion-section>
</dso-accordion>
De HTML/CSS implementatie van het component Modal is deprecated. In een toekomstige BREAKING release zal de
HTML/CSS implementatie verwijderd worden.
Gebruik de Core implementatie van Modal.
β
<dialog aria-modal="true" class="dso-modal" role="alertdialog" aria-labelledby="c7934734-e6aa-4d9c-a76c-32dde50fe078">
<div class="dso-dialog" role="document">
<div class="dso-header">
<h2 id="c7934734-e6aa-4d9c-a76c-32dde50fe078">Verwijderen werkzaamheid</h2>
<button type="button" class="dso-close">
<span class="sr-only">Sluiten</span>
</button>
</div>
<dso-scrollable>
<div class="dso-body" tabindex="0">
<p>
U wilt de werkzaamheid <strong>Dakkapel plaatsen, vervangen of veranderen</strong> verwijderen. Uw antwoorden
op de vragen worden dan ook verwijderd. Wilt u doorgaan?
</p>
</div>
</dso-scrollable>
<div class="dso-footer">
<button type="button" class="dso-tertiary">
<span>Annuleren</span>
</button>
<button type="button" class="dso-secondary">
<span>Secundaire actie</span>
</button>
<button type="button" class="dso-primary">
<span>Bevestigen</span>
</button>
</div>
</div>
</dialog>
β
<dso-modal dialog-role="alertdialog" modal-title="Verwijderen werkzaamheid" closable="">
<div slot="body">
<p>
U wilt de werkzaamheid <strong>Dakkapel plaatsen, vervangen of veranderen</strong> verwijderen. Uw antwoorden op
de vragen worden dan ook verwijderd. Wilt u doorgaan?
</p>
</div>
<div slot="footer">
<button type="button" class="dso-tertiary">
<span>Annuleren</span>
</button>
<button type="button" class="dso-secondary">
<span>Secundaire actie</span>
</button>
<button type="button" class="dso-primary">
<span>Bevestigen</span>
</button>
</div>
</dso-modal>
Deze release bevat een deprecation voor de volgende componenten:
Het component Date Picker (Legacy) is in π¦ Release 78.1.0 deprecated. In deze release is dit component verwijderd.
β
<dso-date-picker-legacy></dso-date-picker-legacy>
De HTML/CSS implementatie van het component Icon is in π¦ Release 78.1.0 deprecated. In deze release is deze implementatie verwijderd.
Gebruik de Core implementatie van Icon.
β
<svg class="di di-user">
<use href="#user"></use>
</svg>
β
<dso-icon icon="user"></dso-icon>
Het Event dsoOzonContentAnchorClick is vervangen door dsoOzonContentClick. (Zie ook de BREAKING change aan het component Ozon Content in deze release).
De Ozon Content dsoAnchorClick event handler is komen te vervallen. Het gedrag van deze event handler is
ondergebracht in dsoClick. Daarnaast is de event handler dsoClick uitgebreid met de nieuwe link types
IntIoRef en IntRef.
Er is geen uitgestippeld migratiepad. Hoogstwaarschijnlijk wil je als high-level afnemer gebruik maken van Document Component. Ozon Content kan gezien worden als een "Low Level component".
STOP elementen IntRef werden voorheen geparsed tot <a href="#<waarde-van-ref-attribuut>">. De waarde in het href attribuut wordt nu gegenereerd via de urlResolver. Dit maakt het mogelijk om de gegenereerde URL aan te passen.
Onderstaande voorbeeld implementatie geeft het oude gedrag. Dit wordt niet aangeraden en staat er slechts ter verduidelijking. Het is de bedoeling dat de urlResolver dezelfde functie teruggeeft als die de click handler in de router zet.
function urlResolver(
name: "ExtIoRef" | "ExtRef" | "IntIoRef" | "IntRef",
attribute: "ref",
value: string | null,
element: Element,
): string {
if (name === "IntRef" && value) {
return `#${value}`;
}
// [..]
}
De HTML/CSS implementatie van het component Badge is deprecated. In een toekomstige BREAKING release zal dit
component verwijderd worden.
Gebruik de Core implementatie van Badge.
β
<span class="dso-badge badge-attention">Attention</span>
β
<dso-badge status="attention">Attention</dso-badge>
De HTML/CSS implementatie van het component Progress Indicator is deprecated. In een toekomstige BREAKING release zal dit
component verwijderd worden.
Gebruik de Core implementatie van Progress Indicator.
β
<div class="dso-progress-indicator dso-medium">
<span class="dso-progress-indicator-spinner" role="progressbar" aria-labelledby="progress-indicator-label"></span>
<span id="progress-indicator-label" class="dso-progress-indicator-label">
Resultaten laden: een moment geduld alstublieft.
</span>
</div>
β
<dso-progress-indicator size="medium"></dso-progress-indicator>
Deze release bevat een deprecation voor het volgende component:
gereserveerd is vervangen met een XMLDocument of string i.p.v. een boolean.vervallen is vervangen met een XMLDocument of string i.p.v. een boolean.De property gereserveerd accepteert nu een XML-string of een XMLDocument. Dit maakt het mogelijk om een optionele wijzigactie (voegtoe of verwijder) mee te geven, zoals voorgeschreven door STOP:
β
<dso-document-component gereserveerd></dso-document-component>
β
<dso-document-component gereserveerd="<Gereserveerd wijzigactie='verwijder'></Gereserveerd>"></dso-document-component>
<dso-document-component gereserveerd="<Gereserveerd wijzigactie='voegtoe'></Gereserveerd>"></dso-document-component>
<dso-document-component gereserveerd="<Gereserveerd></Gereserveerd>"></dso-document-component>
Hetzelfde geldt voor vervallen. Ook deze property accepteert nu een XML-string of een XMLDocument, met een optionele wijzigactie:
β
<dso-document-component vervallen></dso-document-component>
β
<dso-document-component vervallen="<Vervallen wijzigactie='verwijder'></Vervallen>"></dso-document-component>
<dso-document-component vervallen="<Vervallen wijzigactie='voegtoe'></Vervallen>"></dso-document-component>
<dso-document-component vervallen="<Vervallen></Vervallen>"></dso-document-component>
De HTML/CSS implementatie van het component Card is deprecated. In een toekomstige BREAKING release zal dit
component verwijderd worden.
Gebruik de Core implementatie van Card.
β
<div class="dso-card">
<div class="dso-card-container">
<div class="dso-card-heading">
<a href="#">
<h2>
<span id="card-title">Omgevingsplan Nieuwegein</span>
<!-- START DEPRECATED --><svg class="di di-chevron-right">
<use href="#chevron-right"></use></svg
><!-- END DEPRECATED -->
</h2>
</a>
</div>
<div class="dso-rich-content"><p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p></div>
</div>
</div>
β
<dso-card href="#">
<h2 slot="heading" id="card-title">Omgevingsplan Nieuwegein</h2>
<div class="dso-rich-content" slot="content">
<p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p>
</div>
</dso-card>
Deze release bevat een deprecation voor het volgende component:
Het HTML/CSS component Breadcrumbs maakte nog ten onrechte gebruik van de class name in enkelvoud: breadcrumb.
Daarnaast ontbrak de prefix dso- in de class name. Dat hebben we in deze release gecorrigeerd. De class name is
geworden dso-breadcrumbs
Vervang de class name breadcrumb door dso-breadcrumbs.
β
<ol class="breadcrumb">
[..]
</ol>
β
<ol class="dso-breadcrumbs">
[..]
</ol>
De property useDropDownMenu is hernoemd, de mogelijke waarden zijn gelijk gebleven.
β
<dso-header useDropDownMenu="always|auto"></dso-header>
β
<dso-header compact="always|auto"></dso-header>
Het HTML/CSS component Label is deprecated. In een toekomstige BREAKING release zal dit component verwijderd
worden.
Gebruik de Core implementatie van Label.
β
<span class="dso-label dso-label-primary dso-compact">
<span class="dso-label-symbol">[...]</span>
LABEL
<button type="button">
<span class="sr-only">Verwijder</span>
<dso-icon icon="times"></dso-icon>
</button>
</span>
β
<dso-label status="primary" compact removable>
<!-- event listener onDsoRemoveClick -->
<span slot="symbol">[...]</span>
LABEL
</dso-label>
Het HTML/CSS component Icon is deprecated. In een toekomstige BREAKING release zal dit component verwijderd
worden.
Gebruik de Core implementatie van Icon.
β
<svg class="di di-user">
<use href="#user"></use>
</svg>
β
<dso-icon icon="user"></dso-icon>
Het Date Picker (Legacy) component is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.
Gebruik het Date Picker component.
β
<dso-date-picker-legacy></dso-date-picker-legacy>
β
<dso-date-picker></dso-date-picker>
Het HTML/CSS component Accordion is deprecated. In een toekomstige BREAKING release zal dit component verwijderd
worden.
Gebruik de Core implementatie van Accordion.
β
<div class="dso-accordion">
<div class="dso-accordion-section dso-open">
<h2 class="dso-section-handle">
<button type="button" aria-expanded="true">
Is het verplicht om de Vergunningcheck te doen?
<div class="dso-section-handle-addons">
<span class="dso-label dso-label-attention dso-compact"> Attentie </span>
</div>
</button>
</h2>
<div class="dso-section-body">
<p>
Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
heeft of melding moet doen.
</p>
<p>
Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
dan meegenomen in de aanvraag of melding.
</p>
</div>
</div>
</div>
β
<dso-accordion>
<dso-accordion-section
heading="h2"
handle-title="Is het verplicht om de Vergunningcheck te doen?"
label="Attentie"
label-status="attention"
open
>
<p>
Nee, de Vergunningcheck is niet verplicht. Het is een hulpmiddel waarmee u kunt zien of u een vergunning nodig
heeft of melding moet doen.
</p>
<p>
Wel kunt u meteen na de check een aanvraag of melding starten. Een aantal gegevens uit de Vergunningcheck wordt
dan meegenomen in de aanvraag of melding.
</p>
</dso-accordion-section>
</dso-accordion>
Het HTML/CSS component Whitebox is in π· Release 76.0.0 deprecated. In deze release is dit component verwijderd.
β
<div class="dso-whitebox">...</div>
De Pagination (HTML/CSS implementatie) wordt niet gebruikt. Daarom hebben we het in deze release verwijderd.
β
<nav class="pagination"></nav>
Het Web component Dropdown Menu maakte gebruik van de deprecated package popper-max-size-modifier@0.2.0 en
@popperjs/core. In deze release zijn beide vervangen door
floating-ui. Het koppelvlak is daarbij gewijzigd: de properties boundary, placement en strategy
zijn verwijderd. floating-ui regelt dit nu automatisch.
β
<dso-dropdown-menu boundary="..." placement="..." strategy="..." ...></dso-dropdown-menu>
β
<dso-dropdown-menu ...></dso-dropdown-menu>
Daarnaast is in deze release is de ondersteuning voor Angular 16 en 17 komen te vervallen. Vanaf deze release ondersteunt DSO Toolkit Angular versies 18, 19 en 20.
De deprecated properties label, nummer en opschrift zijn verwijderd. In versie πͺ 68.5.0 is de property kop geΓ―ntroduceerd. kop bevat label, nummer en opschrift.
β < 76.0.0
<dso-document-component label="..." nummer="..." opschrift="..." [...]></dso-document-component>
β
>= 76.0.0
<dso-document-component kop="..." [...]></dso-document-component>
Het Legend Item component is aangepast. Waar voorheen een checkbox aan de linkerkant werd getoond, die middels een
door de afnemer in het nameless slot te plaatsen Selectable werd gerealiseerd, toont het Legend Item nu altijd aan
de rechterkant een Slide Toggle, die middels een nieuwe boolean property active bediend kan worden. Het wijzigen
van de stand van de Slide Toggle vuurt nu een nieuw event af: dsoActiveChange. Daarnaast is de mogelijkheid om het
Legend Item te verwijderen komen te vervallen: daartoe zijn de property removable en het event dsoRemoveClick verwijderd.
β < 75.0.0
<dso-legend-item removable (dsoRemoveClick)="..." [...]></dso-legend-item>
β
>= 75.0.0
<dso-legend-item active (dsoActiveChange)="..." [...]></dso-legend-item>
In deze release is in het component banner de prop status aangepast. De status danger is komen te vervallen. De status success is toegevoegd.
Web component
β < 74.0.0
<dso-banner status="danger"></dso-banner>
β
>= 74.0.0
<dso-banner status="error"></dso-banner>
<dso-banner status="success"></dso-banner>
HTML/CSS component
β < 74.0.0
<section role="alert" class="dso-banner alert-danger dso-icon">
<div class="dso-banner-inner">
<div class="dso-rich-content">
<!-- inhoud banner -->
</div>
</div>
</div>
β
>= 74.0.0
<section role="alert" class="dso-banner alert-error dso-icon">
<div class="dso-banner-inner">
<div class="dso-rich-content">
<!-- inhoud banner -->
</div>
</div>
</div>
<section role="alert" class="dso-banner alert-success dso-icon">
<div class="dso-banner-inner">
<div class="dso-rich-content">
<!-- inhoud banner -->
</div>
</div>
</div>
In deze release is in het component modal de prop showCloseButton hernoemd naar closable die default op false staat. Het default gedrag van de Modal is veranderd. Voorheen waren alle Modals standaard sluitbaar, vanaf deze release zijn ze standaard niet-sluitbaar. Zie voor beide situaties onderstaand migratiepad:
De DSO Toolkit maakt gebruik van StencilJS voor het maken van Web Components. Zij raden het gebruik van default properties en attributes met default value true. Dit was het laatste attribuut met een default value true.
Sluitbaar:
β < 74.0.0
<dso-modal></dso-modal>
β
>= 74.0.0
<dso-modal closable></dso-modal>
Niet sluitbaar:
β < 74.0.0
<dso-modal show-close-button="false"></dso-modal>
β
>= 74.0.0
<dso-modal></dso-modal>
In deze release is in het component badge de status danger verwijderd inclusief de styling die daarbij hoort.
Als alternatief kan de status error worden gebruikt. Deze heeft dezelfde achtergrond en tekst kleur als de
danger status. Daarnaast is de kleur aangepast van de info status. Deze heeft nu een donkerblauwe achtergrond en
witte tekst.
Web component
β < 74.0.0
<dso-badge status="danger"></dso-badge>
β
>= 74.0.0
<dso-badge status="error"></dso-badge>
HTML/CSS component
β < 74.0.0
<span class="dso-badge badge-danger">Badge text</span>
β
>= 74.0.0
<span class="dso-badge badge-error">Badge text</span>
In deze release is in het component Label de status danger verwijderd inclusief de styling die daarbij hoort. Als alternatief kan de status error worden gebruikt. Deze heeft dezelfde achtergrond en tekst kleur als de danger status. Daarnaast is er een filter status toegevoegd. Deze heeft nu een donkerblauwe linker border, lichtblauw achtergrond en witte tekst.
Web component
β < 74.0.0
<dso-label status="danger"></dso-label>
β
>= 74.0.0
<dso-label status="error"></dso-label>
<dso-label status="filter"></dso-label>
HTML/CSS component
β < 74.0.0
<span class="dso-label dso-label-danger">Label</span>
β
>= 74.0.0
<span class="dso-label dso-label-error">Label</span>
<span class="dso-label dso-label-filter">Label</span>
De property mode is komen te vervallen. Alle functionaliteit die gekoppeld was aan mode=βvrkβ is verwijderd.
Alle functionaliteit die gekoppeld was aan mode=βvdkβ is nu de enig resterende functionaliteit. De events dsoMainSizeChange, dsoFilterpanelApply en dsoFilterpanelCancel worden niet meer ge-emit.
Daarnaast is de naamgeving van de properties filterpanel-title en filterpanel-open en het event
dsoCloseFilterpanel gecorrigeerd: deze zijn nu filter-panel-title, filter-panel-open en dsoCloseFilterPanel geworden.
β < 74.0.0
<dso-viewer-grid
mode="βvrk|vdkβ"
filterpanel-title="β...β"
filterpanel-open
(dsoMainSizeChange)="β...β"
(dsoCloseFilterpanel)="β...β"
(dsoFilterpanelApply)="β...β"
(dsoFilterpanelCancel)="β...β"
[...]
></dso-viewer-grid>
β
>= 74.0.0
<dso-viewer-grid filter-panel-title="β...β" filter-panel-open (dsoCloseFilterPanel)="β...β" [...]></dso-viewer-grid>
In deze release markeren we het Tooltip webcomponent als deprecated. Dit betekent dat het gebruik ervan wordt afgeraden in nieuwe implementaties. In een van de komende releases zal Tooltip worden vervangen door verbeterde alternatieven, zoals het nieuwe Icon Button Web Component of vernieuwde varianten van het Toggletip webcomponent.
]]>In deze release hebben we het component Anchor hernoemd naar Link. De HTML-structuur blijft ongewijzigd, maar het volgende is wel aangepast:
dso-toolkit/src/components/anchor/dso-toolkit/src/components/link/anchor.mixins.scsslink.mixins.scssanchor.scsslink.scssanchor.variables.scsslink.variables.scss$anchorIcons$linkIcons