@dso-toolkit/core 55.0.0 → 56.1.0

package/dist/components/annotation-button.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const annotationButtonCss = "button {\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}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.btn {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n}\n.btn:focus, .btn:focus-visible {\n  outline-offset: 2px;\n}\n.btn:active {\n  outline: 0;\n}\n.btn.extern::after, .btn.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-left: 8px;\n}\n\n.btn-primary {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  background-color: #b62f41;\n}\n.btn-primary:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.btn-primary:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.btn-primary[disabled], .btn-primary[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.btn-primary.btn-sm {\n  line-height: 1rem;\n}\n.btn-primary.btn-sm dso-icon,\n.btn-primary.btn-sm svg.di, .btn-primary.btn-sm.extern::after, .btn-primary.btn-sm.download::after, .btn-primary.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.btn-primary.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.btn-primary.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.btn-primary dso-icon,\n.btn-primary svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.btn-primary span + dso-icon,\n.btn-primary span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.btn-primary.dso-spinner-left[disabled], .btn-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.btn-primary.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: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.btn-primary.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: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n\na.btn-primary {\n  text-decoration: none;\n  background-color: #b62f41;\n}\na.btn-primary, a.btn-primary:visited {\n  color: #fff;\n}\n\n.btn-default {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  background-color: #b62f41;\n}\n.btn-default:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.btn-default:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.btn-default[disabled], .btn-default[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.btn-default.btn-sm {\n  line-height: 1rem;\n}\n.btn-default.btn-sm dso-icon,\n.btn-default.btn-sm svg.di, .btn-default.btn-sm.extern::after, .btn-default.btn-sm.download::after, .btn-default.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.btn-default.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.btn-default.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.btn-default dso-icon,\n.btn-default svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.btn-default span + dso-icon,\n.btn-default span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.btn-default.dso-spinner-left[disabled], .btn-default.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.btn-default.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.btn-default.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.btn-default.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.btn-default.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.btn-default.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.btn-default.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n\na.btn-default {\n  text-decoration: none;\n  background-color: #b62f41;\n}\na.btn-default, a.btn-default:visited {\n  color: #39870c;\n}\na.btn-default:hover, a.btn-default:visited:hover {\n  color: #fff;\n}\n\n.btn-link {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  background-color: #b62f41;\n}\n.btn-link[disabled] {\n  color: #afcf9d;\n}\n.btn-link[disabled].dso-spinner-left, .btn-link[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.btn-link:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.btn-link:not([disabled]):active {\n  color: #173521;\n}\n.btn-link.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.btn-link.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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.btn-link.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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.btn-link dso-icon + span:not(.sr-only),\n.btn-link svg.di + span:not(.sr-only),\n.btn-link span:not(.sr-only) + dso-icon,\n.btn-link span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.btn-link svg.di.di-chevron-down + span:not(.sr-only),\n.btn-link svg.di.di-chevron-up + span:not(.sr-only),\n.btn-link span:not(.sr-only) + svg.di.di-chevron-down,\n.btn-link span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.btn-link dso-icon[icon=chevron-left] + span:not(.sr-only),\n.btn-link dso-icon[icon=chevron-right] + span:not(.sr-only),\n.btn-link svg.di.di-angle-down + span:not(.sr-only),\n.btn-link svg.di.di-angle-up + span:not(.sr-only),\n.btn-link span:not(.sr-only) + svg.di.di-angle-down,\n.btn-link span:not(.sr-only) + svg.di.di-angle-up,\n.btn-link span:not(.sr-only) + dso-icon[icon=chevron-left],\n.btn-link span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.btn-link dso-icon,\n.btn-link svg.di,\n.btn-link span {\n  vertical-align: middle;\n}\n\na.btn-link {\n  text-decoration: none;\n  background-color: #b62f41;\n}\na.btn-link, a.btn-link:visited {\n  color: #39870c;\n}\n\n.btn-block {\n  display: block;\n  width: 100%;\n}\n.btn-block + .btn-block {\n  margin-top: 5px;\n}\n\ninput[type=submit].btn-block,\ninput[type=reset].btn-block,\ninput[type=button].btn-block {\n  width: 100%;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-left: 8px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\na.dso-primary.btn-sm,\nbutton.dso-primary.btn-sm,\nlabel.dso-primary.btn-sm {\n  line-height: 1rem;\n}\na.dso-primary.btn-sm dso-icon,\na.dso-primary.btn-sm svg.di, a.dso-primary.btn-sm.extern::after, a.dso-primary.btn-sm.download::after, a.dso-primary.btn-sm.dso-spinner::before,\nbutton.dso-primary.btn-sm dso-icon,\nbutton.dso-primary.btn-sm svg.di,\nbutton.dso-primary.btn-sm.extern::after,\nbutton.dso-primary.btn-sm.download::after,\nbutton.dso-primary.btn-sm.dso-spinner::before,\nlabel.dso-primary.btn-sm dso-icon,\nlabel.dso-primary.btn-sm svg.di,\nlabel.dso-primary.btn-sm.extern::after,\nlabel.dso-primary.btn-sm.download::after,\nlabel.dso-primary.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\na.dso-primary.btn-sm.dso-spinner-left::before,\nbutton.dso-primary.btn-sm.dso-spinner-left::before,\nlabel.dso-primary.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\na.dso-primary.btn-sm.dso-spinner-right::after,\nbutton.dso-primary.btn-sm.dso-spinner-right::after,\nlabel.dso-primary.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\na.dso-primary dso-icon,\na.dso-primary svg.di,\nbutton.dso-primary dso-icon,\nbutton.dso-primary svg.di,\nlabel.dso-primary dso-icon,\nlabel.dso-primary svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\na.dso-primary span + dso-icon,\na.dso-primary span + svg.di,\nbutton.dso-primary span + dso-icon,\nbutton.dso-primary span + svg.di,\nlabel.dso-primary span + dso-icon,\nlabel.dso-primary span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.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: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.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: %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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./dso-icons.svg#img-download-wit\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link-wit\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-left: 8px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\na.dso-secondary.btn-sm,\nbutton.dso-secondary.btn-sm,\nlabel.dso-secondary.btn-sm {\n  line-height: 1rem;\n}\na.dso-secondary.btn-sm dso-icon,\na.dso-secondary.btn-sm svg.di, a.dso-secondary.btn-sm.extern::after, a.dso-secondary.btn-sm.download::after, a.dso-secondary.btn-sm.dso-spinner::before,\nbutton.dso-secondary.btn-sm dso-icon,\nbutton.dso-secondary.btn-sm svg.di,\nbutton.dso-secondary.btn-sm.extern::after,\nbutton.dso-secondary.btn-sm.download::after,\nbutton.dso-secondary.btn-sm.dso-spinner::before,\nlabel.dso-secondary.btn-sm dso-icon,\nlabel.dso-secondary.btn-sm svg.di,\nlabel.dso-secondary.btn-sm.extern::after,\nlabel.dso-secondary.btn-sm.download::after,\nlabel.dso-secondary.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\na.dso-secondary.btn-sm.dso-spinner-left::before,\nbutton.dso-secondary.btn-sm.dso-spinner-left::before,\nlabel.dso-secondary.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\na.dso-secondary.btn-sm.dso-spinner-right::after,\nbutton.dso-secondary.btn-sm.dso-spinner-right::after,\nlabel.dso-secondary.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\na.dso-secondary dso-icon,\na.dso-secondary svg.di,\nbutton.dso-secondary dso-icon,\nbutton.dso-secondary svg.di,\nlabel.dso-secondary dso-icon,\nlabel.dso-secondary svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\na.dso-secondary span + dso-icon,\na.dso-secondary span + svg.di,\nbutton.dso-secondary span + dso-icon,\nbutton.dso-secondary span + svg.di,\nlabel.dso-secondary span + dso-icon,\nlabel.dso-secondary span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.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  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./dso-icons.svg#img-download\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: url(\"./dso-icons.svg#img-download-wit\");\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-wit\");\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n  outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-left: 8px;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\na.dso-tertiary.btn-align,\nbutton.dso-tertiary.btn-align,\nlabel.dso-tertiary.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.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  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n  vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  position: relative;\n  top: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./dso-icons.svg#img-download\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-download-grasgroen-40\");\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n  background-image: url(\"./dso-icons.svg#img-download-scampi\");\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./dso-icons.svg#img-external-link\") no-repeat;\n  background-position: center;\n  background-size: cover;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-grasgroen-40\");\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n  background-image: url(\"./dso-icons.svg#img-external-link-scampi\");\n}\n\na.dso-primary {\n  text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n  color: #fff;\n}\na.dso-secondary {\n  text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n  color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n  color: #fff;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.btn:not(.dso-list-button) + .btn:not(.dso-list-button),\n.btn:not(.dso-list-button) + .dso-primary,\n.btn:not(.dso-list-button) + .dso-secondary,\n.btn:not(.dso-list-button) + .dso-tertiary,\n.dso-primary + .btn:not(.dso-list-button),\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .btn:not(.dso-list-button),\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .btn:not(.dso-list-button),\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-left: 16px;\n}\n\ndso-annotation-button {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}";
+
+const AnnotationButton = /*@__PURE__*/ proxyCustomElement(class AnnotationButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dsoClick = createEvent(this, "dsoClick", 3);
+    this.handleClick = (e) => {
+      this.dsoClick.emit({ originalEvent: e, open: !this.open });
+    };
+    this.identifier = undefined;
+    this.open = false;
+  }
+  render() {
+    return (h("button", { type: "button", class: "dso-tertiary", "aria-controls": this.identifier, "aria-expanded": this.open.toString(), onClick: this.handleClick }, h("dso-icon", { icon: "label" }), h("span", { class: "sr-only" }, "Toelichting bekijken")));
+  }
+  static get style() { return annotationButtonCss; }
+}, [0, "dso-annotation-button", {
+    "identifier": [1],
+    "open": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-annotation-button", "dso-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-annotation-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AnnotationButton);
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { AnnotationButton as A, defineCustomElement as d };
+
+//# sourceMappingURL=annotation-button.js.map

package/dist/components/annotation-button.js.map

@@ -0,0 +1 @@
+{"file":"annotation-button.js","mappings":";;;AAAA,MAAM,mBAAmB,GAAG,qywCAAqywC;;MCYpzwC,gBAAgB;;;;;IAmBnB,gBAAW,GAAG,CAAC,CAAa;MAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC5D,CAAC;;gBAVK,KAAK;;EAYZ,MAAM;IACJ,QACE,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,mBACL,IAAI,CAAC,UAAU,mBACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,2BAA4B,CAC1C,EACT;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/annotation-button/annotation-button.scss?tag=dso-annotation-button","./src/components/annotation-button/annotation-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n\r\ndso-annotation-button {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n","import { h, Component, ComponentInterface, Event, Prop, EventEmitter } from \"@stencil/core\";\r\n\r\nexport interface AnnotationButtonClickEvent {\r\n  originalEvent: Event;\r\n  open: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-button\",\r\n  styleUrl: \"annotation-button.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls pointing to element inside another component)\r\n})\r\nexport class AnnotationButton implements ComponentInterface {\r\n  /**\r\n   * To link the Annotation Button with `aria-controls` to a different element, most likely an Annotation Output.\r\n   */\r\n  @Prop()\r\n  identifier!: string | undefined;\r\n\r\n  /**\r\n   * Set to true when the annotation is open.\r\n   */\r\n  @Prop()\r\n  open = false;\r\n\r\n  /**\r\n   * Emitted when user activates the button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<AnnotationButtonClickEvent>;\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.dsoClick.emit({ originalEvent: e, open: !this.open });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type=\"button\"\r\n        class=\"dso-tertiary\"\r\n        aria-controls={this.identifier}\r\n        aria-expanded={this.open.toString()}\r\n        onClick={this.handleClick}\r\n      >\r\n        <dso-icon icon=\"label\"></dso-icon>\r\n        <span class=\"sr-only\">Toelichting bekijken</span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/annotation-output.js

@@ -0,0 +1,60 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './expandable.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './responsive-element.js';
+
+const annotationOutputCss = "*,*::after,*::before{box-sizing:border-box}dso-annotation-output{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-annotation-header{align-items:center;background-color:#f2f2f2;clear:both;display:flex;margin-bottom:2px;margin-top:8px;padding-left:16px;padding-right:8px;padding-top:8px;padding-bottom:8px}.dso-annotation-header>[slot=title]{color:#000;font-size:1.25rem;margin-bottom:0;margin-top:0}.dso-annotation-header>:nth-child(2){margin-left:auto}dso-responsive-element[small] .dso-annotation-header,dso-responsive-element[medium] .dso-annotation-header{display:grid;row-gap:8px}dso-responsive-element[small] .dso-annotation-header *[slot=title],dso-responsive-element[medium] .dso-annotation-header *[slot=title]{grid-row:1;grid-column:1}dso-responsive-element[small] .dso-annotation-header *[slot=addons],dso-responsive-element[medium] .dso-annotation-header *[slot=addons]{grid-row:2;grid-column:1;margin-left:initial}dso-responsive-element[small] .dso-annotation-header .dso-annotation-close-button,dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-button{grid-row:1;grid-column:2;margin-left:8px;text-align:end}.dso-annotation-content{background-color:#f2f2f2;padding-left:16px;padding-right:8px;padding-top:8px;padding-bottom:8px}.dso-annotation-close-button{margin-left:32px}.dso-annotation-prefix{font-style:italic}";
+
+const AnnotationOutput = /*@__PURE__*/ proxyCustomElement(class AnnotationOutput extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.dsoClose = createEvent(this, "dsoClose", 3);
+    this.toggleHandler = (e) => {
+      this.dsoClose.emit({ originalEvent: e });
+    };
+    this.identifier = undefined;
+    this.annotationPrefix = undefined;
+    this.open = false;
+  }
+  render() {
+    return (h("dso-responsive-element", null, h("dso-expandable", { id: this.identifier, open: this.open }, this.annotationPrefix && h("span", { class: "dso-annotation-prefix" }, this.annotationPrefix), h("div", { class: "dso-annotation-header" }, h("slot", { name: "title" }), h("slot", { name: "addons" }), h("button", { type: "button", class: "dso-tertiary dso-annotation-close-button", onClick: this.toggleHandler }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Toelichting sluiten"))), h("div", { class: "dso-annotation-content" }, h("slot", null)))));
+  }
+  static get style() { return annotationOutputCss; }
+}, [4, "dso-annotation-output", {
+    "identifier": [513],
+    "annotationPrefix": [513, "annotation-prefix"],
+    "open": [516]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-annotation-output", "dso-expandable", "dso-icon", "dso-responsive-element"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-annotation-output":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, AnnotationOutput);
+      }
+      break;
+    case "dso-expandable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "dso-responsive-element":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { AnnotationOutput as A, defineCustomElement as d };
+
+//# sourceMappingURL=annotation-output.js.map

package/dist/components/annotation-output.js.map

@@ -0,0 +1 @@
+{"file":"annotation-output.js","mappings":";;;;;AAAA,MAAM,mBAAmB,GAAG,m6CAAm6C;;MCWl7C,gBAAgB;;;;;IAyBnB,kBAAa,GAAG,CAAC,CAAa;MACpC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;KAC1C,CAAC;;;gBAVK,KAAK;;EAYZ,MAAM;IACJ,QACE,kCACE,sBAAgB,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACjD,IAAI,CAAC,gBAAgB,IAAI,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,EAC5F,WAAK,KAAK,EAAC,uBAAuB,IAChC,YAAM,IAAI,EAAC,OAAO,GAAG,EACrB,YAAM,IAAI,EAAC,QAAQ,GAAG,EACtB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,0CAA0C,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAChG,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,CACL,EACN,WAAK,KAAK,EAAC,wBAAwB,IACjC,eAAQ,CACJ,CACS,CACM,EACzB;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/annotation-output/annotation-output.scss?tag=dso-annotation-output","./src/components/annotation-output/annotation-output.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@include utilities.box-sizing();\r\n\r\ndso-annotation-output {\r\n  display: block;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-annotation-header {\r\n  align-items: center;\r\n  background-color: colors.$grijs-5;\r\n  clear: both;\r\n  display: flex;\r\n  margin-bottom: 2px;\r\n  margin-top: units.$u1;\r\n  padding-left: units.$u2;\r\n  padding-right: units.$u1;\r\n  padding-top: units.$u1;\r\n  padding-bottom: units.$u1;\r\n\r\n  > [slot=\"title\"] {\r\n    color: colors.$zwart;\r\n    font-size: 1.25rem;\r\n    margin-bottom: 0;\r\n    margin-top: 0;\r\n  }\r\n\r\n  > :nth-child(2) {\r\n    margin-left: auto;\r\n  }\r\n}\r\n\r\ndso-responsive-element[small],\r\ndso-responsive-element[medium] {\r\n  .dso-annotation-header {\r\n    display: grid;\r\n    row-gap: units.$u1;\r\n\r\n    *[slot=\"title\"] {\r\n      grid-row: 1;\r\n      grid-column: 1;\r\n    }\r\n\r\n    *[slot=\"addons\"] {\r\n      grid-row: 2;\r\n      grid-column: 1;\r\n      margin-left: initial;\r\n    }\r\n\r\n    .dso-annotation-close-button {\r\n      grid-row: 1;\r\n      grid-column: 2;\r\n      margin-left: units.$u1;\r\n      text-align: end;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-annotation-content {\r\n  background-color: colors.$grijs-5;\r\n  padding-left: units.$u2;\r\n  padding-right: units.$u1;\r\n  padding-top: units.$u1;\r\n  padding-bottom: units.$u1;\r\n}\r\n\r\n.dso-annotation-close-button {\r\n  margin-left: units.$u4;\r\n}\r\n\r\n.dso-annotation-prefix {\r\n  font-style: italic;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\nexport interface AnnotationOutputCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-annotation-output\",\r\n  styleUrl: \"annotation-output.scss\",\r\n  // No shadowdom for a11y reasons (aria-controls being set inside another component)\r\n})\r\nexport class AnnotationOutput implements ComponentInterface {\r\n  /**\r\n   * The annotation-button that toggles this component should have the same identifier.\r\n   */\r\n  @Prop({ reflect: true })\r\n  identifier!: string;\r\n\r\n  /**\r\n   * This text will be displayed above the annotation-output when opened\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotationPrefix?: string;\r\n\r\n  /**\r\n   * Set to `true` to show content.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * This event is emitted when the user activates the Annotation Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClose!: EventEmitter<AnnotationOutputCloseEvent>;\r\n\r\n  private toggleHandler = (e: MouseEvent) => {\r\n    this.dsoClose.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <dso-responsive-element>\r\n        <dso-expandable id={this.identifier} open={this.open}>\r\n          {this.annotationPrefix && <span class=\"dso-annotation-prefix\">{this.annotationPrefix}</span>}\r\n          <div class=\"dso-annotation-header\">\r\n            <slot name=\"title\" />\r\n            <slot name=\"addons\" />\r\n            <button type=\"button\" class=\"dso-tertiary dso-annotation-close-button\" onClick={this.toggleHandler}>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n              <span class=\"sr-only\">Toelichting sluiten</span>\r\n            </button>\r\n          </div>\r\n          <div class=\"dso-annotation-content\">\r\n            <slot />\r\n          </div>\r\n        </dso-expandable>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/{esm/dso-badge.entry.js → components/badge.js}

@@ -1,19 +1,36 @@
-import { r as registerInstance, h } from './index-898d8443.js';
-import { c as clsx } from './clsx.m-25174a58.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
 
 const badgeCss = ":host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-badge{background-color:#666;border:1px solid #666;border-radius:1em;color:#fff;display:inline-block;font-size:0.875em;line-height:1;min-width:1.5rem;padding:4px 8px;text-align:center}.dso-badge.badge-info{background-color:#6ca4d9;border-color:#6ca4d9;color:#000}.dso-badge.badge-primary{background-color:#275937;border-color:#275937;color:#fff}.dso-badge.badge-success{background-color:#39870c;border-color:#39870c;color:#fff}.dso-badge.badge-warning{background-color:#dcd400;border-color:#dcd400;color:#000}.dso-badge.badge-danger{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-error{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.dso-badge.badge-outline{background-color:#fff;border-color:#191919;color:#191919}.dso-badge.badge-attention{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}";
 
-const Badge = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.status = undefined;
   }
   render() {
     return (h("span", { class: clsx("dso-badge", { [`badge-${this.status}`]: this.status }) }, h("slot", null)));
   }
-};
-Badge.style = badgeCss;
+  static get style() { return badgeCss; }
+}, [1, "dso-badge", {
+    "status": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Badge);
+      }
+      break;
+  } });
+}
 
-export { Badge as dso_badge };
+export { Badge as B, defineCustomElement as d };
 
-//# sourceMappingURL=dso-badge.entry.js.map
+//# sourceMappingURL=badge.js.map

package/dist/components/badge.js.map

@@ -0,0 +1 @@
+{"file":"badge.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,qgCAAqgC;;MCQzgC,KAAK;;;;;;;EAOhB,MAAM;IACJ,QACE,YAAM,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IACvE,eAAa,CACR,EACP;GACH;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/badge/badge.scss?tag=dso-badge&encapsulation=shadow","./src/components/badge/badge.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/badge\";\r\n\r\n:host {\r\n  display: inline-block;\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.dso-badge {\r\n  @include badge.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\n@Component({\r\n  tag: \"dso-badge\",\r\n  styleUrl: \"badge.scss\",\r\n  shadow: true,\r\n})\r\nexport class Badge {\r\n  /**\r\n   * The status of the Badge.\r\n   */\r\n  @Prop()\r\n  status?: \"primary\" | \"success\" | \"info\" | \"warning\" | \"danger\" | \"error\" | \"outline\" | \"attention\";\r\n\r\n  render() {\r\n    return (\r\n      <span class={clsx(\"dso-badge\", { [`badge-${this.status}`]: this.status })}>\r\n        <slot></slot>\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/document-component.js

@@ -0,0 +1,163 @@
+import { h, proxyCustomElement, HTMLElement, createEvent, Fragment } from '@stencil/core/internal/client';
+import { d as defineCustomElement$7 } from './alert.js';
+import { d as defineCustomElement$6 } from './annotation-button.js';
+import { d as defineCustomElement$5 } from './badge.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './label.js';
+import { d as defineCustomElement$2 } from './ozon-content.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+const Heading = (_a, children) => {
+  var { heading } = _a, props = __rest(_a, ["heading"]);
+  switch (heading) {
+    default:
+    case "h2":
+      return h("h2", Object.assign({}, props), children);
+    case "h3":
+      return h("h3", Object.assign({}, props), children);
+    case "h4":
+      return h("h4", Object.assign({}, props), children);
+    case "h5":
+      return h("h5", Object.assign({}, props), children);
+    case "h6":
+      return h("h6", Object.assign({}, props), children);
+  }
+};
+
+const documentComponentCss = "ins{background-color:#e4f1d4;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25);color:#000;text-decoration:none}.not-applicable{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}:host{display:block}:host-context(dso-responsive-element:not([small])) .content{padding-left:24px}:host([type=LID]:where([wijzigactie=verwijder],[wijzigactie=voegtoe])){padding-left:8px;margin-right:8px}:host(:where([wijzigactie=verwijder],[wijzigactie=voegtoe])),:host(:where([wijzigactie=nieuweContainer],[wijzigactie=verwijderContainer])) .heading-container{padding-top:4px;padding-bottom:4px}:host([wijzigactie=verwijderContainer]) .heading-container,:host(:where([wijzigactie=verwijder])){background-color:#f5d8dc;color:#000;text-decoration:line-through}:host([wijzigactie=nieuweContainer]) .heading-container,:host([wijzigactie=voegtoe]){background-color:#e4f1d4;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25);color:#000}:host([filtered]){position:relative}:host([filtered])::before{content:\"\";position:absolute;display:block;width:3px;top:0;bottom:0;background-color:#6ca4d9}:host([open]) .heading-container{margin-bottom:8px}.toggle-button{border:0;padding:0;background:0;color:#275937;cursor:pointer}.heading-element{align-items:start;display:flex;font-size:1rem;color:#275937;margin:0}.heading-element>*{vertical-align:middle}:host([type=LID]) .heading-container{margin-bottom:0}:host([type=LID]) .wijzigactie-label{margin-left:0}:host([type=LID]) .heading-element{color:#000}:host([type=LID]) .content{padding-left:0 !important}:host(:not([type=LID])) .heading-element{cursor:pointer}:host(:not([type=LID])) .heading-element:hover,:host(:not([type=LID])) .heading-element:focus{color:#676cb0;text-decoration:underline}:host(:not([type=LID])) .heading-element:active{text-decoration:none}.addons{margin-inline-start:auto;display:flex;gap:8px}.heading{display:flex;gap:8px}:host([type=ARTIKEL]) .heading-element,:host([type=ARTIKEL]) .toggle-button{color:#000}.wijzigactie-label{font-style:italic;margin-left:24px}.heading-container{padding-right:8px}";
+
+const wijzigActieLabels = {
+  nieuweContainer: "Toegevoegd",
+  verwijder: "Verwijderd",
+  verwijderContainer: "Verwijderd",
+  voegtoe: "Toegevoegd",
+};
+const DocumentComponent = /*@__PURE__*/ proxyCustomElement(class DocumentComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoOpenToggle = createEvent(this, "dsoOpenToggle", 3);
+    this.dsoAnnotationToggle = createEvent(this, "dsoAnnotationToggle", 3);
+    this.handleHeadingClick = (e) => {
+      if (this.type !== "LID") {
+        this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });
+      }
+    };
+    this.heading = "h2";
+    this.label = undefined;
+    this.nummer = undefined;
+    this.opschrift = undefined;
+    this.inhoud = undefined;
+    this.open = false;
+    this.filtered = false;
+    this.notApplicable = false;
+    this.genesteOntwerpInformatie = false;
+    this.bevatOntwerpInformatie = false;
+    this.annotated = false;
+    this.gereserveerd = false;
+    this.vervallen = false;
+    this.openAnnotation = false;
+    this.alternativeTitle = undefined;
+    this.type = undefined;
+    this.wijzigactie = undefined;
+  }
+  get wijzigactieLabel() {
+    return this.wijzigactie && wijzigActieLabels[this.wijzigactie];
+  }
+  suffix() {
+    if (this.vervallen) {
+      return "vervallen";
+    }
+    if (this.gereserveerd) {
+      return "gereserveerd";
+    }
+    return undefined;
+  }
+  render() {
+    const suffix = this.suffix();
+    return (h(Fragment, null, h("div", { class: "heading-container" }, this.wijzigactie && h("span", { class: "wijzigactie-label" }, this.wijzigactieLabel, ":"), h("div", { class: "heading" }, h(Heading, { heading: this.heading, class: "heading-element", onClick: this.handleHeadingClick }, this.type !== "LID" && (h("button", { type: "button", class: "toggle-button" }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }))), h("div", { class: "title" }, this.notApplicable && h("span", { class: "not-applicable" }, "Niet van toepassing:"), this.label || this.nummer || this.opschrift ? (h(Fragment, null, this.label && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.label, inline: true }))), this.nummer && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.nummer, inline: true }))), this.opschrift && (h(Fragment, null, " ", h("dso-ozon-content", { content: this.opschrift, inline: true }))))) : (this.alternativeTitle), suffix && h("span", null, " - [", suffix, "]"))), this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (h(Fragment, null, h("dso-badge", { status: "warning", "aria-describedby": "nested-draft-description" }, "!"), h("dso-tooltip", { id: "nested-draft-description" }, "Er is een ontwerp beschikbaar."))), (this.bevatOntwerpInformatie || this.annotated) && (h("div", { class: "addons" }, this.bevatOntwerpInformatie && (h("dso-label", { status: "warning", compact: true }, "Ontwerp")), this.annotated && (h("dso-annotation-button", { identifier: "expandable", open: this.openAnnotation, onDsoClick: (e) => this.dsoAnnotationToggle.emit({ originalEvent: e }) })))))), h("slot", { name: "annotation" }), this.open && (this.inhoud || this.gereserveerd) && (h("div", { class: "content" }, this.gereserveerd && (h("dso-alert", { status: "info" }, "Dit onderdeel is gereserveerd voor toekomstige toevoeging.")), h("dso-ozon-content", { content: this.inhoud }))), h("slot", null)));
+  }
+  static get style() { return documentComponentCss; }
+}, [1, "dso-document-component", {
+    "heading": [1],
+    "label": [1],
+    "nummer": [1],
+    "opschrift": [1],
+    "inhoud": [1],
+    "open": [516],
+    "filtered": [516],
+    "notApplicable": [516, "not-applicable"],
+    "genesteOntwerpInformatie": [516, "geneste-ontwerp-informatie"],
+    "bevatOntwerpInformatie": [516, "bevat-ontwerp-informatie"],
+    "annotated": [516],
+    "gereserveerd": [4],
+    "vervallen": [4],
+    "openAnnotation": [4, "open-annotation"],
+    "alternativeTitle": [1, "alternative-title"],
+    "type": [513],
+    "wijzigactie": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-document-component", "dso-alert", "dso-annotation-button", "dso-badge", "dso-icon", "dso-label", "dso-ozon-content", "dso-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-document-component":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, DocumentComponent);
+      }
+      break;
+    case "dso-alert":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "dso-annotation-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "dso-badge":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "dso-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "dso-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "dso-ozon-content":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "dso-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { DocumentComponent as D, defineCustomElement as d };
+
+//# sourceMappingURL=document-component.js.map

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

@@ -0,0 +1 @@
+{"file":"document-component.js","mappings":";;;;;;;;;;;;;;;;;;;;AAOO,MAAM,OAAO,GAEhB,CAAC,EAAqB,EAAE,QAAQ;MAA/B,EAAE,OAAO,OAAY,EAAP,KAAK,cAAnB,WAAqB,CAAF;EACtB,QAAQ,OAAO;IACb,QAAQ;IACR,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IACxC,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IACxC,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IACxC,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;IACxC,KAAK,IAAI;MACP,OAAO,0BAAQ,KAAK,GAAG,QAAQ,CAAM,CAAC;GACzC;AACH,CAAC;;ACvBD,MAAM,oBAAoB,GAAG,4iEAA4iE;;ACQzkE,MAAM,iBAAiB,GAA8D;EACnF,eAAe,EAAE,YAAY;EAC7B,SAAS,EAAE,YAAY;EACvB,kBAAkB,EAAE,YAAY;EAChC,OAAO,EAAE,YAAY;CACtB,CAAC;MAOW,iBAAiB;;;;;;;IAuHpB,uBAAkB,GAAG,CAAC,CAAa;MACzC,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;OACjE;KACF,CAAC;mBAtH0C,IAAI;;;;;gBA8BzC,KAAK;oBAMD,KAAK;yBAMA,KAAK;oCAMM,KAAK;kCAMP,KAAK;qBAMlB,KAAK;wBAMF,KAAK;qBAMR,KAAK;0BAMA,KAAK;;;;;EAgCtB,IAAY,gBAAgB;IAC1B,OAAO,IAAI,CAAC,WAAW,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;GAChE;EAQO,MAAM;IACZ,IAAI,IAAI,CAAC,SAAS,EAAE;MAClB,OAAO,WAAW,CAAC;KACpB;IAED,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,OAAO,cAAc,CAAC;KACvB;IAED,OAAO,SAAS,CAAC;GAClB;EAED,MAAM;IACJ,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;IAE7B,QACE,kBACE,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,WAAW,IAAI,YAAM,KAAK,EAAC,mBAAmB,IAAE,IAAI,CAAC,gBAAgB,MAAS,EACpF,WAAK,KAAK,EAAC,SAAS,IAClB,EAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IACrF,IAAI,CAAC,IAAI,KAAK,KAAK,KAClB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,eAAe,IACzC,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,cAAc,GAAG,eAAe,GAAa,CAClE,CACV,EACD,WAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,aAAa,IAAI,YAAM,KAAK,EAAC,gBAAgB,2BAA4B,EAC9E,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAC1C,kBACG,IAAI,CAAC,KAAK,KACT,kBACG,GAAG,EACJ,wBAAkB,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,SAAoB,CAChE,CACJ,EACA,IAAI,CAAC,MAAM,KACV,kBACG,GAAG,EACJ,wBAAkB,OAAO,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,SAAoB,CACjE,CACJ,EACA,IAAI,CAAC,SAAS,KACb,kBACG,GAAG,EACJ,wBAAkB,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,SAAoB,CACpE,CACJ,CACA,KAEH,IAAI,CAAC,gBAAgB,CACtB,EACA,MAAM,IAAI,wBAAW,MAAM,MAAS,CACjC,CACE,EACT,IAAI,CAAC,wBAAwB,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,sBAAsB,KAC1E,kBACE,iBAAW,MAAM,EAAC,SAAS,sBAAkB,0BAA0B,QAE3D,EACZ,mBAAa,EAAE,EAAC,0BAA0B,qCAA6C,CACtF,CACJ,EACA,CAAC,IAAI,CAAC,sBAAsB,IAAI,IAAI,CAAC,SAAS,MAC7C,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,sBAAsB,KAC1B,iBAAW,MAAM,EAAC,SAAS,EAAC,OAAO,oBAEvB,CACb,EACA,IAAI,CAAC,SAAS,KACb,6BACE,UAAU,EAAC,YAAY,EACvB,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,GAC/C,CAC1B,CACG,CACP,CACG,CACF,EACN,YAAM,IAAI,EAAC,YAAY,GAAG,EACzB,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,YAAY,CAAC,KAC9C,WAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,YAAY,KAChB,iBAAW,MAAM,EAAC,MAAM,iEAAuE,CAChG,EACD,wBAAkB,OAAO,EAAE,IAAI,CAAC,MAAM,GAAqB,CACvD,CACP,EACD,eAAQ,CACP,EACH;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/document-component/document-component-heading.tsx","./src/components/document-component/document-component.scss?tag=dso-document-component&encapsulation=shadow","./src/components/document-component/document-component.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\";\r\nimport { JSXBase } from \"@stencil/core/internal\";\r\n\r\ninterface DocumentComponentHeadingProps {\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n}\r\n\r\nexport const Heading: FunctionalComponent<\r\n  DocumentComponentHeadingProps & JSXBase.HTMLAttributes<HTMLHeadingElement>\r\n> = ({ heading, ...props }, children) => {\r\n  switch (heading) {\r\n    default:\r\n    case \"h2\":\r\n      return <h2 {...props}>{children}</h2>;\r\n    case \"h3\":\r\n      return <h3 {...props}>{children}</h3>;\r\n    case \"h4\":\r\n      return <h4 {...props}>{children}</h4>;\r\n    case \"h5\":\r\n      return <h5 {...props}>{children}</h5>;\r\n    case \"h6\":\r\n      return <h6 {...props}>{children}</h6>;\r\n  }\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/document-component\";\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n\r\n.not-applicable {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host-context(dso-responsive-element:not([small])) {\r\n  .content {\r\n    padding-left: document-component.$indent;\r\n  }\r\n}\r\n\r\n:host([type=\"LID\"]:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])) {\r\n  padding-left: units.$u1;\r\n  margin-right: units.$u1;\r\n}\r\n\r\n:host(:where([wijzigactie=\"verwijder\"], [wijzigactie=\"voegtoe\"])),\r\n:host(:where([wijzigactie=\"nieuweContainer\"], [wijzigactie=\"verwijderContainer\"])) .heading-container {\r\n  padding-top: units.$u1 * 0.5;\r\n  padding-bottom: units.$u1 * 0.5;\r\n}\r\n\r\n:host([wijzigactie=\"verwijderContainer\"]) .heading-container,\r\n:host(:where([wijzigactie=\"verwijder\"])) {\r\n  background-color: colors.$danger-bg-color;\r\n  color: colors.$zwart;\r\n  text-decoration: line-through;\r\n}\r\n\r\n:host([wijzigactie=\"nieuweContainer\"]) .heading-container,\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  background-color: colors.$success-bg-color;\r\n  box-shadow: insert.$insert-box-shadow;\r\n  color: colors.$zwart;\r\n}\r\n\r\n:host([filtered]) {\r\n  position: relative;\r\n\r\n  &::before {\r\n    content: \"\";\r\n    position: absolute;\r\n    display: block;\r\n    width: 3px;\r\n    top: 0;\r\n    bottom: 0;\r\n    background-color: colors.$lichtblauw;\r\n  }\r\n}\r\n\r\n:host([open]) {\r\n  .heading-container {\r\n    margin-bottom: units.$u1;\r\n  }\r\n}\r\n\r\n.toggle-button {\r\n  border: 0;\r\n  padding: 0;\r\n  background: 0;\r\n  color: colors.$bosgroen;\r\n  cursor: pointer;\r\n}\r\n\r\n.heading-element {\r\n  align-items: start;\r\n  display: flex;\r\n  font-size: 1rem;\r\n  color: colors.$bosgroen;\r\n  margin: 0;\r\n\r\n  > * {\r\n    vertical-align: middle;\r\n  }\r\n}\r\n\r\n:host([type=\"LID\"]) {\r\n  .heading-container {\r\n    margin-bottom: 0;\r\n  }\r\n\r\n  .wijzigactie-label {\r\n    margin-left: 0;\r\n  }\r\n\r\n  .heading-element {\r\n    color: colors.$zwart;\r\n  }\r\n\r\n  .content {\r\n    padding-left: 0 !important;\r\n  }\r\n}\r\n\r\n:host(:not([type=\"LID\"])) {\r\n  .heading-element {\r\n    cursor: pointer;\r\n\r\n    @include anchor.pseudo();\r\n  }\r\n}\r\n\r\n.addons {\r\n  margin-inline-start: auto;\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.heading {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n:host([type=\"ARTIKEL\"]) {\r\n  .heading-element,\r\n  .toggle-button {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n.wijzigactie-label {\r\n  font-style: italic;\r\n  margin-left: document-component.$indent;\r\n}\r\n\r\n.heading-container {\r\n  padding-right: units.$u1;\r\n}\r\n","import { h, Component, ComponentInterface, Event, EventEmitter, Fragment, Prop } from \"@stencil/core\";\r\nimport {\r\n  DocumentComponentOpenToggleEvent,\r\n  DocumentComponentToggleAnnotationEvent,\r\n  DocumentComponentWijzigactie,\r\n} from \"./document-component.types\";\r\nimport { Heading } from \"./document-component-heading\";\r\n\r\nconst wijzigActieLabels: { [wijzigActie in DocumentComponentWijzigactie]: string } = {\r\n  nieuweContainer: \"Toegevoegd\",\r\n  verwijder: \"Verwijderd\",\r\n  verwijderContainer: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\n@Component({\r\n  tag: \"dso-document-component\",\r\n  styleUrl: \"document-component.scss\",\r\n  shadow: true,\r\n})\r\nexport class DocumentComponent implements ComponentInterface {\r\n  /**\r\n   * The heading element to use.\r\n   */\r\n  @Prop()\r\n  heading: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\r\n\r\n  /**\r\n   * The Label XML.\r\n   */\r\n  @Prop()\r\n  label?: string;\r\n\r\n  /**\r\n   * The Nummer XML.\r\n   */\r\n  @Prop()\r\n  nummer?: string;\r\n\r\n  /**\r\n   * The Opschrift XML.\r\n   */\r\n  @Prop()\r\n  opschrift?: string;\r\n\r\n  /**\r\n   * The Inhoud XML.\r\n   */\r\n  @Prop()\r\n  inhoud?: string;\r\n\r\n  /**\r\n   * This boolean attribute indicates whether the children are visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Marks this Document Component as belonging to an active filter.\r\n   */\r\n  @Prop({ reflect: true })\r\n  filtered = false;\r\n\r\n  /**\r\n   * Marks this Document Component as not-applicable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  notApplicable = false;\r\n\r\n  /**\r\n   * When a child Document Component has a status \"Draft\".\r\n   */\r\n  @Prop({ reflect: true })\r\n  genesteOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Marks as draft.\r\n   */\r\n  @Prop({ reflect: true })\r\n  bevatOntwerpInformatie = false;\r\n\r\n  /**\r\n   * Enables annotations.\r\n   */\r\n  @Prop({ reflect: true })\r\n  annotated = false;\r\n\r\n  /**\r\n   * Marks Document Component as reserved.\r\n   */\r\n  @Prop()\r\n  gereserveerd = false;\r\n\r\n  /**\r\n   * Marks the Document Component as expired.\r\n   */\r\n  @Prop()\r\n  vervallen = false;\r\n\r\n  /**\r\n   * When the Annotation Output is opened, set this to true.\r\n   */\r\n  @Prop()\r\n  openAnnotation = false;\r\n\r\n  /**\r\n   * An alternative title to show when there is nothing to create a title.\r\n   */\r\n  @Prop()\r\n  alternativeTitle?: string;\r\n\r\n  /**\r\n   * Type of Document Component.\r\n   */\r\n  @Prop({ reflect: true })\r\n  type?: string;\r\n\r\n  /**\r\n   * The wijzigactie as in STOP.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: DocumentComponentWijzigactie;\r\n\r\n  /**\r\n   * Emitted when the user activates the toggle.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOpenToggle!: EventEmitter<DocumentComponentOpenToggleEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the annotation button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoAnnotationToggle!: EventEmitter<DocumentComponentToggleAnnotationEvent>;\r\n\r\n  private get wijzigactieLabel(): string | undefined {\r\n    return this.wijzigactie && wijzigActieLabels[this.wijzigactie];\r\n  }\r\n\r\n  private handleHeadingClick = (e: MouseEvent) => {\r\n    if (this.type !== \"LID\") {\r\n      this.dsoOpenToggle.emit({ originalEvent: e, open: !this.open });\r\n    }\r\n  };\r\n\r\n  private suffix(): string | undefined {\r\n    if (this.vervallen) {\r\n      return \"vervallen\";\r\n    }\r\n\r\n    if (this.gereserveerd) {\r\n      return \"gereserveerd\";\r\n    }\r\n\r\n    return undefined;\r\n  }\r\n\r\n  render() {\r\n    const suffix = this.suffix();\r\n\r\n    return (\r\n      <>\r\n        <div class=\"heading-container\">\r\n          {this.wijzigactie && <span class=\"wijzigactie-label\">{this.wijzigactieLabel}:</span>}\r\n          <div class=\"heading\">\r\n            <Heading heading={this.heading} class=\"heading-element\" onClick={this.handleHeadingClick}>\r\n              {this.type !== \"LID\" && (\r\n                <button type=\"button\" class=\"toggle-button\">\r\n                  <dso-icon icon={this.open ? \"chevron-down\" : \"chevron-right\"}></dso-icon>\r\n                </button>\r\n              )}\r\n              <div class=\"title\">\r\n                {this.notApplicable && <span class=\"not-applicable\">Niet van toepassing:</span>}\r\n                {this.label || this.nummer || this.opschrift ? (\r\n                  <>\r\n                    {this.label && (\r\n                      <>\r\n                        {\" \"}\r\n                        <dso-ozon-content content={this.label} inline></dso-ozon-content>\r\n                      </>\r\n                    )}\r\n                    {this.nummer && (\r\n                      <>\r\n                        {\" \"}\r\n                        <dso-ozon-content content={this.nummer} inline></dso-ozon-content>\r\n                      </>\r\n                    )}\r\n                    {this.opschrift && (\r\n                      <>\r\n                        {\" \"}\r\n                        <dso-ozon-content content={this.opschrift} inline></dso-ozon-content>\r\n                      </>\r\n                    )}\r\n                  </>\r\n                ) : (\r\n                  this.alternativeTitle\r\n                )}\r\n                {suffix && <span> - [{suffix}]</span>}\r\n              </div>\r\n            </Heading>\r\n            {this.genesteOntwerpInformatie && !this.open && !this.bevatOntwerpInformatie && (\r\n              <>\r\n                <dso-badge status=\"warning\" aria-describedby=\"nested-draft-description\">\r\n                  !\r\n                </dso-badge>\r\n                <dso-tooltip id=\"nested-draft-description\">Er is een ontwerp beschikbaar.</dso-tooltip>\r\n              </>\r\n            )}\r\n            {(this.bevatOntwerpInformatie || this.annotated) && (\r\n              <div class=\"addons\">\r\n                {this.bevatOntwerpInformatie && (\r\n                  <dso-label status=\"warning\" compact>\r\n                    Ontwerp\r\n                  </dso-label>\r\n                )}\r\n                {this.annotated && (\r\n                  <dso-annotation-button\r\n                    identifier=\"expandable\"\r\n                    open={this.openAnnotation}\r\n                    onDsoClick={(e) => this.dsoAnnotationToggle.emit({ originalEvent: e })}\r\n                  ></dso-annotation-button>\r\n                )}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n        <slot name=\"annotation\" />\r\n        {this.open && (this.inhoud || this.gereserveerd) && (\r\n          <div class=\"content\">\r\n            {this.gereserveerd && (\r\n              <dso-alert status=\"info\">Dit onderdeel is gereserveerd voor toekomstige toevoeging.</dso-alert>\r\n            )}\r\n            <dso-ozon-content content={this.inhoud}></dso-ozon-content>\r\n          </div>\r\n        )}\r\n        <slot />\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}