@dso-toolkit/core 79.0.0-pre.3 → 79.0.0

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

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@sten
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './panel.js';
 
-const surveyRatingCss = "@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n**\n** @param {ArgList} $transitions...\n**   - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n**   - (\"property\", duur): eigen duur, geen delay\n**   - (\"property\", duur, delay): eigen duur én delay\n**\n** @example\n**   @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n**\n** @output\n**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\n**\n*/\n:host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-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: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-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:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 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 surveyRatingCss = ":host {\n  display: block;\n  position: fixed;\n  inset-block-end: 16px;\n  inset-inline-start: 16px;\n  inline-size: 370px;\n  background-color: #fff;\n  box-shadow: -3px 3px 6px 0 rgba(0, 0, 0, 0.5);\n  border-radius: 4px;\n  z-index: 1000;\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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-1:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-2:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-3:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-4:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-5:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-6:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"tel:\"], [href^=\"tel:\"]:hover, [href^=\"tel:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=\"mailto:\"], [href^=\"mailto:\"]:hover, [href^=\"mailto:\"]:focus-visible), label.survey-rating-7:has(input:checked) a:not(.dso-primary, .dso-secondary, .dso-tertiary):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: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-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: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n  color: var(--_dso-button-secondary-hover-color, #275937);\n}\nbutton.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #275937);\n  border-color: var(--_dso-button-secondary-active-border-color, #275937);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\nbutton.dso-secondary[disabled], button.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-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:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 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 SurveyRating = /*@__PURE__*/ proxyCustomElement(class SurveyRating extends HTMLElement {
     constructor() {

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

@@ -1 +1 @@
-{"file":"dso-survey-rating.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\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  background-color: survey-rating-variables.$survey-rating-background-color;\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  z-index: zindex.$survey-rating;\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\n\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 the 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\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </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}
+{"file":"dso-survey-rating.js","mappings":"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","names":["__stencil_proxyCustomElement"],"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@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"survey-rating.variables\" as survey-rating-variables;\r\n\r\n:host {\r\n  display: block;\r\n  position: fixed;\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  background-color: survey-rating-variables.$survey-rating-background-color;\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  z-index: zindex.$survey-rating;\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\n\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 the 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\r\n        emphasized\r\n        onDsoCloseClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n        role=\"dialog\"\r\n        aria-labelledby=\"panel-heading\"\r\n      >\r\n        <h2 id=\"panel-heading\" slot=\"heading\">\r\n          Help ons met een onderzoek\r\n        </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-tab.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { i as isModifiedEvent } from './is-modified-event.js';
 
-const tabCss = "@charset \"UTF-8\";*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px;inline-size:100%;text-align:start}}";
+const tabCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;border-color:#39870c;margin-block-end:-1px}@media screen and (max-width: 767px){:host{margin-block:10px}:host(:first-child){margin-block-start:0}}:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{background-color:#fff;border:1px solid #39870c;border-block-end-color:#fff;color:#39870c;cursor:default}@media screen and (max-width: 767px){:host([active]:not([active=false])) [role=tab],:host([active]:not([active=false])) [role=tab]:active,:host([active]:not([active=false])) [role=tab]:focus,:host([active]:not([active=false])) [role=tab]:hover,:host([active]:not([active=false])) [role=tab]:visited{border-block-end-color:#39870c}}:host([disabled]:not([disabled=false])) [role=tab]{color:#999}:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{color:#999;text-decoration:none;cursor:default;background-color:transparent}@media screen and (max-width: 767px){:host([disabled]:not([disabled=false])) [role=tab]:hover,:host([disabled]:not([disabled=false])) [role=tab]:focus{border-block-end-color:#fff}}a{text-decoration:none}a:hover,a:focus-visible{text-decoration:none}a:active{text-decoration:underline}a:visited{color:#666}button{font-family:inherit;font-size:inherit;background-color:transparent}[role=tab]{font-weight:bold;cursor:pointer;display:block;min-block-size:56px;border:1px solid transparent;border-radius:4px 4px 0 0;color:#666;line-height:1.5;padding-block:15px;padding-inline:23px}[role=tab]:hover{border-color:#e5e5e5 #e5e5e5 #e5e5e5}[role=tab]:hover,[role=tab]:focus{text-decoration:none;background-color:#e5e5e5}[role=tab]:active,[role=tab]:focus,[role=tab]:hover{background-color:#f2f2f2;border:1px solid transparent;border-block-end-color:#39870c;text-decoration:none}@media screen and (max-width: 767px){[role=tab]:active,[role=tab]:focus,[role=tab]:hover{border-block-end-color:#fff}}@media screen and (max-width: 767px){[role=tab]{border-color:#fff;border-radius:8px;padding-block:18px;padding-inline:20px;inline-size:100%;text-align:start}}";
 
 const Tab = /*@__PURE__*/ proxyCustomElement(class Tab extends HTMLElement {
     constructor() {

package/dist/components/dso-tab.js.map

@@ -1 +1 @@
-{"file":"dso-tab.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,mxEAAmxE;;MCarxE,GAAG,iBAAAA,kBAAA,CAAA,MAAA,GAAA,SAAA,WAAA,CAAA;AALhB,IAAA,WAAA,GAAA;;;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,CACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJ,CAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include link.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n    inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-tab.js","mappings":";;;AAAA,MAAM,MAAM,GAAG,gwEAAgwE;;MCalwE,GAAG,iBAAAA,kBAAA,CAAA,MAAA,GAAA,SAAA,WAAA,CAAA;AALhB,IAAA,WAAA,GAAA;;;;;AA2CU,QAAA,IAAA,CAAA,SAAS,GAAG,CAAC,CAA6B,KAAI;AACpD,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,CAAC,YAAY,UAAU,GAAG,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK;AACtE,aAAA,CAAC;AACJ,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAgB,KAAI;AAC1C,YAAA,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AAEO,QAAA,IAAA,CAAA,YAAY,GAAG,CAAC,CAAa,KAAI;AACvC,YAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;gBAC/C,CAAC,CAAC,cAAc,EAAE;;iBACb;AACL,gBAAA,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;;AAErB,SAAC;AA6BF;AA1DC;;AAEG;AAEH,IAAA,MAAM,SAAS,GAAA;;QACb,CAAA,EAAA,GAAA,IAAI,CAAC,iBAAiB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IA0BjC,MAAM,GAAA;QACJ,OAAO,IAAI,CAAC,IAAI,IACd,CACE,CAAA,GAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,YAAY,mBACX,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAAA,GACxC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACN,KAEJ,CAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EACE,IAAI,EAAC,KAAK,EACV,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EACX,eAAA,EAAA,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EACzC,GAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAC,EAC1C,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EAAA,CAAA,EAEpD,CAAQ,CAAA,MAAA,EAAA,IAAA,CAAA,CACD,CACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/tabs/components/tab.scss?tag=dso-tab&encapsulation=shadow","src/components/tabs/components/tab.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"tab.variables\" as tab-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  border-color: tab-variables.$color;\r\n  // Make the list-items overlay the bottom border\r\n  margin-block-end: -1px;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  :host {\r\n    margin-block: 10px;\r\n  }\r\n\r\n  :host(:first-child) {\r\n    margin-block-start: 0;\r\n  }\r\n}\r\n\r\n:host([active]:not([active=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    &,\r\n    &:active,\r\n    &:focus,\r\n    &:hover,\r\n    &:visited {\r\n      background-color: colors.$wit;\r\n      border: 1px solid tab-variables.$color;\r\n      border-block-end-color: colors.$wit;\r\n      color: tab-variables.$color;\r\n      cursor: default;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: tab-variables.$color;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n:host([disabled]:not([disabled=\"false\"])) {\r\n  [role=\"tab\"] {\r\n    color: tab-variables.$nav-disabled-link-color;\r\n\r\n    &:hover,\r\n    &:focus {\r\n      color: tab-variables.$nav-disabled-link-hover-color;\r\n      text-decoration: none;\r\n      cursor: scaffolding.$cursor-disabled;\r\n      background-color: transparent;\r\n\r\n      @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n        border-block-end-color: colors.$wit;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\na {\r\n  @include link.clean();\r\n\r\n  &:visited {\r\n    color: tab-variables.$text-color;\r\n  }\r\n}\r\n\r\nbutton {\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  background-color: transparent;\r\n}\r\n\r\n[role=\"tab\"] {\r\n  font-weight: bold;\r\n  cursor: pointer;\r\n  display: block;\r\n  min-block-size: tab-variables.$block-size;\r\n  border: 1px solid transparent;\r\n  border-radius: tab-variables.$border-radius tab-variables.$border-radius 0 0;\r\n  color: tab-variables.$text-color;\r\n  line-height: typography.$line-height-base;\r\n  padding-block: tab-variables.$block-padding;\r\n  padding-inline: tab-variables.$inline-padding;\r\n\r\n  &:hover {\r\n    border-color: tab-variables.$link-hover-border-color tab-variables.$link-hover-border-color\r\n      tab-variables.$border-color;\r\n  }\r\n\r\n  &:hover,\r\n  &:focus {\r\n    text-decoration: none;\r\n    background-color: tab-variables.$nav-link-hover-bg;\r\n  }\r\n\r\n  &:active,\r\n  &:focus,\r\n  &:hover {\r\n    background-color: tab-variables.$hover-color;\r\n    border: 1px solid transparent;\r\n    border-block-end-color: tab-variables.$color;\r\n    text-decoration: none;\r\n\r\n    @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n      border-block-end-color: colors.$wit;\r\n    }\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border-color: colors.$wit;\r\n    border-radius: 8px;\r\n    padding-block: 18px;\r\n    padding-inline: 20px;\r\n    inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { isModifiedEvent } from \"../../../utils/is-modified-event\";\r\nimport { TabsSwitchEvent } from \"../tabs.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this tab\r\n */\r\n@Component({\r\n  tag: \"dso-tab\",\r\n  styleUrl: \"tab.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tab {\r\n  @Element()\r\n  host!: HTMLDsoTabElement;\r\n\r\n  /**\r\n   * Makes the tab active. The tab for which the tabpanel is visible is the active tab.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Disables the tab. A disabled tab cannot be activated and it's tabpanel cannot be shown.\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * The optional href of the tab. Creates an anchor if present. Creates a button if absent.\r\n   */\r\n  @Prop()\r\n  href?: string;\r\n\r\n  /**\r\n   * Emitted when the user activates tab via click or arrow keys followed by space or enter.\r\n   */\r\n  @Event()\r\n  dsoTabSwitch!: EventEmitter<TabsSwitchEvent>;\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _dsoFocus() {\r\n    this.anchorOrButtonRef?.focus();\r\n  }\r\n\r\n  private anchorOrButtonRef?: HTMLAnchorElement | HTMLButtonElement;\r\n\r\n  private emitEvent = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoTabSwitch.emit({\r\n      originalEvent: e,\r\n      isModifiedEvent: e instanceof MouseEvent ? isModifiedEvent(e) : false,\r\n    });\r\n  };\r\n\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (e.key === \" \" && !this.disabled && !this.active) {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  private clickHandler = (e: MouseEvent) => {\r\n    if ((this.disabled && this.href) || this.active) {\r\n      e.preventDefault();\r\n    } else {\r\n      this.emitEvent(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return this.href ? (\r\n      <a\r\n        role=\"tab\"\r\n        href={this.href}\r\n        onKeyUp={this.keyUpHandler}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </a>\r\n    ) : (\r\n      <button\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        onClick={this.clickHandler}\r\n        aria-selected={this.active ? \"true\" : \"false\"}\r\n        {...(!this.active ? { tabIndex: -1 } : {})}\r\n        ref={(element) => (this.anchorOrButtonRef = element)}\r\n      >\r\n        <slot />\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/dso-tabs.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 
-const tabsCss = "@charset \"UTF-8\";*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";
+const tabsCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block}.tabs{border-block-end:1px solid #39870c;display:flex;gap:2px;flex-wrap:wrap;margin-block-end:24px;padding-inline-start:0}@media screen and (max-width: 767px){.tabs{border:0;display:block}}";
 
 const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     constructor() {

package/dist/components/dso-tabs.js.map

@@ -1 +1 @@
-{"file":"dso-tabs.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: units.$block-spacing-large;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Element, Host, forceUpdate, h } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-tabs.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/tabs/tabs.scss?tag=dso-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/link\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n.tabs {\r\n  border-block-end: 1px solid colors.$grasgroen;\r\n  display: flex;\r\n  gap: 2px;\r\n  flex-wrap: wrap;\r\n  margin-block-end: units.$block-spacing-large;\r\n  padding-inline-start: 0;\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    border: 0;\r\n    display: block;\r\n  }\r\n}\r\n","import { Component, Element, Host, forceUpdate, h } from \"@stencil/core\";\r\n\r\n/**\r\n * @slot - The dso-tab elements. These should be direct children of the dso-tabs element.\r\n * @slot panel - The panel with the content for the active tab\r\n */\r\n@Component({\r\n  tag: \"dso-tabs\",\r\n  styleUrl: \"tabs.scss\",\r\n  shadow: true,\r\n})\r\nexport class Tabs {\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  @Element()\r\n  host!: HTMLDsoTabsElement;\r\n\r\n  private get enabledTabs() {\r\n    // Only enabled tabs (not disabled) are needed for setting focus via ArrowRight and ArrowLeft\r\n    return Array.from(this.host.querySelectorAll<HTMLDsoTabElement>(\":scope > dso-tab\")).reduce<HTMLDsoTabElement[]>(\r\n      (tabs, tab) => {\r\n        if (!tab.disabled) {\r\n          tabs.push(tab);\r\n        }\r\n\r\n        return tabs;\r\n      },\r\n      [],\r\n    );\r\n  }\r\n\r\n  private get firstTab() {\r\n    return this.enabledTabs[0];\r\n  }\r\n\r\n  private get lastTab() {\r\n    return this.enabledTabs[this.enabledTabs.length - 1];\r\n  }\r\n\r\n  private moveFocusToTab(tab: HTMLDsoTabElement | undefined) {\r\n    tab?._dsoFocus();\r\n  }\r\n\r\n  private moveFocusToPreviousTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index - 1] ?? this.lastTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  private moveFocusToNextTab(focussedTab: HTMLElement) {\r\n    const index = this.enabledTabs.findIndex((tab) => tab === focussedTab);\r\n    const next = this.enabledTabs[index + 1] ?? this.firstTab;\r\n\r\n    this.moveFocusToTab(next);\r\n  }\r\n\r\n  // Keep track of tabs to set focus on next or previous enabled (not disabled) tab.\r\n  private keyUpHandler = (e: KeyboardEvent) => {\r\n    if (!(e.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (e.key) {\r\n      case \"ArrowRight\":\r\n      case \"ArrowDown\":\r\n        this.moveFocusToNextTab(e.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n      case \"ArrowUp\":\r\n        this.moveFocusToPreviousTab(e.target);\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n  };\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver ??= new MutationObserver(() => forceUpdate(this.host));\r\n\r\n    this.mutationObserver.observe(this.host, { childList: true });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"tabs\" role=\"tablist\" onKeyUp={this.keyUpHandler}>\r\n          <slot />\r\n        </div>\r\n        <div role=\"tabpanel\" tabindex=\"0\">\r\n          <slot name=\"panel\" />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -15,7 +15,7 @@ const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {
         item.open && (h(Fragment, null, item.hasItems && !item.items && item.loading ? (h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, childIndex, org) => (h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: childIndex, level: level + 1, setSize: org.length })))))))));
 };
 
-const treeViewCss = "@charset \"UTF-8\";:host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:\"\";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:\"\";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:\"\";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:\"\";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:\"\";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:\"\";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-inline-start:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
+const treeViewCss = ":host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-inline-start:0}:host ul[role=group]::before{border-inline-start:1px solid #275937;content:\"\";block-size:8px;inset-inline-start:44px;position:absolute;inset-block-start:0;inline-size:0}:host li:not(.has-child)::before{border-block-start:1px solid #275937;content:\"\";block-size:0;inset-inline-start:12px;position:absolute;inset-block-start:20px;inline-size:16px}:host li:not(.has-child)::after{border-inline-start:1px solid #275937;content:\"\";block-size:100%;inset-inline-start:12px;position:absolute;inset-block-start:8px;inline-size:0}:host li:not(.has-child):last-child::after{block-size:20px;inset-block-start:0}:host li.has-child::before{border-block-start:1px solid #275937;content:\"\";block-size:0;inset-inline-start:24px;position:absolute;inset-block-start:20px;inline-size:4px}:host li.has-child:not(:last-child)::after{border-inline-start:1px solid #275937;content:\"\";block-size:calc(100% - 24px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host li.has-child.is-expanded:last-child::after{border-inline-start:1px solid #275937;content:\"\";block-size:calc(100% - 32px);inset-inline-start:12px;position:absolute;inset-block-start:32px;inline-size:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin-block:8px;margin-inline:0 8px;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin-block:8px;margin-inline:0;max-inline-size:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-inline-start:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";
 
 const TreeView = /*@__PURE__*/ proxyCustomElement(class TreeView extends HTMLElement {
     constructor() {

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

@@ -1 +1 @@
-{"file":"dso-tree-view.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\ninterface TreeViewItemProps {\r\n  owner: TreeView;\r\n  ancestors: TreeViewItem[];\r\n  item: TreeViewItem;\r\n  index: number;\r\n  level: number;\r\n  setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n  owner,\r\n  ancestors,\r\n  item,\r\n  index,\r\n  level,\r\n  setSize,\r\n}) => (\r\n  <li\r\n    key={item.id}\r\n    class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n    role=\"none\"\r\n  >\r\n    <div class=\"tree-branch-control\">\r\n      {item.hasItems ? (\r\n        <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n          <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n        </div>\r\n      ) : (\r\n        <dso-icon></dso-icon>\r\n      )}\r\n    </div>\r\n    <p\r\n      class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n      tabindex={level === 1 && index === 0 ? 0 : -1}\r\n      role=\"treeitem\"\r\n      aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n      aria-current={item.active ? \"true\" : undefined}\r\n      aria-level={level}\r\n      aria-setsize={setSize}\r\n      aria-posinset={index + 1}\r\n      aria-busy={item.loading ? \"true\" : undefined}\r\n      data-item-id={item.id}\r\n      onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n    >\r\n      {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n      {item.href ? (\r\n        <a href={item.href} tabindex=\"-1\">\r\n          {item.label}\r\n        </a>\r\n      ) : (\r\n        <span>{item.label}</span>\r\n      )}\r\n      {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n    </p>\r\n    {item.open && (\r\n      <>\r\n        {item.hasItems && !item.items && item.loading ? (\r\n          <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n        ) : (\r\n          <ul role=\"group\">\r\n            {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n              <DsoTreeItem\r\n                owner={owner}\r\n                ancestors={[...ancestors, item]}\r\n                item={childItem}\r\n                index={childIndex}\r\n                level={level + 1}\r\n                setSize={org.length}\r\n              ></DsoTreeItem>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </>\r\n    )}\r\n  </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n  ul {\r\n    list-style-type: none;\r\n    padding-inline-start: core-tree-view-variables.$indent;\r\n    position: relative;\r\n  }\r\n\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  ul[role=\"tree\"] {\r\n    padding-inline-start: 0;\r\n  }\r\n\r\n  // connects branch or leaf to parent\r\n  ul[role=\"group\"]::before {\r\n    @include core-tree-view-mixins.vertical-line(\r\n      core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n      0,\r\n      core-tree-view-variables.$vspace\r\n    );\r\n  }\r\n\r\n  li:not(.has-child) {\r\n    // horizontal connector for a leaf\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a leaf\r\n    &::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vspace,\r\n        100%\r\n      );\r\n    }\r\n\r\n    // vertical connector for the last leaf\r\n    &:last-child::after {\r\n      block-size: core-tree-view-variables.$vcenter;\r\n      inset-block-start: 0;\r\n    }\r\n  }\r\n\r\n  li.has-child {\r\n    // horizontal connector for a branch\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$icon-size,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a branch (not last)\r\n    &:not(:last-child)::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - core-tree-view-variables.$icon-size)\r\n      );\r\n    }\r\n\r\n    // vertical line after a expanded branch (creating dead ends)\r\n    &.is-expanded:last-child::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n      );\r\n    }\r\n  }\r\n\r\n  .tree-branch-control {\r\n    color: colors.$grasgroen;\r\n    display: inline-block;\r\n    font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0 core-tree-view-variables.$hspace;\r\n    vertical-align: top;\r\n\r\n    > div {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  .tree-content {\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0;\r\n    max-inline-size: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n    a {\r\n      color: scaffolding.$text-color;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        color: scaffolding.$text-color;\r\n        text-decoration: none;\r\n      }\r\n\r\n      &:active {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.selected {\r\n      color: scaffolding.$text-color;\r\n      font-weight: 700;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      color: colors.$mauve;\r\n      font-style: italic;\r\n      font-weight: 700;\r\n\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n\r\n      a {\r\n        color: colors.$mauve;\r\n\r\n        &:hover,\r\n        &:focus {\r\n          text-decoration: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    dso-icon {\r\n      color: colors.$grasgroen;\r\n      font-size: 0.75em;\r\n      margin-inline-start: 0.5em;\r\n      vertical-align: text-bottom;\r\n    }\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","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoTreeItem } from \"./tree-item\";\r\nimport { TreeViewItem, TreeViewPointerEvent } from \"./tree-view.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-tree-view\",\r\n  styleUrl: \"./tree-view.scss\",\r\n  shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n  private tree?: HTMLElement;\r\n\r\n  /**\r\n   * The collection of TreeViewItems\r\n   */\r\n  @Prop()\r\n  collection!: TreeViewItem[];\r\n\r\n  /**\r\n   * Emitted when a tree view item is opened.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is closed.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is clicked.\r\n   * The `detail` property of the `CustomEvent` will contain an object with:\r\n   * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n   * `originalEvent` = the original click event.\r\n   * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n   * state on the last TreeViewItem in path and clear all other active item states).\r\n   */\r\n  @Event()\r\n  dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n  /**\r\n   * Set focus on the last item in the specified path.\r\n   * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n   * @async\r\n   * @returns Whether the item was found.\r\n   */\r\n  @Method()\r\n  async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n    const tree = this.tree;\r\n\r\n    if (!tree || path.length === 0) {\r\n      return false;\r\n    }\r\n\r\n    const itemToFocus = path[path.length - 1];\r\n    if (!itemToFocus) {\r\n      throw new Error(\"No itemToFocus found\");\r\n    }\r\n\r\n    const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n      .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n    if (!elementToFocus) {\r\n      return false;\r\n    }\r\n\r\n    TreeView.setFocus(tree, elementToFocus);\r\n\r\n    return true;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n    const tree = event\r\n      .composedPath()\r\n      .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n    if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        TreeView.moveFocus(tree, event.target, \"next\");\r\n        break;\r\n      case \"ArrowUp\":\r\n        TreeView.moveFocus(tree, event.target, \"previous\");\r\n        break;\r\n      case \"ArrowRight\":\r\n        TreeView.expandItemOrFocusChild(tree, event.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n        TreeView.collapseItemOrFocusParent(tree, event.target);\r\n        break;\r\n      case \"End\":\r\n        TreeView.moveFocus(tree, event.target, \"last\");\r\n        break;\r\n      case \"Home\":\r\n        TreeView.moveFocus(tree, event.target, \"first\");\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.target.click();\r\n        break;\r\n      default:\r\n        if (isIndexLetter(event.key)) {\r\n          if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n  itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    const contentElement = event.target.closest(\".tree-content\");\r\n\r\n    if (contentElement) {\r\n      const tree = event\r\n        .composedPath()\r\n        .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n      if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n        return;\r\n      }\r\n\r\n      TreeView.setFocus(tree, contentElement);\r\n      this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n      return;\r\n    }\r\n\r\n    if (item.open) {\r\n      this.dsoCloseItem.emit([...ancestors, item]);\r\n    } else {\r\n      this.dsoOpenItem.emit([...ancestors, item]);\r\n    }\r\n  };\r\n\r\n  private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n    if (target) {\r\n      (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n        .filter((item) => item.tabIndex === 0)\r\n        .forEach((item) => (item.tabIndex = -1));\r\n\r\n      target.tabIndex = 0;\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    let index = 0;\r\n    switch (moveTo) {\r\n      case \"first\":\r\n        index = 0;\r\n        break;\r\n      case \"previous\":\r\n        index = focusableItems.indexOf(el) - 1;\r\n        break;\r\n      case \"next\":\r\n        index = focusableItems.indexOf(el) + 1;\r\n        break;\r\n      case \"last\":\r\n        index = focusableItems.length - 1;\r\n        break;\r\n    }\r\n\r\n    const focusableItem = focusableItems[index];\r\n    if (!focusableItem) {\r\n      throw new Error(\"No focusableItem found\");\r\n    }\r\n\r\n    TreeView.setFocus(tree, focusableItem);\r\n  }\r\n\r\n  private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      TreeView.moveFocus(tree, target, \"next\");\r\n    } else {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    } else {\r\n      const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n      if (parentTarget instanceof HTMLElement) {\r\n        TreeView.setFocus(tree, parentTarget);\r\n      }\r\n    }\r\n  }\r\n\r\n  private static setFocusByFirstCharacter(\r\n    tree: HTMLElement,\r\n    el: HTMLElement,\r\n    char: string,\r\n    backwards: boolean,\r\n  ): boolean {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    if (backwards) {\r\n      focusableItems.reverse();\r\n    }\r\n\r\n    const current = focusableItems.indexOf(el);\r\n\r\n    char = char.toLowerCase();\r\n    let nextItem = focusableItems.find(\r\n      (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n    );\r\n    if (!nextItem) {\r\n      nextItem = focusableItems.find(\r\n        (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n      );\r\n    }\r\n\r\n    if (nextItem) {\r\n      TreeView.setFocus(tree, nextItem);\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        id=\"tree\"\r\n        class=\"dso-tree\"\r\n        onKeyDown={(e) => this.keyDownListener(e)}\r\n        ref={(element) => (this.tree = element)}\r\n      >\r\n        <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n          {this.collection?.map((item, index) => (\r\n            <DsoTreeItem\r\n              owner={this}\r\n              ancestors={[]}\r\n              item={item}\r\n              index={index}\r\n              level={1}\r\n              setSize={this.collection.length}\r\n            ></DsoTreeItem>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-tree-view.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/tree-view/tree-item.tsx","src/components/tree-view/tree-view.scss?tag=dso-tree-view&encapsulation=shadow","src/components/tree-view/tree-view.tsx"],"sourcesContent":["import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\ninterface TreeViewItemProps {\r\n  owner: TreeView;\r\n  ancestors: TreeViewItem[];\r\n  item: TreeViewItem;\r\n  index: number;\r\n  level: number;\r\n  setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n  owner,\r\n  ancestors,\r\n  item,\r\n  index,\r\n  level,\r\n  setSize,\r\n}) => (\r\n  <li\r\n    key={item.id}\r\n    class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n    role=\"none\"\r\n  >\r\n    <div class=\"tree-branch-control\">\r\n      {item.hasItems ? (\r\n        <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n          <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n        </div>\r\n      ) : (\r\n        <dso-icon></dso-icon>\r\n      )}\r\n    </div>\r\n    <p\r\n      class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n      tabindex={level === 1 && index === 0 ? 0 : -1}\r\n      role=\"treeitem\"\r\n      aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n      aria-current={item.active ? \"true\" : undefined}\r\n      aria-level={level}\r\n      aria-setsize={setSize}\r\n      aria-posinset={index + 1}\r\n      aria-busy={item.loading ? \"true\" : undefined}\r\n      data-item-id={item.id}\r\n      onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n    >\r\n      {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n      {item.href ? (\r\n        <a href={item.href} tabindex=\"-1\">\r\n          {item.label}\r\n        </a>\r\n      ) : (\r\n        <span>{item.label}</span>\r\n      )}\r\n      {item.icons?.map((icon: TreeViewItemIcon) => <dso-icon icon={icon.icon} title={icon.label}></dso-icon>)}\r\n    </p>\r\n    {item.open && (\r\n      <>\r\n        {item.hasItems && !item.items && item.loading ? (\r\n          <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n        ) : (\r\n          <ul role=\"group\">\r\n            {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n              <DsoTreeItem\r\n                owner={owner}\r\n                ancestors={[...ancestors, item]}\r\n                item={childItem}\r\n                index={childIndex}\r\n                level={level + 1}\r\n                setSize={org.length}\r\n              ></DsoTreeItem>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </>\r\n    )}\r\n  </li>\r\n);\r\n","@use \"sass:math\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n\r\n@use \"tree-view.mixins\" as core-tree-view-mixins;\r\n@use \"tree-view.variables\" as core-tree-view-variables;\r\n\r\n:host {\r\n  ul {\r\n    list-style-type: none;\r\n    padding-inline-start: core-tree-view-variables.$indent;\r\n    position: relative;\r\n  }\r\n\r\n  li {\r\n    position: relative;\r\n  }\r\n\r\n  ul[role=\"tree\"] {\r\n    padding-inline-start: 0;\r\n  }\r\n\r\n  // connects branch or leaf to parent\r\n  ul[role=\"group\"]::before {\r\n    @include core-tree-view-mixins.vertical-line(\r\n      core-tree-view-variables.$indent + core-tree-view-variables.$hcenter,\r\n      0,\r\n      core-tree-view-variables.$vspace\r\n    );\r\n  }\r\n\r\n  li:not(.has-child) {\r\n    // horizontal connector for a leaf\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace + 0.5 * core-tree-view-variables.$icon-size - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a leaf\r\n    &::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vspace,\r\n        100%\r\n      );\r\n    }\r\n\r\n    // vertical connector for the last leaf\r\n    &:last-child::after {\r\n      block-size: core-tree-view-variables.$vcenter;\r\n      inset-block-start: 0;\r\n    }\r\n  }\r\n\r\n  li.has-child {\r\n    // horizontal connector for a branch\r\n    &::before {\r\n      @include core-tree-view-mixins.horizontal-line(\r\n        core-tree-view-variables.$icon-size,\r\n        core-tree-view-variables.$vcenter,\r\n        core-tree-view-variables.$hspace - 4px\r\n      );\r\n    }\r\n\r\n    // vertical connector for a branch (not last)\r\n    &:not(:last-child)::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - core-tree-view-variables.$icon-size)\r\n      );\r\n    }\r\n\r\n    // vertical line after a expanded branch (creating dead ends)\r\n    &.is-expanded:last-child::after {\r\n      @include core-tree-view-mixins.vertical-line(\r\n        core-tree-view-variables.$hcenter,\r\n        core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size,\r\n        calc(100% - (core-tree-view-variables.$vcenter + 0.5 * core-tree-view-variables.$icon-size))\r\n      );\r\n    }\r\n  }\r\n\r\n  .tree-branch-control {\r\n    color: colors.$grasgroen;\r\n    display: inline-block;\r\n    font-size: math.div(2 * core-tree-view-variables.$icon-size, 3);\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0 core-tree-view-variables.$hspace;\r\n    vertical-align: top;\r\n\r\n    > div {\r\n      cursor: pointer;\r\n    }\r\n  }\r\n\r\n  .tree-content {\r\n    cursor: pointer;\r\n    display: inline-block;\r\n    margin-block: core-tree-view-variables.$vspace;\r\n    margin-inline: 0;\r\n    max-inline-size: calc(100% - (core-tree-view-variables.$indent + core-tree-view-variables.$hspace));\r\n\r\n    a {\r\n      color: scaffolding.$text-color;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        color: scaffolding.$text-color;\r\n        text-decoration: none;\r\n      }\r\n\r\n      &:active {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.selected {\r\n      color: scaffolding.$text-color;\r\n      font-weight: 700;\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n    }\r\n\r\n    &.active {\r\n      color: colors.$mauve;\r\n      font-style: italic;\r\n      font-weight: 700;\r\n\r\n      text-decoration: underline;\r\n\r\n      &:hover,\r\n      &:focus {\r\n        text-decoration: none;\r\n      }\r\n\r\n      a {\r\n        color: colors.$mauve;\r\n\r\n        &:hover,\r\n        &:focus {\r\n          text-decoration: none;\r\n        }\r\n      }\r\n    }\r\n\r\n    dso-icon {\r\n      color: colors.$grasgroen;\r\n      font-size: 0.75em;\r\n      margin-inline-start: 0.5em;\r\n      vertical-align: text-bottom;\r\n    }\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","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, h } from \"@stencil/core\";\r\n\r\nimport { DsoTreeItem } from \"./tree-item\";\r\nimport { TreeViewItem, TreeViewPointerEvent } from \"./tree-view.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-tree-view\",\r\n  styleUrl: \"./tree-view.scss\",\r\n  shadow: true,\r\n})\r\nexport class TreeView implements ComponentInterface {\r\n  private tree?: HTMLElement;\r\n\r\n  /**\r\n   * The collection of TreeViewItems\r\n   */\r\n  @Prop()\r\n  collection!: TreeViewItem[];\r\n\r\n  /**\r\n   * Emitted when a tree view item is opened.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the open event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the open state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoOpenItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is closed.\r\n   * The `detail` property of the `CustomEvent` will contain the complete path of TreeViewItems from the\r\n   * root to the item that is emitting the close event. The consumer of the event is responsible for updating\r\n   * the TreeView's collection (usually set the closed state on the last TreeViewItem in path).\r\n   */\r\n  @Event()\r\n  dsoCloseItem!: EventEmitter<TreeViewItem[]>;\r\n\r\n  /**\r\n   * Emitted when a tree view item is clicked.\r\n   * The `detail` property of the `CustomEvent` will contain an object with:\r\n   * `path` = the complete path of TreeViewItems from the root to the item that is emitting the clicked event.\r\n   * `originalEvent` = the original click event.\r\n   * The consumer of the event is responsible for updating the TreeView's collection (usually set the active\r\n   * state on the last TreeViewItem in path and clear all other active item states).\r\n   */\r\n  @Event()\r\n  dsoClickItem!: EventEmitter<TreeViewPointerEvent>;\r\n\r\n  /**\r\n   * Set focus on the last item in the specified path.\r\n   * The consumer is responsible for providing a TreeView collection where the last item is visible.\r\n   * @async\r\n   * @returns Whether the item was found.\r\n   */\r\n  @Method()\r\n  async focusItem(path: TreeViewItem[]): Promise<boolean> {\r\n    const tree = this.tree;\r\n\r\n    if (!tree || path.length === 0) {\r\n      return false;\r\n    }\r\n\r\n    const itemToFocus = path[path.length - 1];\r\n    if (!itemToFocus) {\r\n      throw new Error(\"No itemToFocus found\");\r\n    }\r\n\r\n    const elementToFocus = (Array.from(tree.querySelectorAll(\"p\") ?? []) as HTMLElement[])\r\n      .filter((item) => item.offsetWidth > 0 && item.offsetHeight > 0)\r\n      .find((item) => item.dataset[\"itemId\"] === itemToFocus.id);\r\n\r\n    if (!elementToFocus) {\r\n      return false;\r\n    }\r\n\r\n    TreeView.setFocus(tree, elementToFocus);\r\n\r\n    return true;\r\n  }\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented) {\r\n      return;\r\n    }\r\n\r\n    const isIndexLetter = (str: string) => str.length === 1 && str.match(/\\S/);\r\n\r\n    const tree = event\r\n      .composedPath()\r\n      .find((item) => (item instanceof HTMLElement ? item.className === \"dso-tree\" : false));\r\n\r\n    if (!(event.target instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"ArrowDown\":\r\n        TreeView.moveFocus(tree, event.target, \"next\");\r\n        break;\r\n      case \"ArrowUp\":\r\n        TreeView.moveFocus(tree, event.target, \"previous\");\r\n        break;\r\n      case \"ArrowRight\":\r\n        TreeView.expandItemOrFocusChild(tree, event.target);\r\n        break;\r\n      case \"ArrowLeft\":\r\n        TreeView.collapseItemOrFocusParent(tree, event.target);\r\n        break;\r\n      case \"End\":\r\n        TreeView.moveFocus(tree, event.target, \"last\");\r\n        break;\r\n      case \"Home\":\r\n        TreeView.moveFocus(tree, event.target, \"first\");\r\n        break;\r\n      case \"Enter\":\r\n      case \" \":\r\n        event.target.click();\r\n        break;\r\n      default:\r\n        if (isIndexLetter(event.key)) {\r\n          if (TreeView.setFocusByFirstCharacter(tree, event.target, event.key, event.shiftKey)) {\r\n            break;\r\n          }\r\n        }\r\n\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  // eslint-disable-next-line @stencil-community/own-props-must-be-private -- Omdat this als TreeView instance aan Functionele Components wordt gegeven\r\n  itemClick = (event: MouseEvent, ancestors: TreeViewItem[], item: TreeViewItem) => {\r\n    if (!(event.target instanceof HTMLElement)) {\r\n      return;\r\n    }\r\n\r\n    const contentElement = event.target.closest(\".tree-content\");\r\n\r\n    if (contentElement) {\r\n      const tree = event\r\n        .composedPath()\r\n        .find((eventTarget) => (eventTarget instanceof HTMLElement ? eventTarget.className === \"dso-tree\" : false));\r\n      if (!(contentElement instanceof HTMLParagraphElement) || !(tree instanceof HTMLElement)) {\r\n        return;\r\n      }\r\n\r\n      TreeView.setFocus(tree, contentElement);\r\n      this.dsoClickItem.emit({ path: [...ancestors, item], originalEvent: event });\r\n\r\n      return;\r\n    }\r\n\r\n    if (item.open) {\r\n      this.dsoCloseItem.emit([...ancestors, item]);\r\n    } else {\r\n      this.dsoOpenItem.emit([...ancestors, item]);\r\n    }\r\n  };\r\n\r\n  private static setFocus(tree: HTMLElement, target: HTMLElement) {\r\n    if (target) {\r\n      (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[])\r\n        .filter((item) => item.tabIndex === 0)\r\n        .forEach((item) => (item.tabIndex = -1));\r\n\r\n      target.tabIndex = 0;\r\n      target.focus();\r\n    }\r\n  }\r\n\r\n  private static moveFocus(tree: HTMLElement, el: HTMLElement, moveTo: \"first\" | \"previous\" | \"next\" | \"last\"): void {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    let index = 0;\r\n    switch (moveTo) {\r\n      case \"first\":\r\n        index = 0;\r\n        break;\r\n      case \"previous\":\r\n        index = focusableItems.indexOf(el) - 1;\r\n        break;\r\n      case \"next\":\r\n        index = focusableItems.indexOf(el) + 1;\r\n        break;\r\n      case \"last\":\r\n        index = focusableItems.length - 1;\r\n        break;\r\n    }\r\n\r\n    const focusableItem = focusableItems[index];\r\n    if (!focusableItem) {\r\n      throw new Error(\"No focusableItem found\");\r\n    }\r\n\r\n    TreeView.setFocus(tree, focusableItem);\r\n  }\r\n\r\n  private static expandItemOrFocusChild(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      TreeView.moveFocus(tree, target, \"next\");\r\n    } else {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    }\r\n  }\r\n\r\n  private static collapseItemOrFocusParent(tree: HTMLElement, target: HTMLElement): void {\r\n    if (target?.getAttribute(\"aria-expanded\") === \"true\") {\r\n      const controlElement = target.previousElementSibling?.firstElementChild;\r\n      if (controlElement instanceof HTMLElement) {\r\n        controlElement.click();\r\n      }\r\n    } else {\r\n      const parentTarget = target?.parentElement?.parentElement?.previousElementSibling;\r\n      if (parentTarget instanceof HTMLElement) {\r\n        TreeView.setFocus(tree, parentTarget);\r\n      }\r\n    }\r\n  }\r\n\r\n  private static setFocusByFirstCharacter(\r\n    tree: HTMLElement,\r\n    el: HTMLElement,\r\n    char: string,\r\n    backwards: boolean,\r\n  ): boolean {\r\n    const focusableItems = (Array.from(tree.querySelectorAll(\"p\")) as HTMLElement[]).filter(\r\n      (item) => item.offsetWidth > 0 && item.offsetHeight > 0,\r\n    );\r\n\r\n    if (backwards) {\r\n      focusableItems.reverse();\r\n    }\r\n\r\n    const current = focusableItems.indexOf(el);\r\n\r\n    char = char.toLowerCase();\r\n    let nextItem = focusableItems.find(\r\n      (item, index) => index > current && item.textContent?.toLowerCase().startsWith(char),\r\n    );\r\n    if (!nextItem) {\r\n      nextItem = focusableItems.find(\r\n        (item, index) => index < current && item.textContent?.toLowerCase().startsWith(char),\r\n      );\r\n    }\r\n\r\n    if (nextItem) {\r\n      TreeView.setFocus(tree, nextItem);\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        id=\"tree\"\r\n        class=\"dso-tree\"\r\n        onKeyDown={(e) => this.keyDownListener(e)}\r\n        ref={(element) => (this.tree = element)}\r\n      >\r\n        <ul role=\"tree\" aria-label=\"Objectenboom\">\r\n          {this.collection?.map((item, index) => (\r\n            <DsoTreeItem\r\n              owner={this}\r\n              ancestors={[]}\r\n              item={item}\r\n              index={index}\r\n              level={1}\r\n              setSize={this.collection.length}\r\n            ></DsoTreeItem>\r\n          ))}\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}