@dso-toolkit/angular 89.0.0 → 90.0.0

package/fesm2022/dso-toolkit-angular.mjs

@@ -1,6 +1,6 @@
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, EventEmitter, Output, NgModule } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, HostListener, Directive, NgModule } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { defineCustomElement as defineCustomElement$1 } from '@dso-toolkit/core/dist/components/dso-accordion.js';
 import { defineCustomElement as defineCustomElement$2 } from '@dso-toolkit/core/dist/components/dso-accordion-section.js';
@@ -60,19 +60,21 @@ import { defineCustomElement as defineCustomElement$T } from '@dso-toolkit/core/
 import { defineCustomElement as defineCustomElement$U } from '@dso-toolkit/core/dist/components/dso-renvooi.js';
 import { defineCustomElement as defineCustomElement$V } from '@dso-toolkit/core/dist/components/dso-responsive-element.js';
 import { defineCustomElement as defineCustomElement$W } from '@dso-toolkit/core/dist/components/dso-scrollable.js';
-import { defineCustomElement as defineCustomElement$X } from '@dso-toolkit/core/dist/components/dso-selectable.js';
-import { defineCustomElement as defineCustomElement$Y } from '@dso-toolkit/core/dist/components/dso-skiplink.js';
-import { defineCustomElement as defineCustomElement$Z } from '@dso-toolkit/core/dist/components/dso-slide-toggle.js';
-import { defineCustomElement as defineCustomElement$_ } from '@dso-toolkit/core/dist/components/dso-survey-rating.js';
-import { defineCustomElement as defineCustomElement$$ } from '@dso-toolkit/core/dist/components/dso-tab.js';
-import { defineCustomElement as defineCustomElement$10 } from '@dso-toolkit/core/dist/components/dso-table.js';
-import { defineCustomElement as defineCustomElement$11 } from '@dso-toolkit/core/dist/components/dso-tabs.js';
-import { defineCustomElement as defineCustomElement$12 } from '@dso-toolkit/core/dist/components/dso-tijdreis-banner.js';
-import { defineCustomElement as defineCustomElement$13 } from '@dso-toolkit/core/dist/components/dso-toggletip.js';
-import { defineCustomElement as defineCustomElement$14 } from '@dso-toolkit/core/dist/components/dso-tooltip.js';
-import { defineCustomElement as defineCustomElement$15 } from '@dso-toolkit/core/dist/components/dso-tree-view.js';
-import { defineCustomElement as defineCustomElement$16 } from '@dso-toolkit/core/dist/components/dso-viewer-grid.js';
-import { defineCustomElement as defineCustomElement$17 } from '@dso-toolkit/core/dist/components/dsot-document-component-demo.js';
+import { defineCustomElement as defineCustomElement$X } from '@dso-toolkit/core/dist/components/dso-segmented-button.js';
+import { defineCustomElement as defineCustomElement$Y } from '@dso-toolkit/core/dist/components/dso-selectable.js';
+import { defineCustomElement as defineCustomElement$Z } from '@dso-toolkit/core/dist/components/dso-skiplink.js';
+import { defineCustomElement as defineCustomElement$_ } from '@dso-toolkit/core/dist/components/dso-slide-toggle.js';
+import { defineCustomElement as defineCustomElement$$ } from '@dso-toolkit/core/dist/components/dso-survey-rating.js';
+import { defineCustomElement as defineCustomElement$10 } from '@dso-toolkit/core/dist/components/dso-tab.js';
+import { defineCustomElement as defineCustomElement$11 } from '@dso-toolkit/core/dist/components/dso-table.js';
+import { defineCustomElement as defineCustomElement$12 } from '@dso-toolkit/core/dist/components/dso-tabs.js';
+import { defineCustomElement as defineCustomElement$13 } from '@dso-toolkit/core/dist/components/dso-tijdreis-banner.js';
+import { defineCustomElement as defineCustomElement$14 } from '@dso-toolkit/core/dist/components/dso-toggletip.js';
+import { defineCustomElement as defineCustomElement$15 } from '@dso-toolkit/core/dist/components/dso-tooltip.js';
+import { defineCustomElement as defineCustomElement$16 } from '@dso-toolkit/core/dist/components/dso-tree-view.js';
+import { defineCustomElement as defineCustomElement$17 } from '@dso-toolkit/core/dist/components/dso-viewer-grid.js';
+import { defineCustomElement as defineCustomElement$18 } from '@dso-toolkit/core/dist/components/dsot-document-component-demo.js';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /* eslint-disable */
 /* tslint:disable */
@@ -135,6 +137,18 @@ function ProxyCmp(opts) {
 let DsoAccordion = class DsoAccordion {
     z;
     el;
+    /**
+   * The variant of the Accordion.
+   */
+    set variant(_) { }
+    ;
+    /**
+   * Places the chevron at the opposite side.
+
+Note: this mode does not display `state`, `attachmentCount` or `status` props on Accordion Sections
+   */
+    set reverseAlign(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -162,6 +176,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAccordionSection = class DsoAccordionSection {
     z;
     el;
+    /**
+   * The title of the handle
+   */
+    set handleTitle(_) { }
+    ;
+    /**
+   * An optional 'wijzigactie' that signals if the section is added or removed.
+   */
+    set wijzigactie(_) { }
+    ;
+    /**
+   * Which heading element to use. @default "h2"
+   */
+    set heading(_) { }
+    ;
+    /**
+   * When set the handle will render as a `<a>`. When undefined it renders as a `<button>`
+   */
+    set handleUrl(_) { }
+    ;
+    /**
+   * `state` takes precedence over `attachmentCount` and `icon`
+   */
+    set status(_) { }
+    ;
+    /**
+   * `attachmentCount` takes precedence over `icon`
+   */
+    set attachmentCount(_) { }
+    ;
+    /**
+   * The alias of the icon in the heading handle.
+   */
+    set icon(_) { }
+    ;
+    /**
+   * The status of the section.
+   */
+    set statusDescription(_) { }
+    ;
+    /**
+   * Set the Accordion Section open. @default false
+   */
+    set open(_) { }
+    ;
+    /**
+   * Set when this Accordion Section contains or will contain an Accordion. @default false
+   */
+    set hasNestedAccordion(_) { }
+    ;
+    /**
+   * The label to be displayed in the heading handle inside a Label (optional)
+   */
+    set label(_) { }
+    ;
+    /**
+   * The status of the Label in the heading handle (optional)
+   */
+    set labelStatus(_) { }
+    ;
+    /**
+   * A boolean to indicate if the Accordion Section is capable of being activated. When `true` a Slide Toggle displays
+on the right in the heading handle (optional). Works only for `variant` `compact-black` and `reverseAlign` false. @default false
+   */
+    set activatable(_) { }
+    ;
+    /**
+   * A boolean to indicate if the Accordion Section is `active`. Only applicable when the Accordion Section is
+`activatable`. @default false
+   */
+    set active(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     dsoToggleClick = new EventEmitter();
     dsoAnimationStart = new EventEmitter();
@@ -203,6 +289,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoActionList = class DsoActionList {
     z;
     el;
+    /**
+   * The title.
+   */
+    set listTitle(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -230,6 +321,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoActionListItem = class DsoActionListItem {
     z;
     el;
+    /**
+   * The step of the Action List Item.
+   */
+    set step(_) { }
+    ;
+    /**
+   * The title of the item.
+   */
+    set itemTitle(_) { }
+    ;
+    /**
+   * Show flow line to next step @default false
+   */
+    set flowLine(_) { }
+    ;
+    /**
+   * When there is a warning. @default false
+   */
+    set warning(_) { }
+    ;
+    /**
+   * Places a dashed line at the bottom of the item. @default false
+   */
+    set divider(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -257,6 +373,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAdvancedSelect = class DsoAdvancedSelect {
     z;
     el;
+    /**
+   * The options to display in the select. @default []
+   */
+    set options(_) { }
+    ;
+    /**
+   * The active option. By object reference.
+   */
+    set active(_) { }
+    ;
+    /**
+   * An extra text for the active option. Only visible in the list of options.
+   */
+    set activeHint(_) { }
+    ;
     dsoChange = new EventEmitter();
     dsoRedirect = new EventEmitter();
     constructor(c, r, z) {
@@ -291,6 +422,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAlert = class DsoAlert {
     z;
     el;
+    /**
+   * Set status of alert
+   */
+    set status(_) { }
+    ;
+    /**
+   * Whether or not to show the role attribute with value "alert". To control the tooltip add the `role-alert` attribute.
+   */
+    set roleAlert(_) { }
+    ;
+    /**
+   * Show alert as compact variant (without icon)
+   */
+    set compact(_) { }
+    ;
+    /**
+   * When `false` the close button in the alert will not be rendered. @default false
+   */
+    set closable(_) { }
+    ;
     dsoClose = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -322,6 +473,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAnnotationActiviteit = class DsoAnnotationActiviteit {
     z;
     el;
+    /**
+   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.
+   */
+    set wijzigactie(_) { }
+    ;
+    /**
+   * Een optionele boolean die aangeeft of de annotatie actief is.
+   */
+    set active(_) { }
+    ;
+    /**
+   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.
+   */
+    set gewijzigdeLocatie(_) { }
+    ;
+    /**
+   * De naam van de activiteit.
+   */
+    set naam(_) { }
+    ;
+    /**
+   * De activiteit regel kwalificatie.
+   */
+    set regelKwalificatie(_) { }
+    ;
+    /**
+   * De noemer van de locatie.
+   */
+    set locatieNoemers(_) { }
+    ;
+    /**
+   * Voorzetsel van de regelKwalificatie. Exclusief dubbele punt.
+   */
+    set regelKwalificatieVoorzetsel(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -353,6 +539,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAnnotationGebiedsaanwijzing = class DsoAnnotationGebiedsaanwijzing {
     z;
     el;
+    /**
+   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.
+   */
+    set wijzigactie(_) { }
+    ;
+    /**
+   * Een optionele boolean die aangeeft of de annotatie actief is.
+   */
+    set active(_) { }
+    ;
+    /**
+   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.
+   */
+    set gewijzigdeLocatie(_) { }
+    ;
+    /**
+   * De naam van de gebiedsaanwijzing.
+   */
+    set naam(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -384,6 +590,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAnnotationKaart = class DsoAnnotationKaart {
     z;
     el;
+    /**
+   * Een optionele wijzigactie die aangeeft of de annotatie is toegevoegd of verwijderd.
+   */
+    set wijzigactie(_) { }
+    ;
+    /**
+   * De naam van de kaart.
+   */
+    set naam(_) { }
+    ;
+    /**
+   * De url naar de kaart.
+
+Gebruik het event `dsoClick` om de navigatie aan de router te koppelen.
+   */
+    set href(_) { }
+    ;
     dsoClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -415,6 +638,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAnnotationLocatie = class DsoAnnotationLocatie {
     z;
     el;
+    /**
+   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.
+   */
+    set wijzigactie(_) { }
+    ;
+    /**
+   * Een optionele boolean die aangeeft of de annotatie actief is.
+   */
+    set active(_) { }
+    ;
+    /**
+   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.
+   */
+    set gewijzigdeLocatie(_) { }
+    ;
+    /**
+   * De noemer van de locatie.
+   */
+    set locatieNoemer(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -446,6 +689,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAnnotationOmgevingsnormwaarde = class DsoAnnotationOmgevingsnormwaarde {
     z;
     el;
+    /**
+   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.
+   */
+    set wijzigactie(_) { }
+    ;
+    /**
+   * Een optionele boolean die aangeeft of de annotatie actief is.
+   */
+    set active(_) { }
+    ;
+    /**
+   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.
+   */
+    set gewijzigdeLocatie(_) { }
+    ;
+    /**
+   * De naam van de omgevingsnorm of omgevingswaarde.
+   */
+    set naam(_) { }
+    ;
+    /**
+   * De toelichting van de waardes.
+   */
+    set toelichting(_) { }
+    ;
+    /**
+   * De waardes van de omgevingsnorm of omgevingswaarde.
+   */
+    set waardes(_) { }
+    ;
+    /**
+   * De eenheid van de omgevingsnorm of omgevingswaarde.
+   */
+    set eenheid(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -477,6 +755,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAttachmentsCounter = class DsoAttachmentsCounter {
     z;
     el;
+    /**
+   * The number of attachments.
+   */
+    set count(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -504,6 +787,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoAutosuggest = class DsoAutosuggest {
     z;
     el;
+    /**
+   * The suggestions for the value of the slotted input element.
+
+This can be an array of type Suggestion or an Array of type SuggestionGroup.
+
+A suggestionGroup must have a `groupLabel` and `suggestions`.
+
+A suggestion must have a `value` and can have a `type`, an `item` or `extras`.
+
+The `type` is used to style the suggestion. `item` can be use to reference the original object that was used to
+create the suggestion. `extras` is an array of additional strings to further specify the suggestion.
+
+The value should be null when no suggestions have been fetched. @default null
+   */
+    set suggestions(_) { }
+    ;
+    /**
+   * Shows progress indicator when fetching results. @default false
+   */
+    set loading(_) { }
+    ;
+    /**
+   * To override progress indicator's default loading label. @default "Een moment geduld."
+   */
+    set loadingLabel(_) { }
+    ;
+    /**
+   * To delay progress indicator showing (in ms).
+   */
+    set loadingDelayed(_) { }
+    ;
+    /**
+   * To show text when no results are found.
+   */
+    set notFoundLabel(_) { }
+    ;
+    /**
+   * A function provided by the consumer of the autosuggest component, that returns an array of `AutosuggestMarkItem`s
+   */
+    set mark(_) { }
+    ;
     dsoSelect = new EventEmitter();
     dsoChange = new EventEmitter();
     dsoSearch = new EventEmitter();
@@ -541,6 +865,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoBadge = class DsoBadge {
     z;
     el;
+    /**
+   * The status of the Badge.
+   */
+    set status(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -568,6 +897,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoBanner = class DsoBanner {
     z;
     el;
+    /**
+   * The status of the banner.
+   */
+    set status(_) { }
+    ;
+    /**
+   * Compact mode. @default false
+   */
+    set compact(_) { }
+    ;
+    /**
+   * *Icon can only be hidden when the 'compact' property is set to true.
+
+Option to show banner icon. @default false
+   */
+    set icon(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -595,6 +941,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoButtonGroup = class DsoButtonGroup {
     z;
     el;
+    /**
+   * The direction in which the buttons are displayed.
+
+Defaults to `row`. @default "row"
+   */
+    set direction(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -622,6 +975,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoCard = class DsoCard {
     z;
     el;
+    /**
+   * The URL to which the Card heading links.
+   */
+    set href(_) { }
+    ;
+    /**
+   * Display the link as an external link or a download link
+ - "download"
+ - "extern"
+   */
+    set mode(_) { }
+    ;
+    /**
+   * Makes the Card active.
+   */
+    set active(_) { }
+    ;
     dsoCardClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -653,6 +1023,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoCardContainer = class DsoCardContainer {
     z;
     el;
+    /**
+   * The mode of the Card Container. @default "list"
+   */
+    set mode(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -732,6 +1107,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoDatePicker = class DsoDatePicker {
     z;
     el;
+    /**
+   * Name of the date picker input. @default "dso-date"
+   */
+    set name(_) { }
+    ;
+    /**
+   * Adds a unique identifier for the date picker input. Use this instead of html `id` attribute.
+   */
+    set identifier(_) { }
+    ;
+    /**
+   * Makes the date picker input component disabled. This prevents users from being able to
+interact with the input, and conveys its inactive state to assistive technologies. @default false
+   */
+    set disabled(_) { }
+    ;
+    /**
+   * Should the input be marked as required? @default false
+   */
+    set required(_) { }
+    ;
+    /**
+   * Is input invalid?
+   */
+    set invalid(_) { }
+    ;
+    /**
+   * ID of element that describes the input element
+   */
+    set describedBy(_) { }
+    ;
+    /**
+   * Should the input be focused on load? @default false
+   */
+    set dsoAutofocus(_) { }
+    ;
+    /**
+   * Date value. Must be in Dutch date format: DD-MM-YYYY. @default ""
+   */
+    set value(_) { }
+    ;
+    /**
+   * Minimum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.
+This setting can be used alone or together with the max property.
+   */
+    set min(_) { }
+    ;
+    /**
+   * Maximum date allowed to be picked. Must be in Dutch date format: DD-MM-YYYY.
+This setting can be used alone or together with the min property.
+   */
+    set max(_) { }
+    ;
     dsoDateChange = new EventEmitter();
     dsoBlur = new EventEmitter();
     dsoKeyUp = new EventEmitter();
@@ -775,6 +1203,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoDocumentCard = class DsoDocumentCard {
     z;
     el;
+    /**
+   * The URL to which the DocumentCard heading links.
+   */
+    set href(_) { }
+    ;
+    /**
+   * Makes the DocumentCard active.
+   */
+    set active(_) { }
+    ;
     dsoDocumentCardClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -806,6 +1244,132 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoDocumentComponent = class DsoDocumentComponent {
     z;
     el;
+    /**
+   * The heading element to use. @default "h2"
+   */
+    set heading(_) { }
+    ;
+    /**
+   * The Kop XML.
+   */
+    set kop(_) { }
+    ;
+    /**
+   * The Inhoud XML.
+   */
+    set inhoud(_) { }
+    ;
+    /**
+   * This boolean attribute indicates whether the children are visible. @default false
+   */
+    set open(_) { }
+    ;
+    /**
+   * Marks this Document Component as belonging to an active filter. @default false
+   */
+    set filtered(_) { }
+    ;
+    /**
+   * Marks this Document Component as not-applicable. @default false
+   */
+    set notApplicable(_) { }
+    ;
+    /**
+   * Text to display in the badge (e.g. "!").
+   */
+    set badge(_) { }
+    ;
+    /**
+   * Status/color of the badge.
+   */
+    set badgeStatus(_) { }
+    ;
+    /**
+   * Tooltip text for the badge.
+   */
+    set badgeTooltip(_) { }
+    ;
+    /**
+   * Text to display in the label (e.g. "Ontwerp", "Besluitversie").
+   */
+    set label(_) { }
+    ;
+    /**
+   * Status/color of the label.
+   */
+    set labelStatus(_) { }
+    ;
+    /**
+   * Enables annotations. @default false
+   */
+    set annotated(_) { }
+    ;
+    /**
+   * Marks Document Component as reserved.
+   */
+    set gereserveerd(_) { }
+    ;
+    /**
+   * Marks the Document Component as expired.
+   */
+    set vervallen(_) { }
+    ;
+    /**
+   * When the Annotation is opened, set this to true. @default false
+   */
+    set openAnnotation(_) { }
+    ;
+    /**
+   * An alternative title to show when there is nothing to create a title.
+   */
+    set alternativeTitle(_) { }
+    ;
+    /**
+   * Type of Document Component.
+   */
+    set type(_) { }
+    ;
+    /**
+   * The wijzigactie as in STOP.
+   */
+    set wijzigactie(_) { }
+    ;
+    /**
+   * The wijzigactie for all annotations.
+   */
+    set annotationsWijzigactie(_) { }
+    ;
+    /**
+   * To mark text.
+   */
+    set mark(_) { }
+    ;
+    /**
+   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.
+   */
+    set recursiveToggle(_) { }
+    ;
+    /**
+   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+   */
+    set ozonContentUrlResolver(_) { }
+    ;
+    /**
+   * A BegripResolver that will be called for STOP element "IntRef". If the ref-attribute of IntRef points to a Begrip it
+should return the `<Definitie>` of that Begrip otherwise it should return undefined.
+   */
+    set ozonContentBegripResolver(_) { }
+    ;
+    /**
+   * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document" @default "document"
+   */
+    set mode(_) { }
+    ;
+    /**
+   * The URL to which the Heading links (only in mode="table-of-contents").
+   */
+    set href(_) { }
+    ;
     dsoRecursiveToggle = new EventEmitter();
     dsoOpenToggle = new EventEmitter();
     dsoTableOfContentsClick = new EventEmitter();
@@ -833,7 +1397,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['alternativeTitle', 'annotated', 'annotationsWijzigactie', 'badge', 'badgeStatus', 'badgeTooltip', 'filtered', 'gereserveerd', 'heading', 'href', 'inhoud', 'kop', 'label', 'labelStatus', 'mark', 'mode', 'notApplicable', 'open', 'openAnnotation', 'ozonContentBegripResolver', 'ozonContentUrlResolver', 'recursiveToggle', 'type', 'vervallen', 'wijzigactie'],
+                    inputs: ['alternativeTitle', 'annotated', 'annotationsWijzigactie', 'badge', 'badgeStatus', 'badgeTooltip', 'filtered', 'gereserveerd', 'heading', 'href', 'inhoud', 'kop', 'label', 'labelStatus', 'mark', 'mode', 'notApplicable', 'open', 'openAnnotation', 'ozonContentBegripResolver', 'ozonContentUrlResolver', 'recursiveToggle', { name: 'type', required: true }, 'vervallen', 'wijzigactie'],
                     outputs: ['dsoRecursiveToggle', 'dsoOpenToggle', 'dsoTableOfContentsClick', 'dsoOzonContentClick', 'dsoAnnotationToggle', 'dsoMarkItemHighlight'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsoRecursiveToggle: [{
@@ -852,6 +1416,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoDropdownMenu = class DsoDropdownMenu {
     z;
     el;
+    /**
+   * Whether the menu is open or closed.
+This attribute is reflected and mutable. @default false
+   */
+    set open(_) { }
+    ;
+    /**
+   * Alignment of the dropdown @default "left"
+   */
+    set dropdownAlign(_) { }
+    ;
+    /**
+   * Space between button and dropdown options @default 2
+   */
+    set dropdownOptionsOffset(_) { }
+    ;
+    /**
+   * Whether the menu is checkable. @default false
+   */
+    set checkable(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -879,6 +1464,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoExpandable = class DsoExpandable {
     z;
     el;
+    /**
+   * Set to `true` to expand the content.
+   */
+    set open(_) { }
+    ;
+    /**
+   * Set to `true` to show the content animated. @default false
+   */
+    set enableAnimation(_) { }
+    ;
+    /**
+   * When enableAnimation is set to `true`, this property specifies the height of this element at which the animation will expand from / collapse to
+   */
+    set minimumHeight(_) { }
+    ;
     dsoExpandableAnimationStart = new EventEmitter();
     dsoExpandableAnimationEnd = new EventEmitter();
     constructor(c, r, z) {
@@ -913,6 +1513,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoHeader = class DsoHeader {
     z;
     el;
+    /**
+   * The main menu items. @default []
+   */
+    set mainMenu(_) { }
+    ;
+    /**
+   * Set to "always" to force the header to be compact. Otherwise it will be compact when
+the viewport is smaller than 992px. @default "auto"
+   */
+    set compact(_) { }
+    ;
+    /**
+   * Used to show the login/logout option. 'none' renders nothing. @default "none"
+   */
+    set authStatus(_) { }
+    ;
+    /**
+   * When the `authStatus` is `loggedOut` a loginUrl can be provided.
+The login button will then render as an anchor.
+   */
+    set loginUrl(_) { }
+    ;
+    /**
+   * The URL to open when the user activates "logout".
+If no URL is specified, a button element is used instead.
+   */
+    set logoutUrl(_) { }
+    ;
+    /**
+   * Show a help-button or link in the header @default false
+   */
+    set showHelp(_) { }
+    ;
+    /**
+   * The URL to open when the user activates "help".
+If no URL is specified, a button element is used instead.
+   */
+    set helpUrl(_) { }
+    ;
+    /**
+   * The name to show when the user is logged in.
+   */
+    set userProfileName(_) { }
+    ;
+    /**
+   * The URL to open when the user activates the profile url.
+   */
+    set userProfileUrl(_) { }
+    ;
+    /**
+   * The URL to open when the user activates "Mijn Omgevingsloket".
+   */
+    set userHomeUrl(_) { }
+    ;
+    /**
+   * Set this to true when the user is at "Mijn Omgevingsloket". @default false
+   */
+    set userHomeActive(_) { }
+    ;
     dsoHeaderClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -944,6 +1603,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoHighlightBox = class DsoHighlightBox {
     z;
     el;
+    /**
+   * For yellow Highlight Box.
+   */
+    set yellow(_) { }
+    ;
+    /**
+   * For a bordered Highlight Box.
+   */
+    set border(_) { }
+    ;
+    /**
+   * For a white Highlight Box.
+   */
+    set white(_) { }
+    ;
+    /**
+   * For a green Highlight Box.
+   */
+    set green(_) { }
+    ;
+    /**
+   * For an Highlight Box with a drop shadow.
+   */
+    set dropShadow(_) { }
+    ;
+    /**
+   * To create a step indicator.
+   */
+    set step(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -971,6 +1660,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoHistoryItem = class DsoHistoryItem {
     z;
     el;
+    /**
+   * The type of History Item
+   */
+    set type(_) { }
+    ;
+    /**
+   * The optional URL to which the History Item title links. Needs to be provided when slot `title` is used.
+   */
+    set href(_) { }
+    ;
     dsoClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1002,6 +1701,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoIcon = class DsoIcon {
     z;
     el;
+    /**
+   * The alias of the icon.
+   */
+    set icon(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -1029,6 +1733,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoIconButton = class DsoIconButton {
     z;
     el;
+    /**
+   * The alias of the icon in the button.
+   */
+    set icon(_) { }
+    ;
+    /**
+   * The label of the Icon Button which is shown on hover in a tooltip.
+   */
+    set label(_) { }
+    ;
+    /**
+   * The variant of the Icon Button. @default "secondary"
+   */
+    set variant(_) { }
+    ;
+    /**
+   * The placement of the tooltip on hover and focus of the Icon Button. @default "top"
+   */
+    set tooltipPlacement(_) { }
+    ;
+    /**
+   * To disable the Icon Button @default false
+   */
+    set disabled(_) { }
+    ;
     dsoClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1061,6 +1790,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoImageOverlay = class DsoImageOverlay {
     z;
     el;
+    /**
+   * The wijzigactie.
+   */
+    set wijzigactie(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -1088,6 +1822,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoInfo = class DsoInfo {
     z;
     el;
+    /**
+   * Set to true if the Info should not be toggled and always visible.
+   */
+    set fixed(_) { }
+    ;
+    /**
+   * Whether the Info is active.
+   */
+    set active(_) { }
+    ;
     dsoClose = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1119,6 +1863,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoInfoButton = class DsoInfoButton {
     z;
     el;
+    /**
+   * Whether the InfoButton is active. @default false
+   */
+    set active(_) { }
+    ;
+    /**
+   * For secondary Info Button.
+   */
+    set secondary(_) { }
+    ;
+    /**
+   * The label. @default "Toelichting bij optie"
+   */
+    set label(_) { }
+    ;
+    /**
+   * The placement of the Toggletip on click. @default "top"
+   */
+    set toggletipPlacement(_) { }
+    ;
     dsoToggle = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1151,6 +1915,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoInputRange = class DsoInputRange {
     z;
     el;
+    /**
+   * The minimum value of the range.
+   */
+    set min(_) { }
+    ;
+    /**
+   * The maximum value of the range.
+   */
+    set max(_) { }
+    ;
+    /**
+   * The value of the range.
+   */
+    set value(_) { }
+    ;
+    /**
+   * The step to increment the value by.
+   */
+    set step(_) { }
+    ;
+    /**
+   * The label of the range.
+   */
+    set label(_) { }
+    ;
+    /**
+   * The unit of the range. @default ""
+   */
+    set unit(_) { }
+    ;
+    /**
+   * The description of the range.
+   */
+    set description(_) { }
+    ;
     dsoChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1182,6 +1981,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoLabel = class DsoLabel {
     z;
     el;
+    /**
+   * For compact Label
+   */
+    set compact(_) { }
+    ;
+    /**
+   * Shows a button that can be used to remove the Label.
+   */
+    set removable(_) { }
+    ;
+    /**
+   * The status of this Label.
+   */
+    set status(_) { }
+    ;
+    /**
+   * Whether the Label is allowed to truncate the contents if it does not fit the container element.
+   */
+    set truncate(_) { }
+    ;
     dsoRemoveClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1213,6 +2032,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoLegend = class DsoLegend {
     z;
     el;
+    /**
+   * TabItems in the legend topbar @default []
+   */
+    set tabItems(_) { }
+    ;
     dsoContentSwitch = new EventEmitter();
     dsoClose = new EventEmitter();
     constructor(c, r, z) {
@@ -1247,6 +2071,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoLegendGroup = class DsoLegendGroup {
     z;
     el;
+    /**
+   * Controls whether this Legend Group and its child Legend Items are in edit or view mode.
+When not set, no edit/view toggle icon is shown.
+   */
+    set mode(_) { }
+    ;
     dsoLegendGroupModeChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1278,6 +2108,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoLegendItem = class DsoLegendItem {
     z;
     el;
+    /**
+   * To disable the Legend Item @default false
+   */
+    set disabled(_) { }
+    ;
+    /**
+   * Message to be shown in an info-button tooltip when the Legend Item is disabled
+   */
+    set disabledMessage(_) { }
+    ;
+    /**
+   * Controls whether this Legend Item can be active or not
+   */
+    set activatable(_) { }
+    ;
+    /**
+   * Controls whether this Legend Item is active or not
+   */
+    set active(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     dsoDelete = new EventEmitter();
     dsoMouseEnter = new EventEmitter();
@@ -1318,6 +2168,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoListButton = class DsoListButton {
     z;
     el;
+    /**
+   * The label of the List Button.
+   */
+    set label(_) { }
+    ;
+    /**
+   * The sublabel of the List Button.
+   */
+    set sublabel(_) { }
+    ;
+    /**
+   * When defined the count can show on the List Button.
+   */
+    set count(_) { }
+    ;
+    /**
+   * The minimum value.
+   */
+    set min(_) { }
+    ;
+    /**
+   * The maximum value.
+   */
+    set max(_) { }
+    ;
+    /**
+   * Whether the List Button is checked. @default false
+   */
+    set checked(_) { }
+    ;
+    /**
+   * Whether the List Button is disabled. @default false
+   */
+    set disabled(_) { }
+    ;
+    /**
+   * Prefix to subcontent for the purpose of screenreading.
+   */
+    set subcontentPrefix(_) { }
+    ;
     dsoCountChange = new EventEmitter();
     dsoSelectedChange = new EventEmitter();
     constructor(c, r, z) {
@@ -1352,6 +2242,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoLogo = class DsoLogo {
     z;
     el;
+    /**
+   * An alternative name for the logo wordmark Omgevingsloket. For instance `Environment| Desk`. It should contains a
+pipe-character: the left-hand side of the pipe will be shown in grasgroen, the right-hand side of the pipe will be
+shown in bosgroen.
+When omitted the logo wordmark will default to Omgevingsloket, with 'Omgevings' shown in grasgroen and 'loket' in
+bosgroen. @default "Omgevings|loket"
+   */
+    set name(_) { }
+    ;
+    /**
+   * The url the logo is pointing to.
+   */
+    set logoUrl(_) { }
+    ;
+    /**
+   * The label clarifies the service within the Omgevingsloket, shown
+as a subtitle (and on smaller screens as the main wordmark itself).
+   */
+    set label(_) { }
+    ;
+    /**
+   * The url the label is pointing to.
+   */
+    set labelUrl(_) { }
+    ;
+    /**
+   * The ribbon contains the text for a possible 'sticker' on top of the logo.
+Used to clarify the (non-production) server environment ("int", "kta", "pfm", "pre", or "dmo")
+   */
+    set ribbon(_) { }
+    ;
     dsoLogoClick = new EventEmitter();
     dsoLabelClick = new EventEmitter();
     constructor(c, r, z) {
@@ -1386,6 +2307,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoMapBaseLayers = class DsoMapBaseLayers {
     z;
     el;
+    /**
+   * To group the overlays together. Generally the default value suffices. @default uuidv4()
+   */
+    set group(_) { }
+    ;
+    /**
+   * The base layers.
+   */
+    set baseLayers(_) { }
+    ;
     dsoBaseLayerChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1417,6 +2348,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoMapControls = class DsoMapControls {
     z;
     el;
+    /**
+   * To show and hide the Map Controls. @default false
+   */
+    set open(_) { }
+    ;
+    /**
+   * To disable the zoom controls:
+
+* `in`: Disable zoom in button.
+* `out`: Disable zoom out button.
+* `both`: Disable zoom in and zoom out.
+   */
+    set disableZoom(_) { }
+    ;
     dsoZoomIn = new EventEmitter();
     dsoZoomOut = new EventEmitter();
     dsoToggle = new EventEmitter();
@@ -1455,6 +2400,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoMapLayer = class DsoMapLayer {
     z;
     el;
+    /**
+   * The label of the Map Layer.
+   */
+    set label(_) { }
+    ;
+    /**
+   * A boolean to indicate if the Map Layer is capable of being activated. When `true` a Slide Toggle displays
+on the right. @default false
+   */
+    set activatable(_) { }
+    ;
+    /**
+   * An optional boolean indicating whether the Map Layer is active.
+   */
+    set active(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1486,6 +2447,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoMapLayerObject = class DsoMapLayerObject {
     z;
     el;
+    /**
+   * An optional boolean indicating whether the Map Layer Object is active.
+   */
+    set active(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     dsoMouseEnter = new EventEmitter();
     dsoMouseLeave = new EventEmitter();
@@ -1523,6 +2489,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoMapOverlays = class DsoMapOverlays {
     z;
     el;
+    /**
+   * To group the overlays together. Generally the default value suffices. @default uuidv4()
+   */
+    set group(_) { }
+    ;
+    /**
+   * The overlays.
+   */
+    set overlays(_) { }
+    ;
     dsoToggleOverlay = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1554,6 +2530,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoMarkBar = class DsoMarkBar {
     z;
     el;
+    /**
+   * The current search value.
+   */
+    set value(_) { }
+    ;
+    /**
+   * The label for the input field. @default "Zoeken in document"
+   */
+    set label(_) { }
+    ;
+    /**
+   * The current (one-based) highlighted search item.
+   */
+    set current(_) { }
+    ;
+    /**
+   * Total number of search results.
+   */
+    set totalCount(_) { }
+    ;
     dsoInput = new EventEmitter();
     dsoNext = new EventEmitter();
     dsoPrevious = new EventEmitter();
@@ -1595,6 +2591,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoModal = class DsoModal {
     z;
     el;
+    /**
+   * when set the modal will be shown in fullscreen.
+   */
+    set fullscreen(_) { }
+    ;
+    /**
+   * The title of the Modal.
+   */
+    set modalTitle(_) { }
+    ;
+    /**
+   * the role for the modal `dialog` | `alert` | `alertdialog`. @default "dialog"
+   */
+    set dialogRole(_) { }
+    ;
+    /**
+   * The element to return focus to after the modal is closed.
+
+* `undefined` will return focus to the previously focused element (default).
+* `false` will not return focus to any element.
+* or, provide your own `HTMLElement` that will receive focus upon closing. @default undefined
+   */
+    set returnFocus(_) { }
+    ;
+    /**
+   * when `false` the close button in the header will not be rendered.
+
+Needs `modalTitle` to be set. @default false
+   */
+    set closable(_) { }
+    ;
     dsoClose = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1626,6 +2653,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoOnboardingTip = class DsoOnboardingTip {
     z;
     el;
+    /**
+   * Where to place the Onboarding Tip relative to its reference element. @default "right"
+   */
+    set placement(_) { }
+    ;
     dsoClose = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1657,6 +2689,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoOzonContent = class DsoOzonContent {
     z;
     el;
+    /**
+   * The XML to be rendered.
+   */
+    set content(_) { }
+    ;
+    /**
+   * Setting this property creates dso-ozon-content as inline element instead of a block element. @default false
+   */
+    set inline(_) { }
+    ;
+    /**
+   * To mark text.
+   */
+    set mark(_) { }
+    ;
+    /**
+   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+   */
+    set urlResolver(_) { }
+    ;
+    /**
+   * A BegripResolver that will be called for STOP element "IntRef". If the ref-attribute of IntRef points to a Begrip it
+should return the `<Definitie>` of that Begrip otherwise it should return undefined.
+   */
+    set begripResolver(_) { }
+    ;
+    /**
+   * Boolean indicating that this dso-ozon-content is part of an annotated context. If true the content of the
+toggletip for "IntIoRef" will show a "Kenmerken en kaart" annotation button. @default false
+   */
+    set annotated(_) { }
+    ;
     dsoClick = new EventEmitter();
     dsoOzonContentMarkItemHighlight = new EventEmitter();
     constructor(c, r, z) {
@@ -1691,6 +2755,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoOzonContentToggletip = class DsoOzonContentToggletip {
     z;
     el;
+    /**
+   * The alias of the icon in the button.
+   */
+    set icon(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -1718,6 +2787,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoPagination = class DsoPagination {
     z;
     el;
+    /**
+   * Total pages
+   */
+    set totalPages(_) { }
+    ;
+    /**
+   * Current page
+   */
+    set currentPage(_) { }
+    ;
+    /**
+   * This function is called to format the href @default (page) => "#" + page
+   */
+    set formatHref(_) { }
+    ;
     dsoSelectPage = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1749,6 +2833,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoPanel = class DsoPanel {
     z;
     el;
+    /**
+   * The accessible name for the close button.
+   */
+    set closeButtonLabel(_) { }
+    ;
+    /**
+   * To display the panel as an emphasized panel. @default false
+   */
+    set emphasized(_) { }
+    ;
     dsoCloseClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1780,6 +2874,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoPlekinfoCard = class DsoPlekinfoCard {
     z;
     el;
+    /**
+   * An optional 'wijzigactie' that signals if the plekinfo on the card is added or removed.
+   */
+    set wijzigactie(_) { }
+    ;
+    /**
+   * The URL to which the PlekinfoCard heading links.
+   */
+    set href(_) { }
+    ;
+    /**
+   * Opens the urls in a new window or tab @default false
+   */
+    set targetBlank(_) { }
+    ;
+    /**
+   * Makes the PlekinfoCard active.
+   */
+    set active(_) { }
+    ;
     dsoPlekinfoCardClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1811,6 +2925,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoProgressIndicator = class DsoProgressIndicator {
     z;
     el;
+    /**
+   * The label of the Progress Indicator.
+   */
+    set label(_) { }
+    ;
+    /**
+   * The size (width) of the Progress Indicator.
+
+If no size is set, falls back to `small`.
+   */
+    set size(_) { }
+    ;
+    /**
+   * Set for bloatier Progress Indicator.
+   */
+    set block(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -1838,6 +2969,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoProjectItem = class DsoProjectItem {
     z;
     el;
+    /**
+   * The label of the project item.
+   */
+    set label(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -1865,6 +3001,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoRenvooi = class DsoRenvooi {
     z;
     el;
+    /**
+   * The renvooi value to render.
+   */
+    set value(_) { }
+    ;
+    /**
+   * To mark text.
+   */
+    set mark(_) { }
+    ;
     dsoRenvooiMarkItemHighlight = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1954,9 +3100,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsoScrollEnd: [{
                 type: Output
             }] } });
+let DsoSegmentedButton = class DsoSegmentedButton {
+    z;
+    el;
+    /**
+   * Optional custom group name
+   */
+    set groupName(_) { }
+    ;
+    /**
+   * Options to render in the segmented button
+   */
+    set options(_) { }
+    ;
+    /**
+   * Label for the segmented button group.
+   */
+    set label(_) { }
+    ;
+    /**
+   * Whether selection is required
+   */
+    set required(_) { }
+    ;
+    /**
+   * Index of the currently active option
+   */
+    set activeOption(_) { }
+    ;
+    dsoChange = new EventEmitter();
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DsoSegmentedButton, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.5", type: DsoSegmentedButton, isStandalone: true, selector: "dso-segmented-button", inputs: { activeOption: "activeOption", groupName: "groupName", label: "label", options: "options", required: "required" }, outputs: { dsoChange: "dsoChange" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+};
+DsoSegmentedButton = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: defineCustomElement$X,
+        inputs: ['activeOption', 'groupName', 'label', 'options', 'required']
+    })
+], DsoSegmentedButton);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DsoSegmentedButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'dso-segmented-button',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: '<ng-content></ng-content>',
+                    // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+                    inputs: [{ name: 'activeOption', required: true }, 'groupName', { name: 'label', required: true }, { name: 'options', required: true }, 'required'],
+                    outputs: ['dsoChange'],
+                }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { dsoChange: [{
+                type: Output
+            }] } });
 let DsoSelectable = class DsoSelectable {
     z;
     el;
+    /**
+   * Type of Selectable.
+
+`checkbox`: Multiple options
+`radio`: Single option.
+   */
+    set type(_) { }
+    ;
+    /**
+   * To set `<input id>` attribute for external references.
+   */
+    set identifier(_) { }
+    ;
+    /**
+   * Name of the Selectable. Can be used to group Selectables.
+   */
+    set name(_) { }
+    ;
+    /**
+   * The value of the Selectable.
+   */
+    set value(_) { }
+    ;
+    /**
+   * Set to true of the current value is not valid.
+   */
+    set invalid(_) { }
+    ;
+    /**
+   * To link this control to an element that describes it.
+   */
+    set describedById(_) { }
+    ;
+    /**
+   * To link this control to an element that labels it.
+   */
+    set labelledById(_) { }
+    ;
+    /**
+   * To disable the Selectable.
+   */
+    set disabled(_) { }
+    ;
+    /**
+   * To mark the Selectable as required.
+   */
+    set required(_) { }
+    ;
+    /**
+   * Mark the Selectable as checked
+   */
+    set checked(_) { }
+    ;
+    /**
+   * An indeterminate state is neither true or false. It means the answer is somewhere in between.
+
+Can be used to indicate child Selectables that are a mix of checked and unchecked.
+   */
+    set indeterminate(_) { }
+    ;
+    /**
+   * Set to true if the Info should not be toggled and always visible.
+   */
+    set infoFixed(_) { }
+    ;
     dsoChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -1968,7 +3235,7 @@ let DsoSelectable = class DsoSelectable {
 };
 DsoSelectable = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$X,
+        defineCustomElementFn: defineCustomElement$Y,
         inputs: ['checked', 'describedById', 'disabled', 'identifier', 'indeterminate', 'infoFixed', 'invalid', 'labelledById', 'name', 'required', 'type', 'value'],
         methods: ['toggleInfo']
     })
@@ -1989,6 +3256,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoSkiplink = class DsoSkiplink {
     z;
     el;
+    /**
+   * The location to which the skiplink links.
+   */
+    set to(_) { }
+    ;
+    /**
+   * link text
+   */
+    set label(_) { }
+    ;
     dsoSkiplinkClick = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -2000,7 +3277,7 @@ let DsoSkiplink = class DsoSkiplink {
 };
 DsoSkiplink = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$Y,
+        defineCustomElementFn: defineCustomElement$Z,
         inputs: ['label', 'to']
     })
 ], DsoSkiplink);
@@ -2020,6 +3297,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoSlideToggle = class DsoSlideToggle {
     z;
     el;
+    /**
+   * Set to true if Slide Toggle is checked. @default false
+   */
+    set checked(_) { }
+    ;
+    /**
+   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events. @default false
+   */
+    set disabled(_) { }
+    ;
+    /**
+   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.
+   */
+    set accessibleLabel(_) { }
+    ;
+    /**
+   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.
+   */
+    set labelledbyId(_) { }
+    ;
+    /**
+   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for="id">`. @default v4()
+   */
+    set identifier(_) { }
+    ;
     dsoActiveChange = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -2031,7 +3333,7 @@ let DsoSlideToggle = class DsoSlideToggle {
 };
 DsoSlideToggle = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$Z,
+        defineCustomElementFn: defineCustomElement$_,
         inputs: ['accessibleLabel', 'checked', 'disabled', 'identifier', 'labelledbyId']
     })
 ], DsoSlideToggle);
@@ -2063,7 +3365,7 @@ let DsoSurveyRating = class DsoSurveyRating {
 };
 DsoSurveyRating = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$_
+        defineCustomElementFn: defineCustomElement$$
     })
 ], DsoSurveyRating);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DsoSurveyRating, decorators: [{
@@ -2084,6 +3386,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoTab = class DsoTab {
     z;
     el;
+    /**
+   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.
+   */
+    set active(_) { }
+    ;
+    /**
+   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.
+   */
+    set disabled(_) { }
+    ;
+    /**
+   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.
+   */
+    set href(_) { }
+    ;
     dsoTabSwitch = new EventEmitter();
     constructor(c, r, z) {
         this.z = z;
@@ -2095,7 +3412,7 @@ let DsoTab = class DsoTab {
 };
 DsoTab = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$$,
+        defineCustomElementFn: defineCustomElement$10,
         inputs: ['active', 'disabled', 'href']
     })
 ], DsoTab);
@@ -2115,6 +3432,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoTable = class DsoTable {
     z;
     el;
+    /**
+   * Prevents the table being opened in a modal. @default false
+   */
+    set noModal(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -2125,7 +3447,7 @@ let DsoTable = class DsoTable {
 };
 DsoTable = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$10,
+        defineCustomElementFn: defineCustomElement$11,
         inputs: ['noModal']
     })
 ], DsoTable);
@@ -2152,7 +3474,7 @@ let DsoTabs = class DsoTabs {
 };
 DsoTabs = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$11
+        defineCustomElementFn: defineCustomElement$12
     })
 ], DsoTabs);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DsoTabs, decorators: [{
@@ -2178,7 +3500,7 @@ let DsoTijdreisBanner = class DsoTijdreisBanner {
 };
 DsoTijdreisBanner = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$12
+        defineCustomElementFn: defineCustomElement$13
     })
 ], DsoTijdreisBanner);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DsoTijdreisBanner, decorators: [{
@@ -2194,6 +3516,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoToggletip = class DsoToggletip {
     z;
     el;
+    /**
+   * Toggletip label. @default "Toelichting"
+   */
+    set label(_) { }
+    ;
+    /**
+   * Toggletip position. @default "right"
+   */
+    set position(_) { }
+    ;
+    /**
+   * Set to true for small Toggletip.
+   */
+    set small(_) { }
+    ;
+    /**
+   * Set to true for secondary Toggletip.
+   */
+    set secondary(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -2204,7 +3546,7 @@ let DsoToggletip = class DsoToggletip {
 };
 DsoToggletip = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$13,
+        defineCustomElementFn: defineCustomElement$14,
         inputs: ['label', 'position', 'secondary', 'small']
     })
 ], DsoToggletip);
@@ -2221,6 +3563,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoTooltip = class DsoTooltip {
     z;
     el;
+    /**
+   * Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`. @default false
+   */
+    set descriptive(_) { }
+    ;
+    /**
+   * Set position of tooltip relative to target @default "top"
+   */
+    set position(_) { }
+    ;
+    /**
+   * Set position strategy of tooltip @default "auto"
+   */
+    set strategy(_) { }
+    ;
+    /**
+   * Set attribute `no-arrow` to hide the arrow @default false
+   */
+    set noArrow(_) { }
+    ;
+    /**
+   * Deactivates mouseover behaviour
+   */
+    set stateless(_) { }
+    ;
+    /**
+   * Defines if the tooltip has a smaller max-width
+   */
+    set small(_) { }
+    ;
+    /**
+   * Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods. @default false
+   */
+    set active(_) { }
+    ;
     constructor(c, r, z) {
         this.z = z;
         c.detach();
@@ -2231,7 +3608,7 @@ let DsoTooltip = class DsoTooltip {
 };
 DsoTooltip = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$14,
+        defineCustomElementFn: defineCustomElement$15,
         inputs: ['active', 'descriptive', 'noArrow', 'position', 'small', 'stateless', 'strategy'],
         methods: ['activate', 'deactivate']
     })
@@ -2249,6 +3626,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoTreeView = class DsoTreeView {
     z;
     el;
+    /**
+   * The collection of TreeViewItems
+   */
+    set collection(_) { }
+    ;
     dsoOpenItem = new EventEmitter();
     dsoCloseItem = new EventEmitter();
     dsoClickItem = new EventEmitter();
@@ -2262,7 +3644,7 @@ let DsoTreeView = class DsoTreeView {
 };
 DsoTreeView = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$15,
+        defineCustomElementFn: defineCustomElement$16,
         inputs: ['collection'],
         methods: ['focusItem']
     })
@@ -2287,6 +3669,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsoViewerGrid = class DsoViewerGrid {
     z;
     el;
+    /**
+   * The title of the filter panel
+   */
+    set filterPanelTitle(_) { }
+    ;
+    /**
+   * Set to true when filter panel should show. @default false
+   */
+    set filterPanelOpen(_) { }
+    ;
+    /**
+   * Set to true when overlay should show. @default false
+   */
+    set overlayOpen(_) { }
+    ;
+    /**
+   * Set to true when document panel should show. @default false
+   */
+    set documentPanelOpen(_) { }
+    ;
+    /**
+   * Size of the panel when component loads.
+
+Default size is `large`. @default "large"
+   */
+    set mainSize(_) { }
+    ;
+    /**
+   * Set active tab in tab view.
+   */
+    set activeTab(_) { }
+    ;
+    /**
+   * Size of the panel when component loads.
+
+Default size is `large`. @default "large"
+   */
+    set documentPanelSize(_) { }
+    ;
+    /**
+   * Set to show main panel expanded. @default false
+   */
+    set mainPanelExpanded(_) { }
+    ;
+    /**
+   * Set to hide the main panel. @default false
+   */
+    set mainPanelHidden(_) { }
+    ;
     dsoCloseOverlay = new EventEmitter();
     dsoCloseFilterPanel = new EventEmitter();
     dsoActiveTabSwitch = new EventEmitter();
@@ -2304,7 +3735,7 @@ let DsoViewerGrid = class DsoViewerGrid {
 };
 DsoViewerGrid = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$16,
+        defineCustomElementFn: defineCustomElement$17,
         inputs: ['activeTab', 'documentPanelOpen', 'documentPanelSize', 'filterPanelOpen', 'filterPanelTitle', 'mainPanelExpanded', 'mainPanelHidden', 'mainSize', 'overlayOpen']
     })
 ], DsoViewerGrid);
@@ -2336,6 +3767,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 let DsotDocumentComponentDemo = class DsotDocumentComponentDemo {
     z;
     el;
+    /**
+   * Show canvas to where Document Component extends. @default false
+   */
+    set showCanvas(_) { }
+    ;
+    /**
+   * Show besluitversie version of the badge and label. @default false
+   */
+    set showBesluitversie(_) { }
+    ;
+    /**
+   * Name of the file to load.
+   */
+    set jsonFile(_) { }
+    ;
+    /**
+   * The default state for all Document Components. @default false
+   */
+    set openDefault(_) { }
+    ;
+    /**
+   * The mode of the Document Component. One of "document" or "table-of-contents". Defaults to "document" @default "document"
+   */
+    set mode(_) { }
+    ;
+    /**
+   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.
+   */
+    set ozonContentUrlResolver(_) { }
+    ;
+    /**
+   * A BegripResolver that will be called for STOP element "IntRef" with @scope ="Begrip".
+   */
+    set ozonContentBegripResolver(_) { }
+    ;
     dsotOzonContentClick = new EventEmitter();
     dsotTableOfContentsClick = new EventEmitter();
     constructor(c, r, z) {
@@ -2348,7 +3814,7 @@ let DsotDocumentComponentDemo = class DsotDocumentComponentDemo {
 };
 DsotDocumentComponentDemo = __decorate([
     ProxyCmp({
-        defineCustomElementFn: defineCustomElement$17,
+        defineCustomElementFn: defineCustomElement$18,
         inputs: ['jsonFile', 'mode', 'openDefault', 'ozonContentBegripResolver', 'ozonContentUrlResolver', 'showBesluitversie', 'showCanvas']
     })
 ], DsotDocumentComponentDemo);
@@ -2427,6 +3893,7 @@ const DIRECTIVES = [
     DsoRenvooi,
     DsoResponsiveElement,
     DsoScrollable,
+    DsoSegmentedButton,
     DsoSelectable,
     DsoSkiplink,
     DsoSlideToggle,
@@ -2442,16 +3909,130 @@ const DIRECTIVES = [
     DsotDocumentComponentDemo
 ];
 
+class BooleanValueAccessor {
+    el;
+    onChange = (_) => { };
+    onTouched = () => { };
+    constructor(el) {
+        this.el = el;
+    }
+    onFocusOut() {
+        this.onTouched();
+    }
+    onDsoChange(event) {
+        const checked = event.detail?.checked ?? false;
+        this.el.nativeElement.checked = checked;
+        this.onChange(checked);
+    }
+    writeValue(value) {
+        this.el.nativeElement.checked = value ?? false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BooleanValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: BooleanValueAccessor, isStandalone: true, selector: "dso-selectable[type=checkbox]", host: { listeners: { "focusout": "onFocusOut()", "dsoChange": "onDsoChange($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => BooleanValueAccessor),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BooleanValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "dso-selectable[type=checkbox]",
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => BooleanValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onFocusOut: [{
+                type: HostListener,
+                args: ["focusout"]
+            }], onDsoChange: [{
+                type: HostListener,
+                args: ["dsoChange", ["$event"]]
+            }] } });
+
+class RadioValueAccessor {
+    el;
+    onChange = (_) => { };
+    onTouched = () => { };
+    constructor(el) {
+        this.el = el;
+    }
+    onFocusOut() {
+        this.onTouched();
+    }
+    onDsoChange() {
+        this.el.nativeElement.checked = true;
+        this.onChange(this.el.nativeElement.value);
+    }
+    writeValue(value) {
+        this.el.nativeElement.checked = value === this.el.nativeElement.value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.5", type: RadioValueAccessor, isStandalone: true, selector: "dso-selectable[type=radio]", host: { listeners: { "focusout": "onFocusOut()", "dsoChange": "onDsoChange()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioValueAccessor),
+                multi: true,
+            },
+        ], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: RadioValueAccessor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "dso-selectable[type=radio]",
+                    standalone: true,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioValueAccessor),
+                            multi: true,
+                        },
+                    ],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onFocusOut: [{
+                type: HostListener,
+                args: ["focusout"]
+            }], onDsoChange: [{
+                type: HostListener,
+                args: ["dsoChange"]
+            }] } });
+
+const VALUE_ACCESSORS = [BooleanValueAccessor, RadioValueAccessor];
 class DsoToolkitModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DsoToolkitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: DsoToolkitModule, imports: [DsoAccordion, DsoAccordionSection, DsoActionList, DsoActionListItem, DsoAdvancedSelect, DsoAlert, DsoAnnotationActiviteit, DsoAnnotationGebiedsaanwijzing, DsoAnnotationKaart, DsoAnnotationLocatie, DsoAnnotationOmgevingsnormwaarde, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoButtonGroup, DsoCard, DsoCardContainer, DsoContactInformation, DsoCursorTooltip, DsoDatePicker, DsoDocumentCard, DsoDocumentComponent, DsoDropdownMenu, DsoExpandable, DsoHeader, DsoHighlightBox, DsoHistoryItem, DsoIcon, DsoIconButton, DsoImageOverlay, DsoInfo, DsoInfoButton, DsoInputRange, DsoLabel, DsoLegend, DsoLegendGroup, DsoLegendItem, DsoListButton, DsoLogo, DsoMapBaseLayers, DsoMapControls, DsoMapLayer, DsoMapLayerObject, DsoMapOverlays, DsoMarkBar, DsoModal, DsoOnboardingTip, DsoOzonContent, DsoOzonContentToggletip, DsoPagination, DsoPanel, DsoPlekinfoCard, DsoProgressIndicator, DsoProjectItem, DsoRenvooi, DsoResponsiveElement, DsoScrollable, DsoSelectable, DsoSkiplink, DsoSlideToggle, DsoSurveyRating, DsoTab, DsoTable, DsoTabs, DsoTijdreisBanner, DsoToggletip, DsoTooltip, DsoTreeView, DsoViewerGrid, DsotDocumentComponentDemo], exports: [DsoAccordion, DsoAccordionSection, DsoActionList, DsoActionListItem, DsoAdvancedSelect, DsoAlert, DsoAnnotationActiviteit, DsoAnnotationGebiedsaanwijzing, DsoAnnotationKaart, DsoAnnotationLocatie, DsoAnnotationOmgevingsnormwaarde, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoButtonGroup, DsoCard, DsoCardContainer, DsoContactInformation, DsoCursorTooltip, DsoDatePicker, DsoDocumentCard, DsoDocumentComponent, DsoDropdownMenu, DsoExpandable, DsoHeader, DsoHighlightBox, DsoHistoryItem, DsoIcon, DsoIconButton, DsoImageOverlay, DsoInfo, DsoInfoButton, DsoInputRange, DsoLabel, DsoLegend, DsoLegendGroup, DsoLegendItem, DsoListButton, DsoLogo, DsoMapBaseLayers, DsoMapControls, DsoMapLayer, DsoMapLayerObject, DsoMapOverlays, DsoMarkBar, DsoModal, DsoOnboardingTip, DsoOzonContent, DsoOzonContentToggletip, DsoPagination, DsoPanel, DsoPlekinfoCard, DsoProgressIndicator, DsoProjectItem, DsoRenvooi, DsoResponsiveElement, DsoScrollable, DsoSelectable, DsoSkiplink, DsoSlideToggle, DsoSurveyRating, DsoTab, DsoTable, DsoTabs, DsoTijdreisBanner, DsoToggletip, DsoTooltip, DsoTreeView, DsoViewerGrid, DsotDocumentComponentDemo] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: DsoToolkitModule, imports: [DsoAccordion, DsoAccordionSection, DsoActionList, DsoActionListItem, DsoAdvancedSelect, DsoAlert, DsoAnnotationActiviteit, DsoAnnotationGebiedsaanwijzing, DsoAnnotationKaart, DsoAnnotationLocatie, DsoAnnotationOmgevingsnormwaarde, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoButtonGroup, DsoCard, DsoCardContainer, DsoContactInformation, DsoCursorTooltip, DsoDatePicker, DsoDocumentCard, DsoDocumentComponent, DsoDropdownMenu, DsoExpandable, DsoHeader, DsoHighlightBox, DsoHistoryItem, DsoIcon, DsoIconButton, DsoImageOverlay, DsoInfo, DsoInfoButton, DsoInputRange, DsoLabel, DsoLegend, DsoLegendGroup, DsoLegendItem, DsoListButton, DsoLogo, DsoMapBaseLayers, DsoMapControls, DsoMapLayer, DsoMapLayerObject, DsoMapOverlays, DsoMarkBar, DsoModal, DsoOnboardingTip, DsoOzonContent, DsoOzonContentToggletip, DsoPagination, DsoPanel, DsoPlekinfoCard, DsoProgressIndicator, DsoProjectItem, DsoRenvooi, DsoResponsiveElement, DsoScrollable, DsoSegmentedButton, DsoSelectable, DsoSkiplink, DsoSlideToggle, DsoSurveyRating, DsoTab, DsoTable, DsoTabs, DsoTijdreisBanner, DsoToggletip, DsoTooltip, DsoTreeView, DsoViewerGrid, DsotDocumentComponentDemo, BooleanValueAccessor, RadioValueAccessor], exports: [DsoAccordion, DsoAccordionSection, DsoActionList, DsoActionListItem, DsoAdvancedSelect, DsoAlert, DsoAnnotationActiviteit, DsoAnnotationGebiedsaanwijzing, DsoAnnotationKaart, DsoAnnotationLocatie, DsoAnnotationOmgevingsnormwaarde, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoButtonGroup, DsoCard, DsoCardContainer, DsoContactInformation, DsoCursorTooltip, DsoDatePicker, DsoDocumentCard, DsoDocumentComponent, DsoDropdownMenu, DsoExpandable, DsoHeader, DsoHighlightBox, DsoHistoryItem, DsoIcon, DsoIconButton, DsoImageOverlay, DsoInfo, DsoInfoButton, DsoInputRange, DsoLabel, DsoLegend, DsoLegendGroup, DsoLegendItem, DsoListButton, DsoLogo, DsoMapBaseLayers, DsoMapControls, DsoMapLayer, DsoMapLayerObject, DsoMapOverlays, DsoMarkBar, DsoModal, DsoOnboardingTip, DsoOzonContent, DsoOzonContentToggletip, DsoPagination, DsoPanel, DsoPlekinfoCard, DsoProgressIndicator, DsoProjectItem, DsoRenvooi, DsoResponsiveElement, DsoScrollable, DsoSegmentedButton, DsoSelectable, DsoSkiplink, DsoSlideToggle, DsoSurveyRating, DsoTab, DsoTable, DsoTabs, DsoTijdreisBanner, DsoToggletip, DsoTooltip, DsoTreeView, DsoViewerGrid, DsotDocumentComponentDemo, BooleanValueAccessor, RadioValueAccessor] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DsoToolkitModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: DsoToolkitModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...DIRECTIVES],
-                    exports: [...DIRECTIVES],
+                    imports: [...DIRECTIVES, ...VALUE_ACCESSORS],
+                    exports: [...DIRECTIVES, ...VALUE_ACCESSORS],
                 }]
         }] });
 
@@ -2463,5 +4044,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DIRECTIVES, DsoAccordion, DsoAccordionSection, DsoActionList, DsoActionListItem, DsoAdvancedSelect, DsoAlert, DsoAnnotationActiviteit, DsoAnnotationGebiedsaanwijzing, DsoAnnotationKaart, DsoAnnotationLocatie, DsoAnnotationOmgevingsnormwaarde, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoButtonGroup, DsoCard, DsoCardContainer, DsoContactInformation, DsoCursorTooltip, DsoDatePicker, DsoDocumentCard, DsoDocumentComponent, DsoDropdownMenu, DsoExpandable, DsoHeader, DsoHighlightBox, DsoHistoryItem, DsoIcon, DsoIconButton, DsoImageOverlay, DsoInfo, DsoInfoButton, DsoInputRange, DsoLabel, DsoLegend, DsoLegendGroup, DsoLegendItem, DsoListButton, DsoLogo, DsoMapBaseLayers, DsoMapControls, DsoMapLayer, DsoMapLayerObject, DsoMapOverlays, DsoMarkBar, DsoModal, DsoOnboardingTip, DsoOzonContent, DsoOzonContentToggletip, DsoPagination, DsoPanel, DsoPlekinfoCard, DsoProgressIndicator, DsoProjectItem, DsoRenvooi, DsoResponsiveElement, DsoScrollable, DsoSelectable, DsoSkiplink, DsoSlideToggle, DsoSurveyRating, DsoTab, DsoTable, DsoTabs, DsoTijdreisBanner, DsoToggletip, DsoToolkitModule, DsoTooltip, DsoTreeView, DsoViewerGrid, DsotDocumentComponentDemo };
+export { BooleanValueAccessor, DIRECTIVES, DsoAccordion, DsoAccordionSection, DsoActionList, DsoActionListItem, DsoAdvancedSelect, DsoAlert, DsoAnnotationActiviteit, DsoAnnotationGebiedsaanwijzing, DsoAnnotationKaart, DsoAnnotationLocatie, DsoAnnotationOmgevingsnormwaarde, DsoAttachmentsCounter, DsoAutosuggest, DsoBadge, DsoBanner, DsoButtonGroup, DsoCard, DsoCardContainer, DsoContactInformation, DsoCursorTooltip, DsoDatePicker, DsoDocumentCard, DsoDocumentComponent, DsoDropdownMenu, DsoExpandable, DsoHeader, DsoHighlightBox, DsoHistoryItem, DsoIcon, DsoIconButton, DsoImageOverlay, DsoInfo, DsoInfoButton, DsoInputRange, DsoLabel, DsoLegend, DsoLegendGroup, DsoLegendItem, DsoListButton, DsoLogo, DsoMapBaseLayers, DsoMapControls, DsoMapLayer, DsoMapLayerObject, DsoMapOverlays, DsoMarkBar, DsoModal, DsoOnboardingTip, DsoOzonContent, DsoOzonContentToggletip, DsoPagination, DsoPanel, DsoPlekinfoCard, DsoProgressIndicator, DsoProjectItem, DsoRenvooi, DsoResponsiveElement, DsoScrollable, DsoSegmentedButton, DsoSelectable, DsoSkiplink, DsoSlideToggle, DsoSurveyRating, DsoTab, DsoTable, DsoTabs, DsoTijdreisBanner, DsoToggletip, DsoToolkitModule, DsoTooltip, DsoTreeView, DsoViewerGrid, DsotDocumentComponentDemo, RadioValueAccessor };
 //# sourceMappingURL=dso-toolkit-angular.mjs.map