@dso-toolkit/core 79.1.0 → 80.0.0

package/dist/collection/components/badge/badge.css

@@ -20,7 +20,8 @@
 }
 
 .dso-badge {
-  border: 1px solid;
+  border-width: 1px;
+  border-style: solid;
   border-radius: 1em;
   display: inline-block;
   font-size: 0.875em;
@@ -31,52 +32,205 @@
   text-align: center;
 }
 .dso-badge {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
-  border-color: #666;
   color: #fff;
 }
+.dso-badge a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-badge a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-badge a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-badge a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-badge {
+  border-color: #666;
+}
 .dso-badge.badge-info {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #2b5780;
-  border-color: #2b5780;
   color: #fff;
 }
+.dso-badge.badge-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-badge.badge-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-badge.badge-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-badge.badge-info a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-badge.badge-info {
+  border-color: #2b5780;
+}
 .dso-badge.badge-primary {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #275937;
-  border-color: #275937;
   color: #fff;
 }
+.dso-badge.badge-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-badge.badge-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-badge.badge-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-badge.badge-primary a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-badge.badge-primary {
+  border-color: #275937;
+}
 .dso-badge.badge-success {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #39870c;
-  border-color: #39870c;
   color: #fff;
 }
+.dso-badge.badge-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-badge.badge-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-badge.badge-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-badge.badge-success a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-badge.badge-success {
+  border-color: #39870c;
+}
 .dso-badge.badge-warning {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #191919;
   --_dso-icon-button-tertiary-hover-color: #4c4c4c;
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #dcd400;
-  border-color: #dcd400;
   color: #191919;
 }
+.dso-badge.badge-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
+}
+.dso-badge.badge-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
+}
+.dso-badge.badge-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
+}
+.dso-badge.badge-warning a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
+}
+.dso-badge.badge-warning {
+  border-color: #dcd400;
+}
 .dso-badge.badge-error {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #ce3f51;
-  border-color: #ce3f51;
   color: #fff;
 }
+.dso-badge.badge-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-badge.badge-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-badge.badge-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-badge.badge-error a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-badge.badge-error {
+  border-color: #ce3f51;
+}
 .dso-badge.badge-outline {
+  --_dso-alert-success-border-color: initial;
+  --_dso-alert-error-border-color: initial;
+  --_dso-alert-info-border-color: initial;
+  --_dso-alert-warning-border-color: initial;
   background-color: #fff;
-  border-color: #191919;
   color: #191919;
 }
+.dso-badge.badge-outline {
+  border-color: #191919;
+}
 .dso-badge.badge-attention {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
+  --link-color: currentColor;
+  --link-hover-color: currentColor;
+  --link-visited-color: currentColor;
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #8b4a6a;
-  border-color: #8b4a6a;
   color: #fff;
+}
+.dso-badge.badge-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));
+}
+.dso-badge.badge-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));
+}
+.dso-badge.badge-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#call-wit"));
+}
+.dso-badge.badge-attention a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
+  background-image: var(--_dso-di-background-image, url("./di.svg#email-wit"));
+}
+.dso-badge.badge-attention {
+  border-color: #8b4a6a;
 }

package/dist/collection/components/document-component/document-component.css

@@ -1059,6 +1059,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
 }
 :host([wijzigactie=verwijderContainer]) .heading-container,
 :host(:where([wijzigactie=verwijder])) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1067,7 +1071,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #f5d8dc;
-  border-color: #f5d8dc;
   color: #191919;
 }
 :host([wijzigactie=verwijderContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
@@ -1100,6 +1103,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
 
 :host([wijzigactie=nieuweContainer]) .heading-container,
 :host([wijzigactie=voegtoe]) {
+  --_dso-alert-success-border-color: #39870c;
+  --_dso-alert-error-border-color: #ce3f51;
+  --_dso-alert-info-border-color: #6ca4d9;
+  --_dso-alert-warning-border-color: #dcd400;
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
@@ -1108,7 +1115,6 @@ a.dso-tertiary, a.dso-tertiary:visited {
   --_dso-icon-button-tertiary-active-color: #173521;
   --_dso-icon-button-tertiary-disabled-color: #999;
   background-color: #e4f1d4;
-  border-color: #e4f1d4;
   color: #191919;
 }
 :host([wijzigactie=nieuweContainer]) .heading-container a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
@@ -1219,6 +1225,20 @@ a.dso-tertiary, a.dso-tertiary:visited {
   color: #000;
 }
 
+:host([mode=document]:not([not-collapsible])) {
+  --link-color: #39870c;
+  --link-hover-color: #676cb0;
+}
+:host([mode=document]:not([not-collapsible])) .heading-title > dso-ozon-content {
+  cursor: pointer;
+}
+:host([mode=document]:not([not-collapsible])) .heading-title > dso-ozon-content:hover, :host([mode=document]:not([not-collapsible])) .heading-title > dso-ozon-content:focus-visible {
+  color: var(--link-hover-color);
+  text-decoration: underline;
+}
+:host([mode=document]:not([not-collapsible])) .heading-title > dso-ozon-content:active {
+  text-decoration: none;
+}
 :host([mode=document]:not([not-collapsible])) dso-ozon-content.kop::part(_kop) {
   cursor: pointer;
 }
@@ -1268,9 +1288,9 @@ a.dso-tertiary, a.dso-tertiary:visited {
   gap: 8px;
 }
 
-:host([type=ARTIKEL]) dso-ozon-content.kop::part(_kop),
-:host([type=ARTIKEL]) .toggle-button {
-  --_dso-icon-button-tertiary-color: colors.$zwart;
+:host([type=ARTIKEL]:not([alternative-title])) dso-ozon-content.kop::part(_kop),
+:host([type=ARTIKEL]:not([alternative-title])) .toggle-button {
+  --_dso-icon-button-tertiary-color: #000;
   color: #000;
 }
 
@@ -1288,6 +1308,10 @@ a.dso-tertiary, a.dso-tertiary:visited {
   padding-inline-end: 8px;
 }
 
+.content {
+  --_dso-alert-margin-block-end: 8px;
+}
+
 .annotation-container {
   padding-inline-end: 8px;
 }

package/dist/collection/components/document-component/document-component.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"document-component.interfaces.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent, OzonContentText } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" | \"verwijder\" | \"nieuweContainer\" | \"verwijderContainer\";\r\n\r\nexport type DocumentComponentAnnotationsWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n  originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n  ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument | string;\r\n\r\ntype DocumentComponentSource = \"kop\" | \"inhoud\";\r\n\r\nexport type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => OzonContentText[];\r\n\r\nexport interface DocumentComponentMarkItemHighlightEvent {\r\n  source: DocumentComponentSource;\r\n  text: string;\r\n  elementRef: HTMLElement;\r\n}\r\n\r\nexport type DocumentComponentRecursiveToggleState = undefined | boolean | \"indeterminate\";\r\n\r\nexport interface DocumentComponentRecursiveToggleEvent {\r\n  originalEvent: MouseEvent;\r\n  current: DocumentComponentRecursiveToggleState;\r\n  next: boolean;\r\n}\r\n\r\nexport type DocumentComponentMode = \"document\" | \"table-of-contents\";\r\n\r\nexport interface DocumentComponentTableOfContentsClickEvent {\r\n  originalEvent: MouseEvent;\r\n  /** True when user clicked the document component heading while holding Ctrl, Alt or other modifiers, or when the document component heading is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n"]}
+{"version":3,"file":"document-component.interfaces.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["import { DsoOzonContentCustomEvent } from \"../../components\";\r\nimport { OzonContentAnchorClickEvent, OzonContentText } from \"../ozon-content/ozon-content.interfaces\";\r\n\r\nexport interface DocumentComponentOpenToggleEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\nexport interface DocumentComponentToggleAnnotationEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\nexport type DocumentComponentWijzigactie = \"voegtoe\" | \"verwijder\" | \"nieuweContainer\" | \"verwijderContainer\";\r\n\r\nexport type DocumentComponentAnnotationsWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport interface DocumentComponentOzonContentAnchorClickEvent {\r\n  originalEvent: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>;\r\n  ozonContentAnchorClick: OzonContentAnchorClickEvent;\r\n}\r\n\r\nexport type DocumentComponentInputType = XMLDocument | string;\r\n\r\ntype DocumentComponentSource = \"kop\" | \"inhoud\";\r\n\r\nexport type DocumentComponentMarkFunction = (text: string, source: DocumentComponentSource) => OzonContentText[];\r\n\r\nexport interface DocumentComponentMarkItemHighlightEvent {\r\n  source: DocumentComponentSource;\r\n  text: string;\r\n  elementRef: HTMLElement;\r\n}\r\n\r\nexport type DocumentComponentRecursiveToggleState = undefined | boolean | \"indeterminate\";\r\n\r\nexport interface DocumentComponentRecursiveToggleEvent {\r\n  originalEvent: MouseEvent;\r\n  current: DocumentComponentRecursiveToggleState;\r\n  next: boolean;\r\n}\r\n\r\nexport type DocumentComponentMode = \"document\" | \"table-of-contents\";\r\n\r\nexport interface DocumentComponentTableOfContentsClickEvent {\r\n  originalEvent: MouseEvent;\r\n  /** True when user clicked the document component heading while holding Ctrl, Alt or other modifiers, or when the document component heading is right-clicked. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n}\r\n\r\nexport interface DocumentComponentAantekenElement {\r\n  type: \"Vervallen\" | \"Gereserveerd\";\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n}\r\n"]}

package/dist/collection/components/document-component/document-component.js

@@ -1,5 +1,6 @@
-import { Fragment, Host, h } from "@stencil/core";
+import { Fragment, Host, h, } from "@stencil/core";
 import { isModifiedEvent } from "../../utils/is-modified-event";
+import { parseWijzigactieFromNode } from "../ozon-content/functions/parse-wijzigactie-from-node.function";
 import { Heading } from "./document-component-heading";
 const wijzigactieLabels = {
     nieuweContainer: "Toegevoegd",
@@ -7,6 +8,23 @@ const wijzigactieLabels = {
     verwijderContainer: "Verwijderd",
     voegtoe: "Toegevoegd",
 };
+const AantekenStatus = ({ gereserveerd, vervallen }) => {
+    return (h(Fragment, null, " ", gereserveerd && (h("dso-label", Object.assign({ compact: true }, (gereserveerd.wijzigactie
+        ? { status: gereserveerd.wijzigactie === "voegtoe" ? "toegevoegd" : "verwijderd" }
+        : {})), gereserveerd.type)), " ", vervallen && (h("dso-label", Object.assign({ compact: true }, (vervallen.wijzigactie
+        ? { status: vervallen.wijzigactie === "voegtoe" ? "toegevoegd" : "verwijderd" }
+        : {})), vervallen.type))));
+};
+const AantekenAlert = ({ gereserveerd, vervallen }) => {
+    if (gereserveerd && gereserveerd.wijzigactie !== "verwijder" && !vervallen) {
+        return h("dso-alert", { status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.");
+    }
+    if (vervallen && vervallen.wijzigactie !== "voegtoe" && !gereserveerd) {
+        return h("dso-alert", { status: "info" }, "Dit onderdeel is vervallen.");
+    }
+    return null;
+};
+const parser = new DOMParser();
 /**
  * @part _annotation-container - private part, do not touch.
  * @part _children-container - private part, do not touch.
@@ -43,14 +61,6 @@ export class DocumentComponent {
          * Enables annotations.
          */
         this.annotated = false;
-        /**
-         * Marks Document Component as reserved.
-         */
-        this.gereserveerd = false;
-        /**
-         * Marks the Document Component as expired.
-         */
-        this.vervallen = false;
         /**
          * When the Annotation is opened, set this to true.
          */
@@ -84,33 +94,92 @@ export class DocumentComponent {
             });
         };
     }
+    /**
+     * The Kop XML.
+     */
+    get kop() {
+        return this._kopInput;
+    }
+    set kop(value) {
+        this._kopInput = value;
+        this._kop = typeof value === "string" ? parser.parseFromString(value, "application/xml") : value;
+    }
+    /**
+     * The Inhoud XML.
+     */
+    get inhoud() {
+        return this._inhoudInput;
+    }
+    set inhoud(value) {
+        this._inhoudInput = value;
+        this._inhoud = typeof value === "string" ? parser.parseFromString(value, "application/xml") : value;
+    }
+    /**
+     * Marks Document Component as reserved.
+     */
+    get gereserveerd() {
+        return this._gereserveerdInput;
+    }
+    set gereserveerd(value) {
+        this._gereserveerdInput = value;
+        this._gereserveerd = this.parseAantekenElement(value);
+    }
+    /**
+     * Marks the Document Component as expired.
+     */
+    get vervallen() {
+        return this._vervallenInput;
+    }
+    set vervallen(value) {
+        this._vervallenInput = value;
+        this._vervallen = this.parseAantekenElement(value);
+    }
     get wijzigactieLabel() {
         return this.wijzigactie && wijzigactieLabels[this.wijzigactie];
     }
-    suffix() {
-        if (this.vervallen) {
-            return "vervallen";
-        }
-        if (this.gereserveerd) {
-            return "gereserveerd";
-        }
-        return undefined;
-    }
     showOntwerpBadge() {
         return (this.genesteOntwerpInformatie &&
             !this.bevatOntwerpInformatie &&
             ((!this.open && this.mode === "document") || this.mode === "table-of-contents"));
     }
+    parseAantekenElement(input) {
+        if (!input) {
+            return undefined;
+        }
+        let element = null;
+        if (typeof input === "string") {
+            const doc = parser.parseFromString(input, "application/xml");
+            element = doc.documentElement;
+        }
+        else if (input instanceof XMLDocument) {
+            element = input.documentElement;
+        }
+        if (!element) {
+            return undefined;
+        }
+        const wijzigactie = parseWijzigactieFromNode(element);
+        const tag = element.tagName.toLowerCase();
+        let type;
+        if (tag === "vervallen") {
+            type = "Vervallen";
+        }
+        else if (tag === "gereserveerd") {
+            type = "Gereserveerd";
+        }
+        if (!type) {
+            return undefined;
+        }
+        return { type, wijzigactie };
+    }
     render() {
-        const suffix = this.suffix();
-        const collapsible = !!((this.kop || this.alternativeTitle) && this.type !== "LID");
+        const collapsible = !!((this._kop || this.alternativeTitle) && this.type !== "LID");
         const showHeading = !!(this.wijzigactie ||
             collapsible ||
-            this.kop ||
+            this._kop ||
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (h(Host, { key: '67b44eca1aa743900cffd2709b0cccddff69c51a', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '880230d476123dcb7057aa1fe8127342c8be9df0', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '7c67c0f117b295b44e92021108a8bad2f49e659b', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '54b18cfbbc4128dcd54c62cc9794cc7151a051fb', class: "heading" }, h(Heading, { key: 'b6d833826fef4a062ff73dfb9c836a385ead6c5b', heading: this.heading, class: "heading-element", mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: 'dfb904c785f887cb739cc5341cce48a9effa0432', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("span", { key: 'e11943e62f3ca5e50263a26f210a2594151830c7', id: "heading-title" }, this.notApplicable && h("span", { key: 'f5179df79c067403501c47431e95d65d0f6d02ef', class: "sr-only" }, "Niet van toepassing:"), this.kop ? (h("dso-ozon-content", { class: "kop", content: this.kop, onDsoAnchorClick: this.handleOzonContentAnchorClick, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "kop"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "kop" })), inline: true, urlResolver: this.ozonContentUrlResolver })) : (this.alternativeTitle), suffix && h("span", { key: 'b349db95be1cb1d5ac08bd16838e7f6a6126e386' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '4c9300824a0a78c48faf886d0c9a27214ecff562', label: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showOntwerpBadge() && (h(Fragment, { key: '54d3dedea61a8d70cf86de687015499c7b0132ca' }, h("dso-badge", { key: '69011c8f00cfd78cd7903b99f4e993f98350c007', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '2148efeb7936f0145802b2c99eafdf0134617d8c', id: "nested-draft-description" }, "Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '165f00340cfc971ee641648bf061110b5b00ee9d', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '4d421c9f7928094b7414b3f2af8e4e8c70ad2568', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: 'dd41b642e78a70270653c1cbe099f6999534a9c7', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent }) }))))))), this.openAnnotation && (h("div", { key: 'bb9d232da9b450483a159a6af22662e60d543a48', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: '9b8c17d52e828c4b43f5ed57834e780ea4b91cd2', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: '38a43e0d13c2315a1f051a174b5579ba15b0d5ce', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: 'd45635edcf92f2bb0a7e0fa62d21e917b98fb3df', name: "annotations" })))), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && this.mode === "document" && (h("div", { key: '70758cb1276dfe75d561c2baa3755daaba1cafdd', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: '7635fdfa4b70dccba8b114296834d02cca8af118', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '22ded0be746c456a966bb100beb1a294352f3cf8', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '03f026cee1540a4a2caa277e3099f68dc691b24a', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })), urlResolver: this.ozonContentUrlResolver })))), h("div", { key: '2debf62019dbbe6e5d194c1fbeb7a1386b1a9b66', class: "children-container", part: "_children-container" }, h("slot", { key: '9728aa48b7b3b9b34ab0c279109c4128014f3369' }))));
+        return (h(Host, { key: '2bde27083a836d55aa970c132c5bef4c9c024864', "not-collapsible": !collapsible }, showHeading && (h("div", { key: '490efbdf8cba7d2e402d397cd5c716652a74c8ad', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '7a6fe102e92311de8493959f6ff43fe1cc8d5ce2', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: 'ff1e4b4c1b1b95cae78c8f7ee94edce9d37c24ab', class: "heading" }, h(Heading, { key: '89253544fcdd9ed0fdb170d034c72d75910fce12', heading: this.heading, class: "heading-element", onClick: this.alternativeTitle ? this.handleHeadingClick : undefined, mode: this.mode, href: this.href }, collapsible && this.mode === "document" && (h("dso-icon-button", { key: '38bc8d6d7e91b5bedcd95fb87929c0a3c17a6f9a', label: this.open ? "Invouwen" : "Uitvouwen", class: "toggle-button", icon: this.open ? "chevron-down" : "chevron-right", variant: "tertiary", onDsoClick: (e) => this.handleHeadingClick(e.detail.originalEvent) })), h("span", { key: 'c4a25f748ec08452630cc4fa759439b11a2c29a7', id: "heading-title" }, this.notApplicable && h("span", { key: 'ab8156d9efccec6a30e657a13f00b0d876e09bf5', class: "sr-only" }, "Niet van toepassing:"), this._kop ? (h("dso-ozon-content", { class: "kop", content: this._kop, onDsoAnchorClick: this.handleOzonContentAnchorClick, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "kop"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "kop" })), inline: true, urlResolver: this.ozonContentUrlResolver })) : (this.alternativeTitle), h(AantekenStatus, { key: 'ce6472c6c96ba037c07da72e17a49a0ec2c8f45f', gereserveerd: this._gereserveerd, vervallen: this._vervallen }))), this.recursiveToggle !== undefined && this.open && this.mode === "document" && (h("dso-icon-button", { key: '256d94eec087000e2d91c8dbf2f574aa565a42a5', label: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", class: "recursive-toggle", icon: this.recursiveToggle === true ? "eye" : "eye-slash", variant: "tertiary", onDsoClick: (e) => this.handleRecursiveToggleClick(e.detail.originalEvent) })), this.showOntwerpBadge() && (h(Fragment, { key: 'f2914d80286543c96166198f1df8e3cacd740ca6' }, h("dso-badge", { key: '27b14b6c283c81af3a7e96b12ca63b161f6e3aa4', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: '08a01e059ec810006562429eb37156ac3f729028', id: "nested-draft-description" }, "Er zijn onderliggende onderdelen die veranderen binnen dit ontwerp."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: 'd114a988e02aab1e9038d9e37dfd5d60448bf784', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '2ba5f37c2924c7e1a696e3953c3e9493f520865e', status: "warning", compact: true }, "Ontwerp")), this.annotated && this.mode === "document" && (h("dso-icon-button", { key: 'ab21305d36a05307958aa26475368ce135ebc16e', label: `Kenmerken en kaartgegevens ${this.openAnnotation ? "verbergen" : "tonen"}`, icon: "label", variant: "tertiary", onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e.detail.originalEvent }) }))))))), this.openAnnotation && (h("div", { key: 'c804d938d4440af62f5fbcfbeb8589bac2235190', class: "annotation-container", part: "_annotation-container" }, h("dso-panel", { key: '5c09f8274838f026092b9c7ba040ab227bbdb17b', id: "annotations", onDsoCloseClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }), closeButtonLabel: "Kenmerken en kaartgegevens verbergen" }, h("h2", { key: 'fcd8f5b88f1996ceccc22f1afcfc36ea9251f7e8', slot: "heading" }, "Kenmerken en kaart"), h("slot", { key: '3d1332f26729970af9a4c7930e50331fec29ec90', name: "annotations" })))), this.open && (this._inhoud || this._gereserveerd || this._vervallen) && this.mode === "document" && (h("div", { key: 'dc322fb8d5c3788b712594154e0d1a9dc84fefea', class: "content", part: "_content" }, h(AantekenAlert, { key: 'a50fc152de9a522a79396c2dc9a15a51c1ce6bbe', gereserveerd: this._gereserveerd, vervallen: this._vervallen }), this._inhoud && (h("dso-ozon-content", { key: '4ce1bbc319553d0207a0a2cdffe65427043602ab', content: this._inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, onDsoClick: this.handleOzonContentClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "inhoud"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "inhoud" })), urlResolver: this.ozonContentUrlResolver })))), h("div", { key: '6109a2121da80c12187a1597bd2cebd2839cb4df', class: "children-container", part: "_children-container" }, h("slot", { key: '7f9c6b3870f8d70599ad0099c3eabefb9626e7a7' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }
@@ -151,7 +220,7 @@ export class DocumentComponent {
                 "attribute": "kop",
                 "mutable": false,
                 "complexType": {
-                    "original": "DocumentComponentInputType",
+                    "original": "DocumentComponentInputType | undefined",
                     "resolved": "XMLDocument | string | undefined",
                     "references": {
                         "DocumentComponentInputType": {
@@ -162,13 +231,13 @@ export class DocumentComponent {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The Kop XML."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": false
             },
             "inhoud": {
@@ -176,7 +245,7 @@ export class DocumentComponent {
                 "attribute": "inhoud",
                 "mutable": false,
                 "complexType": {
-                    "original": "DocumentComponentInputType",
+                    "original": "DocumentComponentInputType | undefined",
                     "resolved": "XMLDocument | string | undefined",
                     "references": {
                         "DocumentComponentInputType": {
@@ -187,13 +256,13 @@ export class DocumentComponent {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The Inhoud XML."
                 },
-                "getter": false,
-                "setter": false,
+                "getter": true,
+                "setter": true,
                 "reflect": false
             },
             "open": {
@@ -317,13 +386,19 @@ export class DocumentComponent {
                 "defaultValue": "false"
             },
             "gereserveerd": {
-                "type": "boolean",
+                "type": "string",
                 "attribute": "gereserveerd",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "DocumentComponentInputType | undefined",
+                    "resolved": "XMLDocument | string | undefined",
+                    "references": {
+                        "DocumentComponentInputType": {
+                            "location": "import",
+                            "path": "./document-component.interfaces",
+                            "id": "src/components/document-component/document-component.interfaces.ts::DocumentComponentInputType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -331,19 +406,24 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Marks Document Component as reserved."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "getter": true,
+                "setter": true,
+                "reflect": false
             },
             "vervallen": {
-                "type": "boolean",
+                "type": "string",
                 "attribute": "vervallen",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "DocumentComponentInputType | undefined",
+                    "resolved": "XMLDocument | string | undefined",
+                    "references": {
+                        "DocumentComponentInputType": {
+                            "location": "import",
+                            "path": "./document-component.interfaces",
+                            "id": "src/components/document-component/document-component.interfaces.ts::DocumentComponentInputType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -351,10 +431,9 @@ export class DocumentComponent {
                     "tags": [],
                     "text": "Marks the Document Component as expired."
                 },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
+                "getter": true,
+                "setter": true,
+                "reflect": false
             },
             "openAnnotation": {
                 "type": "boolean",
@@ -393,7 +472,7 @@ export class DocumentComponent {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": true
             },
             "type": {
                 "type": "string",