@dso-toolkit/core 62.26.0 → 62.28.0

package/dist/collection/components/annotation/annotation.css

@@ -1,50 +1,62 @@
-ins {
-  text-decoration: none;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-  background-color: #e4f1d4;
-  border-color: #e4f1d4;
-  color: #191919;
-  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.25);
-}
-ins a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
-}
-ins a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
-}
-ins a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
-}
-ins a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
-}
-
-del {
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-  background-color: #f5d8dc;
-  border-color: #f5d8dc;
-  color: #191919;
-  text-decoration: line-through;
+a {
+  background-color: transparent;
+  color: var(--link-color);
+  text-decoration: underline;
 }
-del a:is(.download, .download:hover, .download:focus-visible) {
-  background-image: url("./dso-icons.svg#img-download-zwart");
+a:hover, a:focus-visible {
+  color: var(--link-hover-color);
+  text-decoration: underline;
 }
-del a:is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: url("./dso-icons.svg#img-external-link-zwart");
-}
-del a:is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-call-zwart");
+a:active {
+  text-decoration: none;
 }
-del a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: url("./dso-icons.svg#img-email-zwart");
+a:visited {
+  color: var(--link-visited-color);
+}
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+  padding-inline-end: 1.5em;
+  background-position: bottom 0 right 0;
+  background-image: url("./dso-icons.svg#img-download");
+}
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:focus-visible {
+  background-image: url("./dso-icons.svg#img-download-scampi");
+}
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+  padding-inline-end: 1.5em;
+  background-position: bottom 0 right 0;
+  background-image: url("./dso-icons.svg#img-external-link");
+}
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:focus-visible {
+  background-image: url("./dso-icons.svg#img-external-link-scampi");
+}
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+  padding-inline-start: 1.5em;
+  background-position: bottom 0 left 0;
+  background-image: url("./dso-icons.svg#img-call-grasgroen");
+}
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:focus-visible {
+  background-image: url("./dso-icons.svg#img-call-scampi");
+}
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
+  background-repeat: no-repeat;
+  background-size: 1.25em 1.25em;
+  padding-inline-start: 1.5em;
+  background-position: bottom 0 left 0;
+  background-image: url("./dso-icons.svg#img-email-grasgroen");
+}
+a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:focus-visible {
+  background-image: url("./dso-icons.svg#img-email-scampi");
 }
 
 :host {
   display: block;
+  padding: 2px;
 }
 
 :host([wijzigactie=voegtoe]) {
@@ -122,4 +134,8 @@ del a:is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-vis
 .annotation-title .content:has(+ dso-label),
 .annotation-data .content:has(+ dso-label) {
   margin-inline-end: 4px;
+}
+
+.annotation-data {
+  font-size: 0.875rem;
 }

package/dist/collection/components/annotation/annotation.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"annotation.interfaces.js","sourceRoot":"","sources":["../../../../src/components/annotation/annotation.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type AnnotationWijzigactie = \"voegtoe\" | \"verwijderd\";\r\n\r\nexport interface AnnotationActiveChangeEvent {\r\n  /**\r\n   * De huidige status van de annotatie.\r\n   */\r\n  current: boolean;\r\n\r\n  /**\r\n   * De gewenste status van de annotatie.\r\n   */\r\n  next: boolean;\r\n\r\n  originalEvent: Event;\r\n}\r\n\r\nexport type AnnotationDiff = { toegevoegd: string } | { was: string; wordt: string } | { verwijderd: string };\r\n"]}
+{"version":3,"file":"annotation.interfaces.js","sourceRoot":"","sources":["../../../../src/components/annotation/annotation.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type AnnotationWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport interface AnnotationActiveChangeEvent {\r\n  /**\r\n   * De huidige status van de annotatie.\r\n   */\r\n  current: boolean;\r\n\r\n  /**\r\n   * De gewenste status van de annotatie.\r\n   */\r\n  next: boolean;\r\n\r\n  originalEvent: Event;\r\n}\r\n"]}

package/dist/collection/components/annotation-button/annotation-button.css

@@ -481,7 +481,8 @@ a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 a.dso-tertiary.dso-truncate,

package/dist/collection/components/attachments-counter/attachments-counter.js

@@ -4,7 +4,7 @@ export class AttachmentsCounter {
         this.count = undefined;
     }
     render() {
-        return (h("span", { key: '6c0172efe12b76d30a79941c0de5354e6fba5d13', class: "dso-attachments" }, this.count, " ", h("span", { key: '098cc1c6e75dbce12fe21911001f245230520ad5', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: 'aafb92bb71efa0b7ee151c7f2b330586cc31bcda', icon: "paperclip" })));
+        return (h("span", { key: '6c3e26ea68c2dc819ea9322ee98238ca159fca6e', class: "dso-attachments" }, this.count, " ", h("span", { key: 'e9df7eff3fc69047df9d4a132774022ca731afa4', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '0bbad9b1793a77960800759d9409c472b3b51596', icon: "paperclip" })));
     }
     static get is() { return "dso-attachments-counter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/autosuggest/autosuggest.js

@@ -283,7 +283,7 @@ export class Autosuggest {
         }, []);
     }
     render() {
-        return (h(Fragment, null, h("slot", { key: '25902d545f68c0bc90c42e9fb768e080c1c8a891' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
+        return (h(Fragment, null, h("slot", { key: 'ef4290b35d4c82e2ab0aa297cd58098562484bbb' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (h("ul", { role: "listbox", "aria-live": "polite", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), hidden: !this.showSuggestions && !this.notFound }, (this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value }, h("div", { class: "suggestion-row" }, h("span", { class: "value" }, this.handleMark(suggestion, suggestion.value, "value")), suggestion.type ? (h("span", { class: "type" }, this.handleMark(suggestion, suggestion.type, "type"))) : undefined), suggestion.extras &&
                 this.getChunkedExtras(suggestion.extras).map((chunk, index) => (h("div", { class: "suggestion-row" }, chunk.map((c, i) => (h("span", { class: "extra" }, this.handleMark(suggestion, c, "extra", index * 2 + i))))))))))) ||

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

@@ -26,7 +26,8 @@
   font-size: 0.875em;
   line-height: 1;
   min-inline-size: 1.5rem;
-  padding: 4px 8px;
+  padding-block: 4px;
+  padding-inline: 8px;
   text-align: center;
 }
 .dso-badge {

package/dist/collection/components/badge/badge.interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=badge.interfaces.js.map

package/dist/collection/components/badge/badge.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.interfaces.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export type BadgeStatus = \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\";\r\n"]}

package/dist/collection/components/badge/badge.js

@@ -5,7 +5,7 @@ export class Badge {
         this.status = undefined;
     }
     render() {
-        return (h("span", { key: '8ae2d297040799c18e286b084ed761d3538c23f3', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '08748c51706389028be923917aad1133542cf04b' })));
+        return (h("span", { key: '2bb9ba75d3f55a887f805727189592504c5e17bd', class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", { key: '6242b1b45ca07ef5789fb5f9fde005448235ea4a' })));
     }
     static get is() { return "dso-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -25,9 +25,15 @@ export class Badge {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\"",
+                    "original": "BadgeStatus",
                     "resolved": "\"attention\" | \"danger\" | \"error\" | \"info\" | \"outline\" | \"primary\" | \"success\" | \"warning\" | undefined",
-                    "references": {}
+                    "references": {
+                        "BadgeStatus": {
+                            "location": "import",
+                            "path": "./badge.interfaces",
+                            "id": "src/components/badge/badge.interfaces.ts::BadgeStatus"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,

package/dist/collection/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,OAAO,KAAK;;;;IAOhB,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;YACvE,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\";\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,IAAI,MAAM,MAAM,CAAC;AAQxB,MAAM,OAAO,KAAK;;;;IAOhB,MAAM;QACJ,OAAO,CACL,6DAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;YACvE,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { BadgeStatus } from \"./badge.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: BadgeStatus;\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/banner/banner.css

@@ -9,9 +9,11 @@
 }
 
 .dso-banner {
-  padding: 16px 0;
+  padding-block: 16px;
+  padding-inline: 0;
   position: relative;
 }
 .dso-banner.dso-compact {
-  padding: 12px 0;
+  padding-block: 12px;
+  padding-inline: 0;
 }

package/dist/collection/components/banner/banner.js

@@ -7,9 +7,9 @@ export class Banner {
         this.noIcon = true;
     }
     render() {
-        return (h("section", { key: '7b598c5ca499588cfeb894d65864f28adc552c71', class: clsx("dso-banner", `alert-${this.status}`, {
+        return (h("section", { key: '4c3db4e3d1cb2b0de13dc2d7fd562b591102a1d4', class: clsx("dso-banner", `alert-${this.status}`, {
                 "dso-compact": this.compact,
-            }), role: "alert" }, h("slot", { key: '4ecf1e6d785c3b006a7042245c3f6ae8511a47ad' })));
+            }), role: "alert" }, h("slot", { key: '7a6dc8d1e60f63a28fbd5762b37e1e6744ee0ea6' })));
     }
     static get is() { return "dso-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/card.js

@@ -50,9 +50,9 @@ export class Card {
     render() {
         const isSelectable = this.selectableSlottedElement !== null;
         const hasImage = this.imageSlottedElement !== null;
-        return (h(Host, { key: '8bd90130bed0df984bcf89aab7b807eef97794c5', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, h("div", { key: '50109582e85cc45cf805c1166075f42344912b36', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: '340edc1a1868cbac5583e2b7b9e323881c5d1148', name: "selectable" })), h("div", { key: 'debbca0ce003139f992f12249baf3eb58fdee6ca', class: "dso-card-image", hidden: !hasImage }, h("slot", { key: '1cc32cc8e1a52519534de22348d7321ffd6866ba', name: "image" })), h("div", { key: 'ebe0ac5c0343b4f3b8c06b563048ea624303e353', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" })))) ||
+        return (h(Host, { key: '16df08d7deb23d44de3919a212da749eb24b2aa3', onClick: (e) => this.clickEventHandler(e), "is-selectable": isSelectable, "has-image": hasImage }, h("div", { key: '06f68ba992964e076cc91b1008b3d90654660eb8', class: "dso-card-selectable", hidden: !isSelectable }, h("slot", { key: 'fdf924e13b4be544bd96999592a2d9c1fca43b93', name: "selectable" })), h("div", { key: '4e788d7258092d3c8b648502fa215a0286454cef', class: "dso-card-image", hidden: !hasImage }, h("slot", { key: '48f5c3ccfcc61d72a33a4f3b596cea0f766a328d', name: "image" })), h("div", { key: 'c2baf8f68141776219211d78c610312b4979b5f6', class: "dso-card-heading" }, this.headingSlottedElement instanceof HTMLAnchorElement || !this.href ? (h("slot", { name: "heading" })) : (((!this.mode || !["download", "extern"].includes(this.mode)) && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "chevron-right" })))) ||
             (this.mode === "extern" && (h("a", { href: this.href, class: "heading-anchor", target: "_blank", rel: "noopener noreferrer" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)")))) ||
-            (this.mode === "download" && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && h("slot", { key: 'd373f9d92186fbc3932fe51cd0d087632fb43304', name: "interactions" })), h("div", { key: '8878c53b0ccc984b68252c3eae22dc103cc58d84', class: "dso-card-content" }, h("slot", { key: 'eb8213fad4e11c237a57258f9802694df1075a6e', name: "content" }))));
+            (this.mode === "download" && (h("a", { href: this.href, class: "heading-anchor" }, h("slot", { name: "heading" }), h("dso-icon", { icon: "download" }))))), this.interactionsSlottedElement !== null && h("slot", { key: 'd6885f759a3ac7e44dd44aa5e3a0107dde02a640', name: "interactions" })), h("div", { key: '61dc016e0ac2a82da7555e3c3df8f61104e37c49', class: "dso-card-content" }, h("slot", { key: 'abe3a8a00a3744f456b65fb4d8c6f7be026a68be', name: "content" }))));
     }
     static get is() { return "dso-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-container/card-container.js

@@ -4,7 +4,7 @@ export class CardContainer {
         this.mode = "list";
     }
     render() {
-        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '2cd997846ae44ff29f3ec19b8e1c859d87e0db9b', class: "dso-card-list" }, h("slot", { key: 'b822f07618e1e98fb85825116eebb36901a5566c' }))), this.mode === "grid" && (h("div", { key: '892bd332b724317043b0c550831e624290c0b00b', class: "dso-card-grid" }, h("slot", { key: '92d11bac52fab9500d5ee7ce737568305cab7a61' })))));
+        return (h(Fragment, null, this.mode === "list" && (h("ul", { key: '6dc72f5395a0cdcb8fd11a2882ae94d946d14f06', class: "dso-card-list" }, h("slot", { key: 'e2c5ab66a35ae0db798bec1e62e382c5be4c8ff7' }))), this.mode === "grid" && (h("div", { key: '4a6d756341eaf9f3d79f1ee07bf09831669bfaa8', class: "dso-card-grid" }, h("slot", { key: '676e0db13a13bfaad87a0d5894038539c43e09c8' })))));
     }
     static get is() { return "dso-card-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker.css

@@ -9,7 +9,8 @@
   display: block;
   inline-size: 100%;
   block-size: 40px;
-  padding: 6px 14px;
+  padding-block: 6px;
+  padding-inline: 14px;
   font-size: 1rem;
   line-height: 1.5;
   color: #191919;

package/dist/collection/components/date-picker/date-picker.js

@@ -95,7 +95,7 @@ export class DsoDatePicker {
     }
     render() {
         var _a;
-        return (h("input", { key: '72dccab73e365afc3991773db7a4a96d2e38d8b4', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
+        return (h("input", { key: '362ca534eec500da8a2a736a93e96fc7437e72bf', type: "date", id: this.identifier, class: "dso-date__input", value: parseToValueFormat(this.value), name: this.name, min: parseToValueFormat(this.min), max: parseToValueFormat(this.max), disabled: this.disabled || undefined, required: this.required || undefined, "aria-autocomplete": "none", "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": this.describedBy, autoComplete: "off", autofocus: this.dsoAutofocus || undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, onChange: this.handleInputChange }));
     }
     static get is() { return "dso-date-picker"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/date-picker-legacy/date-picker-legacy.css

@@ -29,7 +29,8 @@
   display: block;
   inline-size: 100%;
   block-size: 40px;
-  padding: 6px 14px;
+  padding-block: 6px;
+  padding-inline: 14px;
   font-size: 1rem;
   line-height: 1.5;
   color: #191919;

package/dist/collection/components/date-picker-legacy/date-picker-legacy.js

@@ -419,14 +419,14 @@ export class DsoDatePickerLegacy {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: 'd14bbb1fa4a6fa9496b9790b5c8e7fe3b3e1e995' }, h("div", { key: '7799d1d402293ea89713f93a7e306793ebafa41f', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: 'f1183710c97e80d989755adf4ba775ec5a2b2b85', class: "dso-date__input-wrapper" }, h("input", { key: '67b4f456f2a653169660eb0e0294a86170a61851', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: '8a193722292c56fe7abf08ae93f17fa40ca9d40f', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '1fa5d897acc0081cf347dfa60268788772ba5a62', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'a1dd69e476e6ed633d8329be90d2fb4fea2f8926', icon: "calendar" })), h("span", { key: 'cb3e00a758bd93b709e93e2b5eeff6616c59114d', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '26753798debaabcd060afdfe9c8572761ea9d02e' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: '18aba1ca1ec0a28a17e7ef67a26561082d2ee7c5', class: {
+        return (h(Host, { key: 'b3d2e7c01f27e48d26ca81c369d05a45e094c832' }, h("div", { key: 'adcc83d03b59da99459daad8d196100519ae8598', class: { "dso-date": true, "dso-visible": this.visible } }, h("div", { key: '3c8e690cd886af5c9c45f93696b9ebeb376c7035', class: "dso-date__input-wrapper" }, h("input", { key: '7035facb84ae39d5539d05e055f7a5faee73c012', class: "dso-date__input", value: this.value, placeholder: this.localization.placeholder, id: this.identifier, disabled: this.disabled, role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, required: this.required ? true : undefined, "aria-autocomplete": "none", "aria-invalid": (_b = this.invalid) === null || _b === void 0 ? void 0 : _b.toString(), "aria-describedby": this.describedBy, onInput: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown, autoComplete: "off", ref: (element) => (this.datePickerLegacyInput = element) }), h("button", { key: 'b2edba4d4c5743db852290e753b52d77ef123950', type: "button", class: "dso-date__toggle", onClick: this.toggleOpen, disabled: this.disabled, ref: (element) => (this.datePickerLegacyButton = element) }, h("span", { key: '8670a2db8ed7523ac5eb3d1a58235e5a0cc8289f', class: "dso-date__toggle-icon" }, h("dso-icon", { key: 'f7212888038a682fe74e8f8e6e84221a49f4cb28', icon: "calendar" })), h("span", { key: 'bd9b68a6957d97c0c16159a2a08a348463ca12b5', class: "dso-date__vhidden" }, this.localization.buttonLabel, formattedDate && (h("span", { key: '1f77a53aad38689238da7195247f0c3bbfc2b0d6' }, ", ", this.localization.selectedDateMessage, " ", formattedDate))))), h("div", { key: 'a52db3244f796435c39553e7b94fd3dfa48e1935', class: {
                 "dso-date__dialog": true,
                 "is-left": this.direction === "left",
                 "is-active": this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'a2cb4eac5ebe13f6ac32b3226b74300b5100afad', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '767c3234e62982a414c221a8c2c1f5fee04d5ce5', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '72a45a35e721bec9b4117f09df5e1047bf6ec717', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: 'fe9ef5e66bb819c2f4610dbd7eb8f6332f1aa446', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '22bb3ab6cd85c71fd5ca22311fde0f061260ad3d', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '7cd44065f4eceb4be7955ed991b2affe79b8f20d', icon: "times" }), h("span", { key: '70304b3e5cf5391e3a3b549bc7c66ff1589849a9', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: 'f50e6ae68c829ef6c67b61e08f261ca13ffbb384', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'dbf18c6f73053877a3788cc580ff13c8e2dcb000' }, h("h2", { key: '18540ccb64bfd82e8d9a9c58e8c0f39809d52ba4', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: 'cc79dd0065f3e4010e5344b40c57bd3f7390d9e5', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '97578788ea819c9e6fb23e10e39fa638dd6bf51d', class: "dso-date__select" }, h("select", { key: 'dbbfaf38efae5a17742ecd8a859a1d835da1d193', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '078d2aa2ac865a1d49a2c22c19da137969a3650b', class: "dso-date__dialog-content", onKeyDown: this.handleEscKey }, h("div", { key: '48f76b95bb6a37ea742bcf6bed4c6005eba839a4', class: "dso-date__vhidden dso-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'af746900f6e52f32de832b87a176593e2746cd64', class: "dso-date__mobile", onFocusin: this.disableActiveFocus }, h("label", { key: '6cdc84ecf6372ac9097b8bf5dd643f499691cf61', class: "dso-date__mobile-heading" }, this.localization.calendarHeading), h("button", { key: '05d3293761177ba271c6724b7226ab573962f2d1', class: "dso-date__close", ref: (element) => (this.firstFocusableElement = element), onKeyDown: this.handleFirstFocusableKeydown, onClick: () => this.hide(), type: "button" }, h("dso-icon", { key: '7e5df245b7724e4db5806d5f08638cad0adfb0ef', icon: "times" }), h("span", { key: 'd21e9fb1eff589d88d16ad47e08f220c3d5530dd', class: "dso-date__vhidden" }, this.localization.closeLabel))), h("div", { key: '3d5cb8f2fb76df5de03ffe060a312b79128867a0', class: "dso-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: '559c1774017da99d78f6d11404fa441cbda497d8' }, h("h2", { key: '9e015f5178718c3707c6e28ee9edb51671dacbc4', id: this.dialogLabelId, class: "dso-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], " ", this.focusedDay.getFullYear()), h("label", { key: '2699da4bbdd56a8508fdc1192318ceb2a2b61600', htmlFor: this.monthSelectId, class: "dso-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '8d85382cb79adc212769b43dce0c63e844ac1288', class: "dso-date__select" }, h("select", { key: '7e8f7367d3eea300587b0e6d113a482691fd08fe', id: this.monthSelectId, class: "dso-date__select--month", ref: (element) => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, monthRange(this.localization, selectedYear, minDate, maxDate).map((month) => {
             const index = this.localization.monthNames.indexOf(month);
             return (h("option", { key: month, value: index, selected: index === focusedMonth }, month));
-        })), h("div", { key: '3199841b30d6e8735446f3d67c48300898cb2512', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'aca70d70bfaad605d9b399b58757b795cc6486ad' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: 'd1e2bdb898278c6f6ba6fc3fce3c54bacc4300e6', icon: "chevron-down" }))), h("label", { key: 'e85a464a083d160ebe2da35435d4d6b8e70594e6', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'c9bb89e82bdce8242c5b88a8c0422bb713f4649f', class: "dso-date__select" }, h("select", { key: '8db7da290dddc3c31519e8b62d8593f3c3ae25c9', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '1d6a4dd37a71e6a25167552e54033f8caba5c926', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '53c46f3503fbe521b3363130cef2c0e77c5a76d1' }, this.focusedDay.getFullYear()), h("dso-icon", { key: '646d1d9262090f0d31244f87d9d1e7a992712445', icon: "chevron-down" })))), h("div", { key: '177c07ee02756bf8d2d562d891b85f525fdf0459', class: "dso-date__nav" }, h("button", { key: '1496337177df07d457f0ee15e70c6cfcc95d54f0', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: 'af2ffd8b999268c0bf001822e5951060054332b0', icon: "chevron-left" }), h("span", { key: 'e3592b7a770f78223cd02a466375fb86b7c34670', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '695b50d73c7ed486cef08b010d77166baaf51545', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '007286ed973be218e37c6161bf2ad686726a632e', icon: "chevron-right" }), h("span", { key: 'c67ebbd7023e2ff3fbae2e06e1f534c8c5507c83', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '9a7f19704f9774f0e915f9180ccfdbdbfe69ff56', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
+        })), h("div", { key: '3aec4bfa9aed416549469c774ca7990334986abb', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: '654fbd89bd61af259af4a4f798f55f450efd8c91' }, this.localization.monthNamesShort[focusedMonth]), h("dso-icon", { key: '8d11e6d7391bed1065c9b2c0ee44f1f6dc0bed73', icon: "chevron-down" }))), h("label", { key: 'c78b8385eda7cfcc2695f0282382ac5aad249f77', htmlFor: this.yearSelectId, class: "dso-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '63b47ea8b8ca5a74ed874f4f9ed733174bb48370', class: "dso-date__select" }, h("select", { key: '591e66e848ec4fae139fdccacc8528dec6170de1', id: this.yearSelectId, class: "dso-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'f977ee13bda31f9ac716f43fa5eb8ec06296d2e9', class: "dso-date__select-label", "aria-hidden": "true" }, h("span", { key: 'e3ecb3b26f76beffb16bf90a2c261e50511ba396' }, this.focusedDay.getFullYear()), h("dso-icon", { key: 'd58cbe75109f9590e037bd215f549b85c32d0c80', icon: "chevron-down" })))), h("div", { key: '5480551f8f0f4a61ea6e74bde86063eb581272d1', class: "dso-date__nav" }, h("button", { key: '8283614fe659f5ac42aaaaaf519aeeaa8285779b', class: "dso-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("dso-icon", { key: '4f34550c65c77e1b51ba1c6a8ae8761641f07df5', icon: "chevron-left" }), h("span", { key: 'd7a6cb5244d940146bcc9dd805f98ad5f3f598d8', class: "dso-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '087cc800c8f71573085cb286573a577170ff6fda', class: "dso-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("dso-icon", { key: '1d475a20f501a7b6584441df913b331aa511ce1e', icon: "chevron-right" }), h("span", { key: 'f30e4ee5c60cd16202295988021181ddaa61dd99', class: "dso-date__vhidden" }, this.localization.nextMonthLabel)))), h(DatePickerLegacyMonth, { key: '83bdd8b89200fd9efccf36cd84830d24341eb525', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate }))))));
     }
     static get is() { return "dso-date-picker-legacy"; }
     static get encapsulation() { return "scoped"; }

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

@@ -481,7 +481,8 @@ a.dso-tertiary.dso-align,
 button.dso-tertiary.dso-align,
 label.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
-  padding: 11px 0;
+  padding-block: 11px;
+  padding-inline: 0;
   position: relative;
 }
 a.dso-tertiary.dso-truncate,

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

@@ -1,6 +1,6 @@
 import { h, Fragment, Host } from "@stencil/core";
 import { Heading } from "./document-component-heading";
-const wijzigActieLabels = {
+const wijzigactieLabels = {
     nieuweContainer: "Toegevoegd",
     verwijder: "Verwijderd",
     verwijderContainer: "Verwijderd",
@@ -50,7 +50,7 @@ export class DocumentComponent {
         this.recursiveToggle = undefined;
     }
     get wijzigactieLabel() {
-        return this.wijzigactie && wijzigActieLabels[this.wijzigactie];
+        return this.wijzigactie && wijzigactieLabels[this.wijzigactie];
     }
     suffix() {
         if (this.vervallen) {
@@ -73,7 +73,7 @@ export class DocumentComponent {
             this.alternativeTitle ||
             this.bevatOntwerpInformatie ||
             this.annotated);
-        return (h(Host, { key: 'bfb6ee555854e4b5cf73278d24d7008fe6830f25', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'a90998f51f2f93af10a667edab2731d9caca5421', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: 'd66d044fbe0f5f75b263071d4b2a3cc122d1abc9', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '42483d8c800562b35ad6a76927374370b34be36b', class: "heading" }, h(Heading, { key: 'f9238bedcd71c2ca51ea8fff5c10b253840f68ce', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: 'a43c96ea95b7a9fdafa9632225bb8df51136ed74', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: '4f1c732778247ff4e156b6225c3381a78ff4a235', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: '341e01ae5d69ad4f78c251cbe49865921da5f56d', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: '4dad4090fe0054f3cbf8146069fdd64daaca6ad7', id: "heading-title" }, this.notApplicable && h("span", { key: '37183d391273c8fcf694bfcf57a95f28556abe88', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: 'e970e149aeb3735ddd1fb4299c7a61c2405cbcb1' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: 'b1f1ebeb5dd3efe83326236ac51fa915c26262db', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: 'd71571572d3071403034541975b2a29aef522ce5', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: '128dbe34a933ee699d00fef842fbe40356b52fc0', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: 'a4b90bbf0360057ef127c65cc56dd0bc40f1e0f8', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: '916b60fd300f8e162620d8172972eb28a3bb1202', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: '5e654b7ced1bf120ee164a11c123da58816e1f0d', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { key: '0db088fd3f9e6f9cf88da28c5ebcde644353231a', identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { key: '18c677d218b278f1d039e64fe30e1ba8945a7891', class: "annotation-container", part: "_annotation-container" }, h("slot", { key: '5a879818dd41c7fd40db0852269f3a12a4db8ae8', name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: '25e96f13592ccb1415e328052393ed1e868e7f1e', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: 'ca4ee8e1284a6bc6c6fb27634d8f1f86180dedcd', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: '577762a1aa10a4654d9748180b8f8a0d7f52ab23', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '8658cf6fb010891db2e60ab33ab792249f949988', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, 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" })) })))), h("div", { key: 'bd867aa6ecaf8c164bfc0d2f947f458f39328494', class: "children-container", part: "_children-container" }, h("slot", { key: 'ba82d8cc66f94af76621755131f49b0ed8925683' }))));
+        return (h(Host, { key: '63102638c909c58603a123183e2489f25e3ad423', "not-collapsible": !collapsible }, showHeading && (h("div", { key: 'ecabb72de6fde2d2908e7d137a31409d1387fdbb', class: "heading-container", part: "_heading-container" }, this.wijzigactie && h("span", { key: '4e2a0529032e98e03a05ccaa9ba56ebc2f5fd91b', class: "editaction-label" }, this.wijzigactieLabel, ":"), h("div", { key: '8cd91b7f3faab4f45709773754b442f51ddded8c', class: "heading" }, h(Heading, { key: 'bac64c70e569a009894b9dc4dbc86e993469bea0', heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, collapsible && (h("button", { key: '729401d461291f30fa571d7073e6eed93fdf31c9', type: "button", class: "toggle-button", "aria-describedby": "heading-title", "aria-expanded": this.open.toString() }, h("dso-icon", { key: '517cb743324726da53036f96c025f995c2e6253d', icon: this.open ? "chevron-down" : "chevron-right" }), h("span", { key: 'f4eaee860a64d5a7493a238aa7345e34db039f8b', class: "sr-only" }, this.open ? "Invouwen" : "Uitvouwen"))), h("div", { key: '35196a7d98b3618d9c8aae8844c38609dd1c1855', id: "heading-title" }, this.notApplicable && h("span", { key: '35f3ce86102ff10ba9bea0439b630fcbfca8b568', class: "sr-only" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "label"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "label" })), inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "nummer"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "nummer" })), inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, onDsoAnchorClick: this.handleOzonContentAnchorClick, mark: this.mark && ((text) => { var _a; return (_a = this.mark) === null || _a === void 0 ? void 0 : _a.call(this, text, "opschrift"); }), onDsoOzonContentMarkItemHighlight: (e) => this.dsoMarkItemHighlight.emit(Object.assign(Object.assign({}, e.detail), { source: "opschrift" })), inline: true }))))) : (this.alternativeTitle), suffix && h("span", { key: '94f7abf9d6e5f7de6fcba59f4525feff00e584eb' }, " - [", suffix, "]"))), this.recursiveToggle !== undefined && this.open && (h("button", { key: 'f4bf9b4462a209e1b91a347b4b972405ec0f4266', type: "button", class: "recursive-toggle", title: this.recursiveToggle === true ? "Verberg alles" : "Toon alles", onClick: this.handleRecursiveToggleClick }, h("dso-icon", { key: 'dc4ad4b147b33eb946de0e09a84b767c0daa9878', icon: this.recursiveToggle === true ? "eye" : "eye-slash" }))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { key: 'd170c7a32f13feac1d6cf5a2dcefacda4761905c', status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { key: 'c1172b60ca185ea8c3df906c388e2480a886a10a', id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { key: 'd1f96f8943f3856070abfd423e5e409f28c873c2', class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { key: 'd158dc033a2f146a19fc413ca5a85b69a5332d09', status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { key: 'd3c2048e413e013f70674b1de1c48c5010dd19f1', identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) }))))))), h("div", { key: '0412d56009861b74d7ece8df02851f7156ca5182', class: "annotation-container", part: "_annotation-container" }, h("slot", { key: 'ef083f232dd643c9728d623ca761834d82d28aa3', name: "annotation" })), this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (h("div", { key: 'c194dfe7bc12a29dc58b954ad9e37ca404eff57e', class: "content", part: "_content" }, this.gereserveerd && (h("dso-alert", { key: '00de952c5e5ac72d2a57dd256dbe636cb4a8c017', status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), this.vervallen && h("dso-alert", { key: 'f416e20ac837d8d9536ea6f847b3bca3fe603a4c', status: "info" }, "Dit onderdeel is vervallen."), this.inhoud && (h("dso-ozon-content", { key: '3ccfcb88de6f11bb47117e976bf7ff46914be139', content: this.inhoud, onDsoAnchorClick: this.handleOzonContentAnchorClick, 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" })) })))), h("div", { key: 'f8c2445816a735a4a3c6a99ccb1eb92d32370db8', class: "children-container", part: "_children-container" }, h("slot", { key: '34c8a8c1d9411097a0d87368e6173c2a69414ecc' }))));
     }
     static get is() { return "dso-document-component"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"document-component.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigActieLabels: { [wijzigActie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   */\r\n  @Prop()\r\n  label?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   */\r\n  @Prop()\r\n  nummer?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   */\r\n  @Prop()\r\n  opschrift?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation Output is opened, set this to true.\r\n   */\r\n  @Prop()\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: DocumentComponentMarkFunction;\r\n\r\n  /**\r\n   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n   */\r\n  @Prop()\r\n  recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n  /**\r\n   * Emitted when the user activates the recursive toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  /**\r\n   * Emitted each time a marked item gets highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigActieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n    this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n  };\r\n\r\n  private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n    this.dsoRecursiveToggle.emit({\r\n      originalEvent: e,\r\n      current: this.recursiveToggle,\r\n      next: this.recursiveToggle !== true,\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n    const collapsible = !!(\r\n      (this.label || this.nummer || this.opschrift || this.alternativeTitle) &&\r\n      this.type !== \"LID\"\r\n    );\r\n    const showHeading = !!(\r\n      this.wijzigactie ||\r\n      collapsible ||\r\n      this.label ||\r\n      this.nummer ||\r\n      this.opschrift ||\r\n      this.alternativeTitle ||\r\n      this.bevatOntwerpInformatie ||\r\n      this.annotated\r\n    );\r\n\r\n    return (\r\n      <Host not-collapsible={!collapsible}>\r\n        {showHeading && (\r\n          <div class=\"heading-container\" part=\"_heading-container\">\r\n            {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n            <div class=\"heading\">\r\n              <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n                {collapsible && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <div id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n                  {this.label || this.nummer || this.opschrift ? (\r\n                    <>\r\n                      {this.label && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.label}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.nummer && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.nummer}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.opschrift && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.opschrift}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    this.alternativeTitle\r\n                  )}\r\n                  {suffix && <span> - [{suffix}]</span>}\r\n                </div>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && (\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"recursive-toggle\"\r\n                  title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n                  onClick={this.handleRecursiveToggleClick}\r\n                >\r\n                  <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n                </button>\r\n              )}\r\n              {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n                <>\r\n                  <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                    !\r\n                  </dso-badge>\r\n                  <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n                </>\r\n              )}\r\n              {(this.bevatOntwerpInformatie || this.annotated) && (\r\n                <div class=\"addons\">\r\n                  {this.bevatOntwerpInformatie && (\r\n                    <dso-label status=\"warning\" compact>\r\n                      Ontwerp\r\n                    </dso-label>\r\n                  )}\r\n                  {this.annotated && (\r\n                    <dso-annotation-button\r\n                      identifier=\"expandable\"\r\n                      open={this.openAnnotation}\r\n                      onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    ></dso-annotation-button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        <div class=\"annotation-container\" part=\"_annotation-container\">\r\n          <slot name=\"annotation\" />\r\n        </div>\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (\r\n          <div class=\"content\" part=\"_content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n            {this.inhoud && (\r\n              <dso-ozon-content\r\n                content={this.inhoud}\r\n                onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"document-component.js","sourceRoot":"","sources":["../../../../src/components/document-component/document-component.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop, Host } from \"@stencil/core\";\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentOzonContentAnchorClickEvent,\r\n  DocumentComponentWijzigactie,\r\n  DocumentComponentInputType,\r\n  DocumentComponentMarkFunction,\r\n  DocumentComponentMarkItemHighlightEvent,\r\n  DocumentComponentRecursiveToggleEvent,\r\n  DocumentComponentRecursiveToggleState,\r\n} from \"./document-component.models\";\r\nimport { OzonContentAnchorClickEvent } from \"../ozon-content/ozon-content.interfaces\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nimport { DsoOzonContentCustomEvent } from \"../../components\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n/**\r\n * @part _annotation-container - private part, do not touch.\r\n * @part _children-container - private part, do not touch.\r\n * @part _content - private part, do not touch.\r\n * @part _heading-container - private part, do not touch.\r\n */\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   */\r\n  @Prop()\r\n  label?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   */\r\n  @Prop()\r\n  nummer?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   */\r\n  @Prop()\r\n  opschrift?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: DocumentComponentInputType;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation Output is opened, set this to true.\r\n   */\r\n  @Prop()\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: DocumentComponentMarkFunction;\r\n\r\n  /**\r\n   * Shows the recursive toggle button. When the user activates this button the event `dsoRecursiveToggle` is emitted.\r\n   */\r\n  @Prop()\r\n  recursiveToggle: DocumentComponentRecursiveToggleState;\r\n\r\n  /**\r\n   * Emitted when the user activates the recursive toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoRecursiveToggle!: EventEmitter<DocumentComponentRecursiveToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user actives intRef or intIoRef anchors in Ozon Content\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentAnchorClick!: EventEmitter<DocumentComponentOzonContentAnchorClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  /**\r\n   * Emitted each time a marked item gets highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoMarkItemHighlight!: EventEmitter<DocumentComponentMarkItemHighlightEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigactieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  private handleOzonContentAnchorClick = (e: DsoOzonContentCustomEvent<OzonContentAnchorClickEvent>) => {\r\n    this.dsoOzonContentAnchorClick.emit({ originalEvent: e, ozonContentAnchorClick: e.detail });\r\n  };\r\n\r\n  private handleRecursiveToggleClick = (e: MouseEvent) => {\r\n    this.dsoRecursiveToggle.emit({\r\n      originalEvent: e,\r\n      current: this.recursiveToggle,\r\n      next: this.recursiveToggle !== true,\r\n    });\r\n  };\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n    const collapsible = !!(\r\n      (this.label || this.nummer || this.opschrift || this.alternativeTitle) &&\r\n      this.type !== \"LID\"\r\n    );\r\n    const showHeading = !!(\r\n      this.wijzigactie ||\r\n      collapsible ||\r\n      this.label ||\r\n      this.nummer ||\r\n      this.opschrift ||\r\n      this.alternativeTitle ||\r\n      this.bevatOntwerpInformatie ||\r\n      this.annotated\r\n    );\r\n\r\n    return (\r\n      <Host not-collapsible={!collapsible}>\r\n        {showHeading && (\r\n          <div class=\"heading-container\" part=\"_heading-container\">\r\n            {this.wijzigactie && <span class=\"editaction-label\">{this.wijzigactieLabel}:</span>}\r\n            <div class=\"heading\">\r\n              <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n                {collapsible && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"toggle-button\"\r\n                    aria-describedby=\"heading-title\"\r\n                    aria-expanded={this.open.toString()}\r\n                  >\r\n                    <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                    <span class=\"sr-only\">{this.open ? \"Invouwen\" : \"Uitvouwen\"}</span>\r\n                  </button>\r\n                )}\r\n                <div id=\"heading-title\">\r\n                  {this.notApplicable && <span class=\"sr-only\">Niet van toepassing:</span>}\r\n                  {this.label || this.nummer || this.opschrift ? (\r\n                    <>\r\n                      {this.label && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.label}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"label\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"label\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.nummer && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.nummer}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"nummer\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"nummer\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                      {this.opschrift && (\r\n                        <>\r\n                          {\" \"}\r\n                          <dso-ozon-content\r\n                            content={this.opschrift}\r\n                            onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                            mark={this.mark && ((text) => this.mark?.(text, \"opschrift\"))}\r\n                            onDsoOzonContentMarkItemHighlight={(e) =>\r\n                              this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"opschrift\" })\r\n                            }\r\n                            inline\r\n                          ></dso-ozon-content>\r\n                        </>\r\n                      )}\r\n                    </>\r\n                  ) : (\r\n                    this.alternativeTitle\r\n                  )}\r\n                  {suffix && <span> - [{suffix}]</span>}\r\n                </div>\r\n              </Heading>\r\n              {this.recursiveToggle !== undefined && this.open && (\r\n                <button\r\n                  type=\"button\"\r\n                  class=\"recursive-toggle\"\r\n                  title={this.recursiveToggle === true ? \"Verberg alles\" : \"Toon alles\"}\r\n                  onClick={this.handleRecursiveToggleClick}\r\n                >\r\n                  <dso-icon icon={this.recursiveToggle === true ? \"eye\" : \"eye-slash\"} />\r\n                </button>\r\n              )}\r\n              {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n                <>\r\n                  <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                    !\r\n                  </dso-badge>\r\n                  <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n                </>\r\n              )}\r\n              {(this.bevatOntwerpInformatie || this.annotated) && (\r\n                <div class=\"addons\">\r\n                  {this.bevatOntwerpInformatie && (\r\n                    <dso-label status=\"warning\" compact>\r\n                      Ontwerp\r\n                    </dso-label>\r\n                  )}\r\n                  {this.annotated && (\r\n                    <dso-annotation-button\r\n                      identifier=\"expandable\"\r\n                      open={this.openAnnotation}\r\n                      onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                    ></dso-annotation-button>\r\n                  )}\r\n                </div>\r\n              )}\r\n            </div>\r\n          </div>\r\n        )}\r\n        <div class=\"annotation-container\" part=\"_annotation-container\">\r\n          <slot name=\"annotation\" />\r\n        </div>\r\n        {this.open && (this.inhoud || this.gereserveerd || this.vervallen) && (\r\n          <div class=\"content\" part=\"_content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            {this.vervallen && <dso-alert status=\"info\">Dit onderdeel is vervallen.</dso-alert>}\r\n            {this.inhoud && (\r\n              <dso-ozon-content\r\n                content={this.inhoud}\r\n                onDsoAnchorClick={this.handleOzonContentAnchorClick}\r\n                mark={this.mark && ((text) => this.mark?.(text, \"inhoud\"))}\r\n                onDsoOzonContentMarkItemHighlight={(e) =>\r\n                  this.dsoMarkItemHighlight.emit({ ...e.detail, source: \"inhoud\" })\r\n                }\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n        <div class=\"children-container\" part=\"_children-container\">\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -164,7 +164,7 @@ export class DocumentComponentDemo {
     render() {
         var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '339487398b5c24fdd00149a7c6d7a05d8ea8bd62', class: "dso-document-components" }, h("div", { key: '7ff73aeccd8875ab6314201455ef6aeb796a4d4e', class: "dso-navbar" }, h("ul", { key: 'a0f084c3bb26dfdea1ab2c6fa260f728db1bd69e', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: '5a0cc3db80919c48c391dc9d64b4e6d15f3186dd', path: [this.document] })));
+        return (h("dso-responsive-element", { key: 'bf9c96a21a48cfc22a48dc0abe180a279e87b8c4', class: "dso-document-components" }, h("div", { key: 'c5218864cd4107b14747649006858b844228d506', class: "dso-navbar" }, h("ul", { key: '1d541a4b1e5eba40580b8c93f9c588702dfc4254', class: "dso-nav dso-nav-sub" }, (_b = (_a = this.getEmbeddedDocumentComponents(this.response)) === null || _a === void 0 ? void 0 : _a.documentComponents) === null || _b === void 0 ? void 0 : _b.map((d) => (h("li", { class: this.document === d ? "dso-active" : undefined }, h(MenuButton, { documentComponent: d })))))), this.document && h(DocumentComponent, { key: 'c1c25135ab8751ba2002fbba8e8dd80f2b341315', path: [this.document] })));
     }
     static get is() { return "dsot-document-component-demo"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/dropdown-menu/dropdown-menu.js

@@ -208,7 +208,7 @@ export class DropdownMenu {
         (_a = tabbables[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        return (h(Host, { key: '780e049d0f7971387dd4980413cdff233dac637c', onFocusout: this.focusOutListener }, h("slot", { key: '453e8e683a525196ddf717ff8a9f6706c6819975', name: "toggle" }), h("div", { key: '3a891b4d5a05ff25a7c6826f96455d9ffcb2eb01', hidden: !this.open }, h("slot", { key: 'b584d5dbf8776ebcdb4ca23dc572ef367728d0be' }))));
+        return (h(Host, { key: '051e0e49f0787115d3c0d32d64afd9925bbf7015', onFocusout: this.focusOutListener }, h("slot", { key: '19ef2a3cd39f922e97e6bdb2700fafa64f3c34ee', name: "toggle" }), h("div", { key: '07476f4d79b5eadab813d522381a4e918bb12e5e', hidden: !this.open }, h("slot", { key: 'fb6106ab14abaf2bc32cb9938519b97a14127c37' }))));
     }
     static get is() { return "dso-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/helpcenter-panel/helpcenter-panel.js

@@ -77,10 +77,10 @@ export class HelpcenterPanel {
         }
     }
     render() {
-        return (h(Fragment, null, h("button", { key: '4feefc0a55d6cca8c7eacb63a6a05cceaab2c945', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: '5f65143e673f8c81a7caf57c4a1df65f5739d7da', icon: "help" }), h("span", { key: 'a2e52d76c3dd57bf3c2af14cd212c713b625fc14' }, this.label)), h("div", { key: 'cffc86409de62caa06d4923885190390780e492d', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '65c0f760c97ab3e14daa20d088f4a7c7d041e0ef', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '4f8e345279535fc2c8f00d42c7529fb37142a7f9', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
+        return (h(Fragment, null, h("button", { key: '4eb48fdad3b3ad4e196c057be9e4ca2be9acad95', type: "button", onClick: this.openClick, class: `open-button ${this.isOpen}`, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-haspopup": "dialog", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.openButtonElement = element) }, h("dso-icon", { key: '4ed80fd64c25eec34883b8254f065f880b7d41a6', icon: "help" }), h("span", { key: '1e43605ab14511b8e8d4b7628b4f2bcb19a0f57a' }, this.label)), h("div", { key: 'db5d93917c9b7c64f8b41ad63edde93df4fbc44d', id: "dso-panel-wrapper", class: `wrapper ${this.visibility}`, "aria-label": "helpcentrum", role: "dialog", ref: (element) => (this.panelWrapperElement = element) }, h("div", { key: '5024649ae6920e583242554b215ea5dd43790eb4', class: "dimscreen", onClick: this.closeClick }), h("div", { key: '83b15da9a1647e578394ea594cf6a74089e3b416', class: `iframe-container ${this.slideState}`, "aria-live": "polite" }, this.loadIframe ? (h("iframe", { src: this.iframeUrl, tabindex: "0", onLoad: () => {
                 this.createTrap();
                 this.iframeLoaded = true;
-            } })) : (h("div", null))), h("button", { key: '17f29f66e7a11910f7cbe611d5e7587cb4becbda', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '6857ebf299bda79c7783847af915baeee53fc3c2', icon: "times" }), h("span", { key: '2d186f391469a05e1f2a0fece42720cf0ff55f99', class: "sr-only" }, "sluiten")))));
+            } })) : (h("div", null))), h("button", { key: 'a20fabcb6e42397b514d0b15dd6dcaa4f5c04495', type: "button", class: `close-button ${this.isOpen}`, onClick: this.closeClick, "aria-expanded": this.isOpen === "open" ? "true" : "false", "aria-controls": "dso-panel-wrapper", ref: (element) => (this.closeButtonElement = element) }, h("dso-icon", { key: '4e06edd5f7d870db47a41b8b9ae95e7e0dcd2bf6', icon: "times" }), h("span", { key: 'd8092cfddace1390453ca1122980a524cc79993e', class: "sr-only" }, "sluiten")))));
     }
     static get is() { return "dso-helpcenter-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/highlight-box/highlight-box.js

@@ -10,7 +10,7 @@ export class HighlightBox {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '8d51ec0165aaaea5a1ebf8582c79be9a4a8ef67f', "has-counter": hasCounter }, hasCounter && h("div", { key: '21deb0ff1e55dd3cdc283921b5bf496625bbd989', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'e3a6ac0f446ab0fe94bc2c9f833b00b936a83f34', name: "icon" })), h("slot", { key: '1f424d6b7c5285e366f2db64383133bcfa3cc8f6' })));
+        return (h(Host, { key: '197d41b2fe49363ee590921008c935f43a5b1fee', "has-counter": hasCounter }, hasCounter && h("div", { key: 'f166216f13a0f703896c2c44aa89ae43d73051aa', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'd31ea4d9b291e4619ec15eb1d71142a4e8077450', name: "icon" })), h("slot", { key: '0f2a7876ea72118d06ffecd753c4c9f24c22dd7e' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js

@@ -209,7 +209,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '8d9a58ec32a61e261ce372bda5d252dac335730b', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: 'ad568e901aca0e1bb7bfb6c5cf35579fd78e97f9', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }

package/dist/collection/components/image-overlay/image-overlay.js

@@ -71,8 +71,8 @@ export class ImageOverlay {
         const { width, naturalWidth, height, naturalHeight } = imageElement;
         this.zoomable = width < naturalWidth || height < naturalHeight;
     }
-    isWijzigactie(wijzigActie) {
-        return wijzigActie === "voegtoe" || wijzigActie === "verwijder";
+    isWijzigactie(wijzigactie) {
+        return wijzigactie === "voegtoe" || wijzigactie === "verwijder";
     }
     render() {
         var _a;