@dso-toolkit/core 68.3.0 → 68.5.0

package/dist/components/dso-survey-rating.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsoSurveyRating extends Components.DsoSurveyRating, HTMLElement {}
+export const DsoSurveyRating: {
+    prototype: DsoSurveyRating;
+    new (): DsoSurveyRating;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/dso-survey-rating.js

@@ -0,0 +1,70 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './panel.js';
+
+const surveyRatingCss = ":host {\n  display: block;\n  position: absolute;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n}\n@media screen and (max-width: 480px) {\n  :host {\n    inline-size: 320px;\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    --panel-heading-padding-inline-start: 8px;\n    --panel-body-padding-inline: 8px;\n  }\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.visual-rating-labels {\n  display: flex;\n  justify-content: space-between;\n  margin-block: 8px;\n}\n\ninput[type=radio] {\n  appearance: none;\n  cursor: pointer;\n  position: absolute;\n  margin-inline: 0;\n  margin-block: 0;\n  inset-block: 8px 0;\n  inset-inline: 0;\n  z-index: 1;\n}\n\nlabel {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 48px;\n  block-size: 48px;\n  border: 1px solid #ccc;\n  border-inline-end-width: 0;\n  padding-block-start: 8px;\n}\n@media screen and (max-width: 480px) {\n  label {\n    inline-size: 43px;\n    block-size: 43px;\n  }\n}\nlabel:hover {\n  background-color: #f2f2f2;\n}\nlabel:active {\n  background-color: #e5e5e5;\n}\nlabel:first-of-type {\n  border-radius: 4px 0 0 4px;\n}\nlabel:first-of-type::before {\n  border-radius: 3px 0 0;\n}\nlabel:last-of-type {\n  border-inline-end-width: 1px;\n  border-radius: 0 4px 4px 0;\n}\nlabel:last-of-type::before {\n  border-radius: 0 3px 0 0;\n}\nlabel::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  inset-block-start: 0;\n  block-size: 8px;\n  inline-size: 100%;\n  border-block-end: 1px solid #ccc;\n}\nlabel:has(input:checked) {\n  font-weight: bold;\n}\nlabel.survey-rating-1::before, label.survey-rating-1:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #b62f41;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-1::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-1::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-1::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-1::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-2::before, label.survey-rating-2:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #ce3f51;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-2::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-2::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-2::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-2::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-3::before, label.survey-rating-3:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #e17000;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-3::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-3::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-3::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-3::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-4::before, label.survey-rating-4:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #dcd400;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-4::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-4::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-4::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-4::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-5::before, label.survey-rating-5:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #79b929;\n  border-color: #ccc;\n  color: #191919;\n}\nlabel.survey-rating-5::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"));\n}\nlabel.survey-rating-5::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"));\n}\nlabel.survey-rating-5::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"));\n}\nlabel.survey-rating-5::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"));\n}\nlabel.survey-rating-6::before, label.survey-rating-6:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #39870c;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-6::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-6::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-6::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-6::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\nlabel.survey-rating-7::before, label.survey-rating-7:has(input:checked) {\n  --link-color: currentColor;\n  --link-hover-color: currentColor;\n  --link-visited-color: currentColor;\n  background-color: #275937;\n  border-color: #ccc;\n  color: #fff;\n}\nlabel.survey-rating-7::before a:is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:is(.download, .download:hover, .download:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\nlabel.survey-rating-7::before a:is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:is(.extern, .extern:hover, .extern:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\nlabel.survey-rating-7::before a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#call-wit\"));\n}\nlabel.survey-rating-7::before a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible) {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#email-wit\"));\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n  margin-block-start: 16px;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\nbutton.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\nbutton.dso-secondary:focus, button.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\nbutton.dso-secondary:active {\n  outline: 0;\n}\nbutton.dso-secondary.extern::after, button.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\nbutton.dso-secondary:hover {\n  background-color: #d7e7ce;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary:active {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\nbutton.dso-secondary.dso-small {\n  line-height: 1rem;\n}\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di, button.dso-secondary.dso-small.extern::after, button.dso-secondary.dso-small.download::after, button.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary.dso-spinner-left[disabled], button.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\nbutton.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\nbutton.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}";
+const DsoSurveyRatingStyle0 = surveyRatingCss;
+
+const SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoSubmit = createEvent(this, "dsoSubmit", 7);
+        this.dsoClose = createEvent(this, "dsoClose", 7);
+    }
+    handleForm(e) {
+        e.preventDefault();
+        this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });
+    }
+    handleChange(e) {
+        const target = e.target;
+        this.rating = Number(target.value);
+    }
+    render() {
+        const ratings = [
+            "Heel moeilijk",
+            "Moeilijk",
+            "Redelijk moeilijk",
+            "Neutraal",
+            "Redelijk makkelijk",
+            "Makkelijk",
+            "Heel makkelijk",
+        ];
+        return (h("dso-panel", { key: 'ee2d66c3664442953dfa287dbb234f1c2b24973d', emphasized: true, onDsoCloseClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("h2", { key: '1762bf6ae0ce6c7603bdcf6986e233f71e7a48f1', slot: "heading" }, "Help ons met een onderzoek"), h("strong", { key: 'b0a318ab699be1e36b6044b115becc6682bd0bb3' }, "Hoe moeilijk of makkelijk was deze taak om uit te voeren"), h("form", { key: '3d66888af1d2d535f4723346029f9edbc03102a3', onSubmit: (e) => this.handleForm(e) }, h("div", { key: '66ed1a08b68aaa791ba1772bf2cf81f305745829', class: "visual-rating-labels", "aria-hidden": "true" }, h("span", { key: 'a0edb09da125715b09186138db492a516ecbe6ea' }, "Heel moeilijk"), h("span", { key: 'e0d3b6c28a88a4edeca0689cb5b8c62bf074ac48' }, "Heel makkelijk")), h("div", { key: '2730d1b4941f078c506bbda76af4843157abc22c', role: "radiogroup" }, ratings.map((rating, index) => {
+            const ratingNumber = index + 1;
+            return (h(Fragment, null, h("label", { class: `survey-rating-${ratingNumber}` }, ratingNumber, h("span", { class: "sr-only" }, rating), h("input", { type: "radio", name: "rating", value: ratingNumber, checked: ratingNumber === this.rating, onChange: (e) => this.handleChange(e) }))));
+        })), h("button", { key: '4b5a9454231d24e64cc4e09385b2161262982de7', type: "submit", class: "dso-secondary" }, h("span", { key: '6d6e9f53abec5e1522e5a8b04eea8793c354f101' }, "Antwoord verzenden")))));
+    }
+    static get style() { return DsoSurveyRatingStyle0; }
+}, [1, "dso-survey-rating"]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-survey-rating", "dso-icon", "dso-panel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-survey-rating":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SurveyRating);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-panel":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const DsoSurveyRating = SurveyRating;
+const defineCustomElement = defineCustomElement$1;
+
+export { DsoSurveyRating, defineCustomElement };
+
+//# sourceMappingURL=dso-survey-rating.js.map

package/dist/components/dso-survey-rating.js.map

@@ -0,0 +1 @@
+{"file":"dso-survey-rating.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,2qlBAA2qlB,CAAC;AACpslB,8BAAe,eAAe;;MCOjB,YAAY;;;;;;;;IAef,UAAU,CAAC,CAAQ;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;KAC7F;IAEO,YAAY,CAAC,CAAQ;QAC3B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,eAAe;YACf,UAAU;YACV,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,WAAW;YACX,gBAAgB;SACjB,CAAC;QAEF,QACE,kEAAW,UAAU,QAAC,eAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IACpF,2DAAI,IAAI,EAAC,SAAS,iCAAgC,EAClD,4HAAyE,EACzE,6DAAM,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IACvC,4DAAK,KAAK,EAAC,sBAAsB,iBAAa,MAAM,IAClD,+EAA0B,EAC1B,gFAA2B,CACvB,EACN,4DAAK,IAAI,EAAC,YAAY,IACnB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK;YACzB,MAAM,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;YAE/B,QACE,kBACE,aAAO,KAAK,EAAE,iBAAiB,YAAY,EAAE,IAC1C,YAAY,EACb,YAAM,KAAK,EAAC,SAAS,IAAE,MAAM,CAAQ,EACrC,aACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,MAAM,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,GACrC,CACI,CACP,EACH;SACH,CAAC,CACE,EACN,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,IACzC,oFAA+B,CACxB,CACJ,CACG,EACZ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/survey-rating/survey-rating.scss?tag=dso-survey-rating&encapsulation=shadow","src/components/survey-rating/survey-rating.tsx"],"sourcesContent":["@use \"sass:list\";\r\n@use \"sass:map\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: absolute;\r\n  inset-block-end: units.$u2;\r\n  inset-inline-start: units.$u2;\r\n  inline-size: survey-rating-variables.$survey-rating-inline-size;\r\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\r\n  border-radius: survey-rating-variables.$survey-rating-border-radius;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-xs-min-inline-size;\r\n    inset-block-end: 0;\r\n    inset-inline-start: 0;\r\n\r\n    --panel-heading-padding-inline-start: #{units.$u1};\r\n    --panel-body-padding-inline: #{units.$u1};\r\n  }\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.visual-rating-labels {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block: units.$u1;\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n  appearance: none;\r\n  cursor: pointer;\r\n  position: absolute;\r\n  margin-inline: 0;\r\n  margin-block: 0;\r\n  inset-block: units.$u1 0;\r\n  inset-inline: 0;\r\n  z-index: 1;\r\n}\r\n\r\nlabel {\r\n  position: relative;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  inline-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  block-size: survey-rating-variables.$survey-rating-input-label-size;\r\n  border: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  border-inline-end-width: 0;\r\n  padding-block-start: units.$u1;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n    inline-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n    block-size: survey-rating-variables.$survey-rating-rating-label-xs-min-size;\r\n  }\r\n\r\n  &:hover {\r\n    background-color: survey-rating-variables.$survey-rating-color-hover;\r\n  }\r\n\r\n  &:active {\r\n    background-color: survey-rating-variables.$survey-rating-color-active;\r\n  }\r\n\r\n  &:first-of-type {\r\n    border-radius: survey-rating-variables.$survey-rating-border-radius 0 0\r\n      survey-rating-variables.$survey-rating-border-radius;\r\n\r\n    &::before {\r\n      border-radius: (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &:last-of-type {\r\n    border-inline-end-width: 1px;\r\n    border-radius: 0 survey-rating-variables.$survey-rating-border-radius\r\n      survey-rating-variables.$survey-rating-border-radius 0;\r\n\r\n    &::before {\r\n      border-radius: 0 (survey-rating-variables.$survey-rating-border-radius - 1) 0 0;\r\n    }\r\n  }\r\n\r\n  &::before {\r\n    content: \"\";\r\n    display: block;\r\n    position: absolute;\r\n    inset-block-start: 0;\r\n    block-size: units.$u1;\r\n    inline-size: 100%;\r\n    border-block-end: 1px solid survey-rating-variables.$survey-rating-border-color;\r\n  }\r\n\r\n  &:has(input:checked) {\r\n    font-weight: bold;\r\n  }\r\n\r\n  @each $survey-rating in survey-rating-variables.$survey-ratings {\r\n    $i: list.index(survey-rating-variables.$survey-ratings, $survey-rating);\r\n    $color: map.get($survey-rating, color);\r\n\r\n    &.survey-rating-#{$i} {\r\n      &::before,\r\n      &:has(input:checked) {\r\n        @include set-colors.apply($color, survey-rating-variables.$survey-rating-border-color);\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n\r\n  &.dso-secondary {\r\n    @include button.secondary($base-styling: true);\r\n  }\r\n\r\n  margin-block-start: units.$u2;\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Fragment, h } from \"@stencil/core\";\r\nimport { SurveyRatingCloseEvent, SurveyRatingSubmitEvent } from \"./survey-rating.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-survey-rating\",\r\n  styleUrl: \"survey-rating.scss\",\r\n  shadow: true,\r\n})\r\nexport class SurveyRating implements ComponentInterface {\r\n  private rating: number | undefined;\r\n\r\n  /**\r\n   * Emitted when user submits the Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoSubmit!: EventEmitter<SurveyRatingSubmitEvent>;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the  Survey Rating.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<SurveyRatingCloseEvent>;\r\n\r\n  private handleForm(e: Event): void {\r\n    e.preventDefault();\r\n    this.dsoSubmit.emit({ rating: this.rating, scale: { start: 1, end: 7 }, originalEvent: e });\r\n  }\r\n\r\n  private handleChange(e: Event): void {\r\n    const target = e.target as HTMLInputElement;\r\n    this.rating = Number(target.value);\r\n  }\r\n\r\n  render() {\r\n    const ratings = [\r\n      \"Heel moeilijk\",\r\n      \"Moeilijk\",\r\n      \"Redelijk moeilijk\",\r\n      \"Neutraal\",\r\n      \"Redelijk makkelijk\",\r\n      \"Makkelijk\",\r\n      \"Heel makkelijk\",\r\n    ];\r\n\r\n    return (\r\n      <dso-panel emphasized onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n        <h2 slot=\"heading\">Help ons met een onderzoek</h2>\r\n        <strong>Hoe moeilijk of makkelijk was deze taak om uit te voeren</strong>\r\n        <form onSubmit={(e) => this.handleForm(e)}>\r\n          <div class=\"visual-rating-labels\" aria-hidden=\"true\">\r\n            <span>Heel moeilijk</span>\r\n            <span>Heel makkelijk</span>\r\n          </div>\r\n          <div role=\"radiogroup\">\r\n            {ratings.map((rating, index) => {\r\n              const ratingNumber = index + 1;\r\n\r\n              return (\r\n                <>\r\n                  <label class={`survey-rating-${ratingNumber}`}>\r\n                    {ratingNumber}\r\n                    <span class=\"sr-only\">{rating}</span>\r\n                    <input\r\n                      type=\"radio\"\r\n                      name=\"rating\"\r\n                      value={ratingNumber}\r\n                      checked={ratingNumber === this.rating}\r\n                      onChange={(e) => this.handleChange(e)}\r\n                    />\r\n                  </label>\r\n                </>\r\n              );\r\n            })}\r\n          </div>\r\n          <button type=\"submit\" class=\"dso-secondary\">\r\n            <span>Antwoord verzenden</span>\r\n          </button>\r\n        </form>\r\n      </dso-panel>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-tabs.js

@@ -67,7 +67,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: 'b6060f192bc977ee552374818ef550d5ee72ae65' }, h("div", { key: 'dcd0e804fe23cfb403a13d2c6b368a30e91d0b4a', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: '39a49bfbd811053f2ef18ffd71887aaf6140300e' })), h("div", { key: 'cb472cefde18dd4833c5ff47855aa584a9a142b9', role: "tabpanel", tabindex: "0" }, h("slot", { key: '29d41ec7045e3a271aee5b612fd4f25ced544e76', name: "panel" }))));
+        return (h(Host, { key: 'eda4f3cabd4f4a373ebf5e5b2fce9c5a336f4680' }, h("div", { key: '445a0b6a745a1f45eca44ca59def6f4557904748', class: "tabs", role: "tablist", onKeyUp: this.keyUpHandler }, h("slot", { key: 'd344d2c68cc0bd6d0abbea591a7ffa22b17dbdf7' })), h("div", { key: 'c17a1774b3cf81c30e07c0c8446f05d8a6e86b95', role: "tabpanel", tabindex: "0" }, h("slot", { key: 'c32d940c2e5fe01b67919d7253bb5d2666146f6f', name: "panel" }))));
     }
     get host() { return this; }
     static get style() { return DsoTabsStyle0; }

package/dist/components/dso-tree-view.js

@@ -198,7 +198,7 @@ const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends HTMLEle
     }
     render() {
         var _a;
-        return (h("div", { key: '47e48fb5f1c83bda8a9ef8809f833c9f9ab6e2bc', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: '53a0949638693abb7bc815696307bb131ebf995d', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
+        return (h("div", { key: 'f6f6832d0613dcb1eb30f1170cc848e5dd5a47f3', id: "tree", class: "dso-tree", onKeyDown: (e) => this.keyDownListener(e), ref: (element) => (this.tree = element) }, h("ul", { key: 'aaea2cfc733ff714e907758e41ea31fa2f460b68', role: "tree", "aria-label": "Objectenboom" }, (_a = this.collection) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h(DsoTreeItem, { owner: this, ancestors: [], item: item, index: index, level: 1, setSize: this.collection.length }))))));
     }
     static get style() { return DsoTreeViewStyle0; }
 }, [1, "dso-tree-view", {

package/dist/components/dso-viewer-grid.js

@@ -301,8 +301,8 @@ const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class ViewerGrid extends HTM
     }
     render() {
         const tabLabels = this.mode === "vdk" ? viewerGridVdkTabs : viewerGridVrkTabs;
-        return (h(Fragment, null, this.tabView && (h("nav", { key: 'b4a570fca218e0dc90e7d1e614e4423510d2b80d', class: "dso-navbar" }, h("ul", { key: 'a7d0b8eb852eb3b8e2deb4b5f843f27d841d09a2', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: '77d23e1a1280f18321c93e7913396a895f07ae6b', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView ||
-            (this.tabView && ((this.activeTab === "main" && this.mode === "vrk") || this.activeTab === "search"))) && (h(Filterpanel, { key: '54a0c9df27dce99457a8554c9beda4a519a874d2', title: this.filterpanelTitle, mode: this.mode, ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel, dsoCloseFilterpanel: (e) => this.dsoCloseFilterpanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: '04316795f2dbf17e56b4ada3fec56ebed221ddfa', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: 'ac81ce5768878de9ebbcb43c308b78e0c6a32723', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '62e3fe731443d77ff460872f6fe5a7b79ea84c48', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: 'a012c61f124356e06fd18c22a4230c555751c067', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
+        return (h(Fragment, null, this.tabView && (h("nav", { key: 'd8a89e6fd85a9ec4adea0b52670c1cba714350ef', class: "dso-navbar" }, h("ul", { key: '34b3436df21fd14c6403b33b0b728415c7ee2c3f', class: "dso-nav dso-nav-sub" }, tabLabels.map((tab) => (h("li", { key: tab, class: clsx({ "dso-active": this.activeTab === tab }) }, h("button", { type: "button", class: "dso-tertiary", onClick: () => this.switchActiveTab(tab) }, viewerGridTabLabelMap[tab]))))))), (!this.tabView || (this.tabView && (this.activeTab === "main" || this.activeTab === "search"))) && (h(MainPanel, { key: 'a5166e11ec537da288535ef1f78027b6942288bc', mode: this.mode, tabView: this.tabView, mainSize: this.mainSize, documentPanelOpen: this.documentPanelOpen, mainPanelExpanded: this.mainPanelExpanded, mainPanelHidden: this.mainPanelHidden, shrinkMain: this.emitShrinkMain, expandMain: this.emitExpandMain, toggleMainPanel: this.toggleMainPanel, dsoMainSizeChangeAnimationEnd: this.dsoMainSizeChangeAnimationEnd })), (!this.tabView ||
+            (this.tabView && ((this.activeTab === "main" && this.mode === "vrk") || this.activeTab === "search"))) && (h(Filterpanel, { key: '994efb6648cd215a4ff8e0fe7fffe16b65a40775', title: this.filterpanelTitle, mode: this.mode, ref: (element) => (this.filterpanel = element), onApply: this.handleFilterpanelApply, onCancel: this.handleFilterpanelCancel, dsoCloseFilterpanel: (e) => this.dsoCloseFilterpanel.emit({ originalEvent: e }) })), (!this.tabView || (this.tabView && this.activeTab === "map")) && (h("div", { key: 'b021cfb6be8c3a16453eb9927f6dac93736b0d2b', class: "map", ref: (element) => (this.mapElement = element) }, h("slot", { key: '85a6dbcd00d82a8c6eb78e55755bae26aed76076', name: "map" }))), ((!this.tabView && this.documentPanelOpen) || (this.tabView && this.activeTab === "document")) && (h(DocumentPanel, { key: '163277775c959cf0f83ed6bf8bd79ff2a81d3806', tabView: this.tabView, panelSize: this.documentPanelSize, shrinkDocumentPanel: this.shrinkDocumentPanel, expandDocumentPanel: this.expandDocumentPanel, dsoDocumentPanelSizeChangeAnimationEnd: this.dsoDocumentPanelSizeChangeAnimationEnd })), h(Overlay, { key: '2577736644258d037e41fef06ec19be4d9db92fa', ref: (element) => (this.overlay = element), dsoCloseOverlay: (e) => this.dsoCloseOverlay.emit({ originalEvent: e }) })));
     }
     get host() { return this; }
     static get watchers() { return {

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

@@ -1818,7 +1818,7 @@ const DocumentComponentDemo = /*@__PURE__*/ proxyCustomElement(class DocumentCom
     render() {
         var _a, _b;
         const { DocumentComponent, MenuButton } = this;
-        return (h("dso-responsive-element", { key: '487ea5957411bf8fe8bf42b34555076ae30079a6', class: "dso-document-components" }, h("div", { key: '312dbb3e48673150f6d3a2318e3387994f186d14', class: "dso-navbar" }, h("ul", { key: '9f0f29ddd997906ef4a071dcc70ffb48342863bd', 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: '5ac9f2dc49fcf37166bea36d3c00d415d55e35a9', path: [this.document] })));
+        return (h("dso-responsive-element", { key: '0bdcbedac77e5fff00d9be2e0b2e725edf2ec07f', class: "dso-document-components" }, h("div", { key: 'b9068348ddfc4c5dd46d4b65eeb2a0bb28a02d8b', class: "dso-navbar" }, h("ul", { key: 'e57f4fbd2da501279edd93b0e29fa210319ded13', 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: '64016b330af123112c59778dcd783c2a22f3a71f', path: [this.document] })));
     }
     static get watchers() { return {
         "jsonFile": ["jsonFileWatcher"],

package/dist/components/icon.js

@@ -690,7 +690,7 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class Icon extends HTMLElement {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: '9d80410ec84c08bc91abed479f60bddd9ee08a59', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '5805a81ad34f4f4f8adb5eaafc0019924c4b4efa', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get style() { return DsoIconStyle0; }

package/dist/components/index.d.ts

@@ -107,6 +107,8 @@ export { Skiplink as DsoSkiplink } from '../types/components/skiplink/skiplink';
 export { defineCustomElement as defineCustomElementDsoSkiplink } from './dso-skiplink';
 export { SlideToggle as DsoSlideToggle } from '../types/components/slide-toggle/slide-toggle';
 export { defineCustomElement as defineCustomElementDsoSlideToggle } from './dso-slide-toggle';
+export { SurveyRating as DsoSurveyRating } from '../types/components/survey-rating/survey-rating';
+export { defineCustomElement as defineCustomElementDsoSurveyRating } from './dso-survey-rating';
 export { Tab as DsoTab } from '../types/components/tabs/components/tab';
 export { defineCustomElement as defineCustomElementDsoTab } from './dso-tab';
 export { Table as DsoTable } from '../types/components/table/table';

package/dist/components/index.js

@@ -53,6 +53,7 @@ export { DsoScrollable, defineCustomElement as defineCustomElementDsoScrollable
 export { DsoSelectable, defineCustomElement as defineCustomElementDsoSelectable } from './dso-selectable.js';
 export { DsoSkiplink, defineCustomElement as defineCustomElementDsoSkiplink } from './dso-skiplink.js';
 export { DsoSlideToggle, defineCustomElement as defineCustomElementDsoSlideToggle } from './dso-slide-toggle.js';
+export { DsoSurveyRating, defineCustomElement as defineCustomElementDsoSurveyRating } from './dso-survey-rating.js';
 export { DsoTab, defineCustomElement as defineCustomElementDsoTab } from './dso-tab.js';
 export { DsoTable, defineCustomElement as defineCustomElementDsoTable } from './dso-table.js';
 export { DsoTabs, defineCustomElement as defineCustomElementDsoTabs } from './dso-tabs.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/info-button.js

@@ -29,7 +29,7 @@ const InfoButton = /*@__PURE__*/ proxyCustomElement(class InfoButton extends HTM
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (h(Host, { key: '69179ffb27e3ec32941102c461a6a58b45c00bde', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '7504a07ca41a7e61e125fba2c19c1e4b67705474', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '3b5124b074a2b068f8d201ce86ce2554d3da7fd5', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'fd62e5e40e79542a8b3055b907405cbcabc4c53d', class: "sr-only" }, this.label))));
+        return (h(Host, { key: 'e120f58b26565a2606afc191c43d3cd9392d7c94', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '452ef5c21ea617508d47f5be9a64bb7dc06dd0ef', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '8311c98a00ed1caa8ff19d771179aa01b7289f6c', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '715319494ea7f899fecea285a8bb3b22c84bc61e', class: "sr-only" }, this.label))));
     }
     static get style() { return DsoInfoButtonStyle0; }
 }, [1, "dso-info-button", {

package/dist/components/info.js

@@ -12,7 +12,7 @@ const Info = /*@__PURE__*/ proxyCustomElement(class Info extends HTMLElement {
         this.dsoClose = createEvent(this, "dsoClose", 7);
     }
     render() {
-        return (h(Fragment, { key: '55494406dd46f311f4c33ae09621c1cd2f091652' }, h("slot", { key: '7e63e38a4d8593893de952a561027c822d75737d' }), !this.fixed && (h("button", { key: '82fb84fcd042127ed27dd1387703a89108c8da09', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: 'd5c9066e99aae39f97d1928454aaae76828c488a', icon: "times" }), h("span", { key: '791f6e81943d44d58ca95a9b0d86e35f2f2c4e1b', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: 'a9db2b8522cbfa55e8629b58a9757d58931ecbca' }, h("slot", { key: '2059c0fb8926f48a4b1f36a2210d5c8e48861b1a' }), !this.fixed && (h("button", { key: '7430b1282b3a04b27185cb0f65d77ba82f28045d', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: 'dcc0f11655e09ce94b96299f1e4ef7a9f0e72f8b', icon: "times" }), h("span", { key: '9f127628f9741a7036a9cc1b23bfe1b585ed7b29', class: "sr-only" }, "Sluiten")))));
     }
     static get style() { return DsoInfoStyle0; }
 }, [1, "dso-info", {

package/dist/components/label.js

@@ -104,13 +104,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         this.isTruncated = false;
     }
     render() {
-        return (h(Fragment, { key: '09bdfc97082336a3de8208ec37ebf99b92ac02ff' }, h("span", { key: 'ef85128f41dd1d012b00a8f228def73dcd74f8ee', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
+        return (h(Fragment, { key: '3bf1a2b10d7cdb37d200dc8435872757f730f7f3' }, h("span", { key: '2963be77a7e44f85c07ae9885dd7aaeb4b6a04ae', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
                 [`dso-label-${this.status}`]: this.status,
                 "dso-compact": this.compact && !this.removable,
                 "dso-hover": this.removeHover || this.removeFocus,
-            }) }, h("slot", { key: 'd8379d7f323ec3a924305fa6a5caf0b959bcc6ac', name: "symbol" }), h("span", { key: 'f4a031ce32622795a3ce64b1b40cb0be25d65209', class: clsx("dso-label-content", {
+            }) }, h("slot", { key: '55b447e4ea124705739d3e65c53b3dcc87b6d8c4', name: "symbol" }), h("span", { key: '48fd3d404c04bcc3c4e69e1ac3e918997959a65c', class: clsx("dso-label-content", {
                 "dso-truncate": !!this.truncate,
-            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '05e123fabbcecff3cab78bc57b036d5e54db7026' })), this.removable && (h("button", { key: '90777393b22c3d1b560912fb8d9e12e06d46b150', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: 'de39e773d676dc37dc91c47012e9cf06d48db6f9', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: '17d86f44f3f9908a96bb28ebb7e90517a6d88f64', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: 'df8ff5796a8b8acd40ed2285161f80e4a8ab35ed', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
+            }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'ba3e40904693080e4558c9d0d982b8146092ecb2' })), this.removable && (h("button", { key: '6aa571c0e12e356951d1970e8f9afa4189c36fd0', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '4c06e38f4bad11a7208d924f715b0d7b4e3b5382', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'b549e2c517416cd705778addcc5594a6b2bd8b18', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '6782bb54d4a720f90433ded22edc81badfc6acfb', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/ozon-content.js

@@ -752,9 +752,9 @@ class OzonContentNootNode {
     }
 }
 
-class OzonContentOpschriftNode {
+class OzonContentKopNode {
     constructor() {
-        this.name = "Opschrift";
+        this.name = ["Opschrift", "Label", "Nummer", "Kop"];
     }
     render(node, { mapNodeToJsx }) {
         let content = mapNodeToJsx(node.childNodes);
@@ -934,7 +934,7 @@ class Mapper {
             new OzonContentTextNode(),
             new OzonContentDocumentNode(),
             new OzonContentInhoudNode(),
-            new OzonContentOpschriftNode(),
+            new OzonContentKopNode(),
             new OzonContentIntRefNode(),
             new OzonContentExtRefNode(),
             new OzonContentAlNode(),
@@ -972,10 +972,18 @@ class Mapper {
     mapNodeToJsx(node, context, path) {
         var _a;
         if (node instanceof NodeList) {
-            return h(Fragment, null, Array.from(node).map((n) => this.mapNodeToJsx(n, context, path)));
+            return (h(Fragment, null, Array.from(node).map((n, index) => {
+                return (h(Fragment, null,
+                    context.addSpaceBeforeNode && index > 0 && " ",
+                    this.mapNodeToJsx(n, context, path)));
+            })));
         }
         if (Array.isArray(node)) {
-            return h(Fragment, null, node.map((n) => this.mapNodeToJsx(n, context, path)));
+            return (h(Fragment, null, node.map((n, index) => {
+                return (h(Fragment, null,
+                    context.addSpaceBeforeNode && index > 0 && " ",
+                    this.mapNodeToJsx(n, context, path)));
+            })));
         }
         const nodeName = getNodeName(node);
         const mapper = this.findMapper(nodeName);
@@ -1040,6 +1048,10 @@ const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent extends H
          * Setting this property creates dso-ozon-content as inline element instead of a block element.
          */
         this.inline = false;
+        /**
+         * Adds a non breaking space to the node element.
+         */
+        this.addSpaceBeforeNode = false;
         this.state = {};
         this.handleMarkItemHighlight = (text, elementRef) => {
             this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });
@@ -1051,6 +1063,7 @@ const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent extends H
     render() {
         const context = {
             state: this.state,
+            addSpaceBeforeNode: this.addSpaceBeforeNode,
             inline: this.inline,
             mark: this.mark,
             setState: (state) => (this.state = state),
@@ -1058,7 +1071,7 @@ const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent extends H
             emitAnchorClick: this.dsoAnchorClick.emit,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: 'b395bdf2fe2984a99ab4945d6271d321b762004b' }, transformed);
+        return h(Fragment, { key: 'fa2f5b571b572007dace7776e56a2ce800ddc3b6' }, transformed);
     }
     static get watchers() { return {
         "content": ["contentWatcher"]
@@ -1067,6 +1080,7 @@ const OzonContent = /*@__PURE__*/ proxyCustomElement(class OzonContent extends H
 }, [1, "dso-ozon-content", {
         "content": [1],
         "inline": [516],
+        "addSpaceBeforeNode": [516, "add-space-before-node"],
         "mark": [16],
         "state": [32]
     }, undefined, {