npm - @dso-toolkit/core - Versions diffs - 79.1.0 → 81.0.0 - Mend

@dso-toolkit/core 79.1.0 → 81.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (738) hide show

package/dist/bundle/dso-map-controls.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-Dm38fPV4.js';
 import { i as i18n } from './p-B_kXuEcW.js';
 import { d as defineCustomElement$4 } from './p-8gGambFe.js';
-import { d as defineCustomElement$3 } from './p-Dwv_hVo9.js';
-import { d as defineCustomElement$2 } from './p-DZgHugpQ.js';
+import { d as defineCustomElement$3 } from './p-DTle6By6.js';
+import { d as defineCustomElement$2 } from './p-BwJ60QDk.js';
 const translations = {
     en: {
@@ -25,7 +25,7 @@ const translations = {
     },
 };
-const mapControlsCss = "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\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\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}\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-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  background-color: var(--_dso-button-primary-background-color, #39870c);\n  border-color: var(--_dso-button-primary-border-color, #39870c);\n  color: var(--_dso-button-primary-color, #fff);\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\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}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: var(--_dso-button-primary-hover-background-color, #275937);\n  border-color: var(--_dso-button-primary-hover-border-color, #275937);\n  color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: var(--_dso-button-primary-active-background-color, #173521);\n  border-color: var(--_dso-button-primary-active-border-color, #173521);\n  color: var(--_dso-button-primary-active-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: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-extra-small dso-icon,\na.dso-primary.dso-extra-small svg.di, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,\nbutton.dso-primary.dso-extra-small dso-icon,\nbutton.dso-primary.dso-extra-small svg.di,\nbutton.dso-primary.dso-extra-small.extern::after,\nbutton.dso-primary.dso-extra-small.download::after,\nbutton.dso-primary.dso-extra-small.dso-spinner::before,\nlabel.dso-primary.dso-extra-small dso-icon,\nlabel.dso-primary.dso-extra-small svg.di,\nlabel.dso-primary.dso-extra-small.extern::after,\nlabel.dso-primary.dso-extra-small.download::after,\nlabel.dso-primary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-primary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-primary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-primary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-primary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\na.dso-primary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\na.dso-primary span:not(.sr-only) + svg.di,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + svg.di,\nlabel.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\na.dso-primary svg.di + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary svg.di + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary svg.di + span:not(.sr-only) {\n  margin-inline-start: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./di.svg#download-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./di.svg#external-link-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.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}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.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}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.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}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.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}\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: 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}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-extra-small dso-icon,\na.dso-secondary.dso-extra-small svg.di, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,\nbutton.dso-secondary.dso-extra-small dso-icon,\nbutton.dso-secondary.dso-extra-small svg.di,\nbutton.dso-secondary.dso-extra-small.extern::after,\nbutton.dso-secondary.dso-extra-small.download::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner::before,\nlabel.dso-secondary.dso-extra-small dso-icon,\nlabel.dso-secondary.dso-extra-small svg.di,\nlabel.dso-secondary.dso-extra-small.extern::after,\nlabel.dso-secondary.dso-extra-small.download::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\na.dso-secondary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\na.dso-secondary span:not(.sr-only) + svg.di,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di,\nlabel.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\na.dso-secondary svg.di + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#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: var(--_dso-di-background-image, url(\"./di.svg#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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: 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  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#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: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#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: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\"));\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: 2px;\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n  outline: 0;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map:hover,\nbutton.dso-map:hover,\nlabel.dso-map: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}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map: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}\na.dso-map[disabled], a.dso-map[disabled]:hover,\nbutton.dso-map[disabled],\nbutton.dso-map[disabled]:hover,\nlabel.dso-map[disabled],\nlabel.dso-map[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}\na.dso-map.dso-small,\nbutton.dso-map.dso-small,\nlabel.dso-map.dso-small {\n  line-height: 1rem;\n}\na.dso-map.dso-small dso-icon,\na.dso-map.dso-small svg.di, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,\nbutton.dso-map.dso-small dso-icon,\nbutton.dso-map.dso-small svg.di,\nbutton.dso-map.dso-small.extern::after,\nbutton.dso-map.dso-small.download::after,\nbutton.dso-map.dso-small.dso-spinner::before,\nlabel.dso-map.dso-small dso-icon,\nlabel.dso-map.dso-small svg.di,\nlabel.dso-map.dso-small.extern::after,\nlabel.dso-map.dso-small.download::after,\nlabel.dso-map.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-map.dso-small.dso-spinner-left::before,\nbutton.dso-map.dso-small.dso-spinner-left::before,\nlabel.dso-map.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-small.dso-spinner-right::after,\nbutton.dso-map.dso-small.dso-spinner-right::after,\nlabel.dso-map.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-map.dso-extra-small dso-icon,\na.dso-map.dso-extra-small svg.di, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,\nbutton.dso-map.dso-extra-small dso-icon,\nbutton.dso-map.dso-extra-small svg.di,\nbutton.dso-map.dso-extra-small.extern::after,\nbutton.dso-map.dso-extra-small.download::after,\nbutton.dso-map.dso-extra-small.dso-spinner::before,\nlabel.dso-map.dso-extra-small dso-icon,\nlabel.dso-map.dso-extra-small svg.di,\nlabel.dso-map.dso-extra-small.extern::after,\nlabel.dso-map.dso-extra-small.download::after,\nlabel.dso-map.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-map.dso-extra-small.dso-spinner-left::before,\nbutton.dso-map.dso-extra-small.dso-spinner-left::before,\nlabel.dso-map.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small.dso-spinner-right::after,\nbutton.dso-map.dso-extra-small.dso-spinner-right::after,\nlabel.dso-map.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-map dso-icon:has(+ span:not(.sr-only)),\na.dso-map svg.di:has(+ span:not(.sr-only)),\nbutton.dso-map dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-map svg.di:has(+ span:not(.sr-only)),\nlabel.dso-map dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-map svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-map span:not(.sr-only) + dso-icon,\na.dso-map span:not(.sr-only) + svg.di,\nbutton.dso-map span:not(.sr-only) + dso-icon,\nbutton.dso-map span:not(.sr-only) + svg.di,\nlabel.dso-map span:not(.sr-only) + dso-icon,\nlabel.dso-map span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-map dso-icon + span:not(.sr-only),\na.dso-map svg.di + span:not(.sr-only),\nbutton.dso-map dso-icon + span:not(.sr-only),\nbutton.dso-map svg.di + span:not(.sr-only),\nlabel.dso-map dso-icon + span:not(.sr-only),\nlabel.dso-map svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],\nbutton.dso-map.dso-spinner-left[disabled],\nbutton.dso-map.dso-spinner-right[disabled],\nlabel.dso-map.dso-spinner-left[disabled],\nlabel.dso-map.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-map.dso-spinner-left::before,\nbutton.dso-map.dso-spinner-left::before,\nlabel.dso-map.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}\na.dso-map.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-map.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}\na.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-spinner-right::after,\nbutton.dso-map.dso-spinner-right::after,\nlabel.dso-map.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}\na.dso-map.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-map.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}\na.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  border: 0;\n  font-weight: 600;\n  margin-inline-end: 16px;\n  padding-block: 8px;\n  padding-inline: 16px;\n  white-space: nowrap;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: -1px;\n}\na.dso-map:has(span.sr-only):has(dso-icon, svg.di),\nbutton.dso-map:has(span.sr-only):has(dso-icon, svg.di),\nlabel.dso-map:has(span.sr-only):has(dso-icon, svg.di) {\n  padding: 8px;\n  min-inline-size: auto;\n  block-size: 40px;\n  inline-size: 40px;\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: #275937;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\n:host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  inset-block-end: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 100%;\n  transition: transform 300ms ease;\n  inline-size: 300px;\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:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  inset-block-start: 16px;\n}\n\n.toggle-visibility-button {\n  position: absolute;\n  inset-inline-end: calc(100% + 56px);\n  inset-block-start: 16px;\n}\n\n.zoom-buttons {\n  position: absolute;\n  inset-inline-end: calc(100% + 16px);\n  inset-block-start: 16px;\n}\n\n.close-button {\n  padding: 0;\n  position: absolute;\n  inset-inline-end: 16px;\n  inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  block-size: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-block-end: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  button.toggle-visibility-button {\n    block-size: 40px;\n    margin-inline-end: 0;\n    min-inline-size: auto;\n    inset-inline-end: calc(100% + 16px);\n    inline-size: 40px;\n  }\n  button.toggle-visibility-button dso-icon {\n    margin-inline-end: 0;\n  }\n  button.toggle-visibility-button span {\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  .zoom-buttons {\n    inset-block-start: 72px;\n  }\n}";
+const mapControlsCss = "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\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\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}\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-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  background-color: var(--_dso-button-primary-background-color, #39870c);\n  border-color: var(--_dso-button-primary-border-color, #39870c);\n  color: var(--_dso-button-primary-color, #fff);\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\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}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: var(--_dso-button-primary-hover-background-color, #275937);\n  border-color: var(--_dso-button-primary-hover-border-color, #275937);\n  color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: var(--_dso-button-primary-active-background-color, #173521);\n  border-color: var(--_dso-button-primary-active-border-color, #173521);\n  color: var(--_dso-button-primary-active-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: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-extra-small dso-icon, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,\nbutton.dso-primary.dso-extra-small dso-icon,\nbutton.dso-primary.dso-extra-small.extern::after,\nbutton.dso-primary.dso-extra-small.download::after,\nbutton.dso-primary.dso-extra-small.dso-spinner::before,\nlabel.dso-primary.dso-extra-small dso-icon,\nlabel.dso-primary.dso-extra-small.extern::after,\nlabel.dso-primary.dso-extra-small.download::after,\nlabel.dso-primary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-primary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-primary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-primary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-primary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only) {\n  margin-inline-start: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./di.svg#download-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./di.svg#external-link-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.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}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.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}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.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}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.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}\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: 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}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-extra-small dso-icon, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,\nbutton.dso-secondary.dso-extra-small dso-icon,\nbutton.dso-secondary.dso-extra-small.extern::after,\nbutton.dso-secondary.dso-extra-small.download::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner::before,\nlabel.dso-secondary.dso-extra-small dso-icon,\nlabel.dso-secondary.dso-extra-small.extern::after,\nlabel.dso-secondary.dso-extra-small.download::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only) {\n  margin-inline-start: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 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  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#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: var(--_dso-di-background-image, url(\"./di.svg#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-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\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-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\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.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 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  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\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 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 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 span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\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  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#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: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#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: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\"));\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: 2px;\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n  outline: 0;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\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}\na.dso-map:hover,\nbutton.dso-map:hover,\nlabel.dso-map: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}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map: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}\na.dso-map[disabled], a.dso-map[disabled]:hover,\nbutton.dso-map[disabled],\nbutton.dso-map[disabled]:hover,\nlabel.dso-map[disabled],\nlabel.dso-map[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}\na.dso-map.dso-small,\nbutton.dso-map.dso-small,\nlabel.dso-map.dso-small {\n  line-height: 1rem;\n}\na.dso-map.dso-small dso-icon, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,\nbutton.dso-map.dso-small dso-icon,\nbutton.dso-map.dso-small.extern::after,\nbutton.dso-map.dso-small.download::after,\nbutton.dso-map.dso-small.dso-spinner::before,\nlabel.dso-map.dso-small dso-icon,\nlabel.dso-map.dso-small.extern::after,\nlabel.dso-map.dso-small.download::after,\nlabel.dso-map.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-map.dso-small.dso-spinner-left::before,\nbutton.dso-map.dso-small.dso-spinner-left::before,\nlabel.dso-map.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-small.dso-spinner-right::after,\nbutton.dso-map.dso-small.dso-spinner-right::after,\nlabel.dso-map.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n  line-height: 1rem;\n}\na.dso-map.dso-extra-small dso-icon, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,\nbutton.dso-map.dso-extra-small dso-icon,\nbutton.dso-map.dso-extra-small.extern::after,\nbutton.dso-map.dso-extra-small.download::after,\nbutton.dso-map.dso-extra-small.dso-spinner::before,\nlabel.dso-map.dso-extra-small dso-icon,\nlabel.dso-map.dso-extra-small.extern::after,\nlabel.dso-map.dso-extra-small.download::after,\nlabel.dso-map.dso-extra-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-map.dso-extra-small.dso-spinner-left::before,\nbutton.dso-map.dso-extra-small.dso-spinner-left::before,\nlabel.dso-map.dso-extra-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small.dso-spinner-right::after,\nbutton.dso-map.dso-extra-small.dso-spinner-right::after,\nlabel.dso-map.dso-extra-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n  padding-block: 9px;\n}\na.dso-map dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-map dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-map dso-icon:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-map span:not(.sr-only) + dso-icon,\nbutton.dso-map span:not(.sr-only) + dso-icon,\nlabel.dso-map span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-map dso-icon + span:not(.sr-only),\nbutton.dso-map dso-icon + span:not(.sr-only),\nlabel.dso-map dso-icon + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],\nbutton.dso-map.dso-spinner-left[disabled],\nbutton.dso-map.dso-spinner-right[disabled],\nlabel.dso-map.dso-spinner-left[disabled],\nlabel.dso-map.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-map.dso-spinner-left::before,\nbutton.dso-map.dso-spinner-left::before,\nlabel.dso-map.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}\na.dso-map.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-map.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}\na.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map.dso-spinner-right::after,\nbutton.dso-map.dso-spinner-right::after,\nlabel.dso-map.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}\na.dso-map.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-map.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}\na.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  border: 0;\n  font-weight: 600;\n  margin-inline-end: 16px;\n  padding-block: 8px;\n  padding-inline: 16px;\n  white-space: nowrap;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n  outline-offset: -1px;\n}\na.dso-map:has(span.sr-only):has(dso-icon),\nbutton.dso-map:has(span.sr-only):has(dso-icon),\nlabel.dso-map:has(span.sr-only):has(dso-icon) {\n  padding: 8px;\n  min-inline-size: auto;\n  block-size: 40px;\n  inline-size: 40px;\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: #275937;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\n:host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  inset-block-end: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 100%;\n  transition: transform 300ms ease;\n  inline-size: 300px;\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:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  inset-block-start: 16px;\n}\n\n.toggle-visibility-button {\n  position: absolute;\n  inset-inline-end: calc(100% + 56px);\n  inset-block-start: 16px;\n}\n\n.zoom-buttons {\n  position: absolute;\n  inset-inline-end: calc(100% + 16px);\n  inset-block-start: 16px;\n}\n\n.close-button {\n  padding: 0;\n  position: absolute;\n  inset-inline-end: 16px;\n  inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  block-size: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-block-end: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  button.toggle-visibility-button {\n    block-size: 40px;\n    margin-inline-end: 0;\n    min-inline-size: auto;\n    inset-inline-end: calc(100% + 16px);\n    inline-size: 40px;\n  }\n  button.toggle-visibility-button dso-icon {\n    margin-inline-end: 0;\n  }\n  button.toggle-visibility-button span {\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  .zoom-buttons {\n    inset-block-start: 72px;\n  }\n}";
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
     if (kind === "a" && !f)
@@ -90,7 +90,7 @@ const MapControls = /*@__PURE__*/ proxyCustomElement(class MapControls extends H
         });
     }
     render() {
-        return (h(Fragment, { key: '334e21a06cd9395ea18d9f9291a770e386e61e92' }, h("button", { key: '2e0f8c012208eee3b4df9fc59e962520028b83f3', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '6cf603e9cdf91ce923825814e9d0d5f41ebde4d6', icon: "layers" }), h("span", { key: '0a508c91e88229a2c8651a70d10511c8cd8e3633' }, this.text("layersButton"))), h("dso-button-group", { key: 'b24df1c2c705d7de19dc500d362dec5adf574650', class: "zoom-buttons", direction: "column" }, h("button", { key: 'f515d8f72d45f3ab4e2c2a8fbbe7de660c5a3deb', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '0fa343ea278d9f3167c9eb476bd659caeeb3a620', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: 'bc20fa2da9a14db718cfb9550f6b50d74b206504', icon: "plus" })), h("button", { key: 'ca3ff112cee1e17a3a07bae56505282dcad44d6d', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: 'fbfc3ef181440cf6a860db6f983e457a8c6885c8', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'a73eb69e645f6a2301eff2c01d1302061ca81459', icon: "minus" }))), h("section", { key: '7829c0a7c59f11662fe91ecfa431aa10fc979505', hidden: this.hideContent }, h("header", { key: '800a300f7cf202ac459321b5fece0d5325f13099' }, h("h2", { key: '73b118cfe038cefe1e48162134afc42094e8459e' }, this.text("title")), h("button", { key: '407675763c3664d2b1a039a893e16ff8a076f213', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: '97241757a5f49532a7aa0f9f6f0a330757e7150e', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '5c6481d413d09d00d7768c882fb43361a59dd223', icon: "times" }))), h("dso-scrollable", { key: '595348d36182d703c4b29f33aa50e3f17110201d' }, h("div", { key: 'e0063cf6deeb55733e4d6f37d6f15e4b8774fc06', class: "content" }, h("slot", { key: '16d4d2a94dfd143d931166b275cabf9ebab6bf5d' }))))));
+        return (h(Fragment, { key: 'e960948aba33141aad982258d142ab200c61d66c' }, h("button", { key: 'b0ff86966bc14e54d7399ff235c4d74cceb61161', type: "button", id: "toggle-visibility-button", class: "dso-map toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '5e41e9d670b0cb679a5062e6301ddc5dfe378d5e', icon: "layers" }), h("span", { key: 'f21ad109b3468aa420e57215ea4e3c3ea7152736' }, this.text("layersButton"))), h("dso-button-group", { key: '5b04b3c7cf189a33e809dac2269f08bed058352d', class: "zoom-buttons", direction: "column" }, h("button", { key: '751a6595a606fb93c84132a7a3e322a230defaa6', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'e796d0c8635572e19953a61d78eda7cb450da8d3', class: "sr-only" }, this.text("zoomIn")), h("dso-icon", { key: '104303c64d506ab9751c04637808698c1d4777a4', icon: "plus" })), h("button", { key: '6c5366fa08fc528f7c8ddbed29df8d7b9d2857fe', type: "button", class: "dso-map", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '4eafea8c21299aa768cd017e9f3966d73843ee20', class: "sr-only" }, this.text("zoomOut")), h("dso-icon", { key: 'd5a864620b9c7951deba141f53fe2aa8d8ec12d7', icon: "minus" }))), h("section", { key: 'd83ac96a4d02b481be81f66c944b14e916edb9a9', hidden: this.hideContent }, h("header", { key: 'bc146be5dac6ed5351a6075e2d58d6d8064dac4e' }, h("h2", { key: '61ec5e1e3d8654ac4e2d1b78234e7f0d08c09f55' }, this.text("title")), h("button", { key: 'cd1961589defe1db12231cdd9f4689886e5e7fb7', type: "button", class: "dso-tertiary close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'c0f8917e51dbf6d9744f9b99ad64b6bc5f7f4bfb', class: "sr-only" }, this.text("hidePanel", { title: this.text("title") })), h("dso-icon", { key: '8f5b5bafdf07930e7b002bbd034fe9696b79b0f5', icon: "times" }))), h("dso-scrollable", { key: '8edbdadee289e65c36566ce2663063ec8b672c90' }, h("div", { key: '2c6c8df7ab721e8f5c868aed5a2303d3a8aa4b69', class: "content" }, h("slot", { key: 'ca75911b586987d5e35f26483d7f6c47c1dafc89' }))))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/bundle/dso-map-controls.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-map-controls.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/map-controls/map-controls.i18n.ts","src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-map-controls\": {\r\n title: \"Map layers\",\r\n layersButton: \"Map layers\",\r\n zoomIn: \"Zoom in\",\r\n zoomOut: \"Zoom out\",\r\n hidePanel: \"Hide panel {{title}}\",\r\n },\r\n },\r\n nl: {\r\n \"dso-map-controls\": {\r\n title: \"Kaartlagen\",\r\n layersButton: \"Kaartlagen\",\r\n zoomIn: \"Zoom in\",\r\n zoomOut: \"Zoom uit\",\r\n hidePanel: \"Verberg paneel {{title}}\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\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/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/button/button.variables\" as button-variables;\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n inset-block-end: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inset-inline-start: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: #2315 this will be redundant when the icon only buttons are replaced with Icon Button\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.toggle-visibility-button {\r\n position: absolute;\r\n inset-inline-end: calc(100% + #{core-map-controls-variables.$controls-margin + button-variables.$map-size});\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n position: absolute;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.close-button {\r\n padding: 0;\r\n position: absolute;\r\n inset-inline-end: core-map-controls-variables.$controls-margin;\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n button.toggle-visibility-button {\r\n block-size: units.$u5;\r\n margin-inline-end: 0;\r\n min-inline-size: auto;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inline-size: units.$u5;\r\n\r\n dso-icon {\r\n margin-inline-end: 0;\r\n }\r\n\r\n span {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u9;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoMapControlsElement;\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"dso-map toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>{this.text(\"layersButton\")}</span>\r\n </button>\r\n <dso-button-group class=\"zoom-buttons\" direction=\"column\">\r\n <button\r\n type=\"button\"\r\n class=\"dso-map\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span class=\"sr-only\">{this.text(\"zoomIn\")}</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"dso-map\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span class=\"sr-only\">{this.text(\"zoomOut\")}</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </dso-button-group>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.text(\"title\")}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span class=\"sr-only\">{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-map-controls.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/map-controls/map-controls.i18n.ts","src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-map-controls\": {\r\n title: \"Map layers\",\r\n layersButton: \"Map layers\",\r\n zoomIn: \"Zoom in\",\r\n zoomOut: \"Zoom out\",\r\n hidePanel: \"Hide panel {{title}}\",\r\n },\r\n },\r\n nl: {\r\n \"dso-map-controls\": {\r\n title: \"Kaartlagen\",\r\n layersButton: \"Kaartlagen\",\r\n zoomIn: \"Zoom in\",\r\n zoomOut: \"Zoom uit\",\r\n hidePanel: \"Verberg paneel {{title}}\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\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/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/button/button.variables\" as button-variables;\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n background-color: colors.$wit;\r\n border: 1px solid colors.$grijs-20;\r\n inset-block-end: 0;\r\n display: block;\r\n font-family: typography.$font-family-base;\r\n position: absolute;\r\n inset-block-start: 0;\r\n inset-inline-start: 100%;\r\n transition: transform core-map-controls-variables.$transition-duration ease;\r\n inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: #2315 this will be redundant when the icon only buttons are replaced with Icon Button\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n:host([open]) {\r\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n transform: translateX(-100%);\r\n\r\n .toggle-visibility-button {\r\n display: none;\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u2;\r\n }\r\n}\r\n\r\n.toggle-visibility-button {\r\n position: absolute;\r\n inset-inline-end: calc(100% + #{core-map-controls-variables.$controls-margin + button-variables.$map-size});\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n position: absolute;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.close-button {\r\n padding: 0;\r\n position: absolute;\r\n inset-inline-end: core-map-controls-variables.$controls-margin;\r\n inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n display: flex;\r\n flex-direction: column;\r\n block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n padding: units.$u2;\r\n}\r\n\r\nheader {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n flex-grow: 0;\r\n position: relative;\r\n\r\n h2 {\r\n color: colors.$bosgroen;\r\n font-family: typography.$headings-font-family;\r\n line-height: 1;\r\n margin: 0;\r\n }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n button.toggle-visibility-button {\r\n block-size: units.$u5;\r\n margin-inline-end: 0;\r\n min-inline-size: auto;\r\n inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n inline-size: units.$u5;\r\n\r\n dso-icon {\r\n margin-inline-end: 0;\r\n }\r\n\r\n span {\r\n @include utilities.sr-only();\r\n }\r\n }\r\n\r\n .zoom-buttons {\r\n inset-block-start: units.$u9;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n h,\r\n} from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./map-controls.i18n\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss and map-controls.cy.ts\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n tag: \"dso-map-controls\",\r\n styleUrl: \"./map-controls.scss\",\r\n shadow: true,\r\n})\r\nexport class MapControls implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoMapControlsElement;\r\n\r\n /*\r\n To show and hide the Map Controls.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n open = false;\r\n\r\n /\r\n To disable the zoom controls:\r\n \r\n * `in`: Disable zoom in button.\r\n * * `out`: Disable zoom out button.\r\n * * `both`: Disable zoom in and zoom out.\r\n /\r\n @Prop()\r\n disableZoom?: \"in\" \| \"out\" \| \"both\";\r\n\r\n /\r\n Emitted when the user activates the zoom in button.\r\n /\r\n @Event()\r\n dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n Emitted when the user activates the zoom out button.\r\n /\r\n @Event()\r\n dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n /\r\n emits when the panel opens or closes.\r\n \r\n - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n /\r\n @Event()\r\n dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n @State()\r\n hideContent = !this.open;\r\n\r\n @Watch(\"open\")\r\n watchOpen(open: boolean) {\r\n if (open) {\r\n this.hideContent = false;\r\n\r\n setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n } else {\r\n setTimeout(() => {\r\n this.hideContent = true;\r\n\r\n this.#toggleButtonElement?.focus();\r\n }, transitionDuration);\r\n }\r\n }\r\n\r\n /\r\n Emitted when the visibility is toggled.\r\n \r\n Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n * @param e\r\n */\r\n @Method()\r\n async toggleVisibility(e: MouseEvent \| KeyboardEvent) {\r\n this.open = !this.open;\r\n\r\n this.dsoToggle.emit({\r\n originalEvent: e,\r\n open: this.open,\r\n });\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n #closeButtonElement: HTMLButtonElement \| undefined;\r\n #toggleButtonElement: HTMLButtonElement \| undefined;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <button\r\n type=\"button\"\r\n id=\"toggle-visibility-button\"\r\n class=\"dso-map toggle-visibility-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#toggleButtonElement = element)}\r\n >\r\n <dso-icon icon=\"layers\"></dso-icon>\r\n <span>{this.text(\"layersButton\")}</span>\r\n </button>\r\n <dso-button-group class=\"zoom-buttons\" direction=\"column\">\r\n <button\r\n type=\"button\"\r\n class=\"dso-map\"\r\n onClick={(e) => this.dsoZoomIn.emit(e)}\r\n disabled={this.disableZoom === \"in\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span class=\"sr-only\">{this.text(\"zoomIn\")}</span>\r\n <dso-icon icon=\"plus\"></dso-icon>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"dso-map\"\r\n onClick={(e) => this.dsoZoomOut.emit(e)}\r\n disabled={this.disableZoom === \"out\" \|\| this.disableZoom === \"both\"}\r\n >\r\n <span class=\"sr-only\">{this.text(\"zoomOut\")}</span>\r\n <dso-icon icon=\"minus\"></dso-icon>\r\n </button>\r\n </dso-button-group>\r\n <section hidden={this.hideContent}>\r\n <header>\r\n <h2>{this.text(\"title\")}</h2>\r\n <button\r\n type=\"button\"\r\n class=\"dso-tertiary close-button\"\r\n onClick={(e) => this.toggleVisibility(e)}\r\n ref={(element) => (this.#closeButtonElement = element)}\r\n >\r\n <span class=\"sr-only\">{this.text(\"hidePanel\", { title: this.text(\"title\") })}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n </header>\r\n <dso-scrollable>\r\n <div class=\"content\">\r\n <slot></slot>\r\n </div>\r\n </dso-scrollable>\r\n </section>\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-map-overlays.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$6 } from './p-Dwv_hVo9.js';
-import { d as defineCustomElement$5 } from './p--HbwCvQM.js';
-import { d as defineCustomElement$4 } from './p-CF3bHKY3.js';
-import { d as defineCustomElement$3 } from './p-DqxeHQ0G.js';
-import { d as defineCustomElement$2 } from './p-CaZRQPYD.js';
+import { d as defineCustomElement$6 } from './p-DTle6By6.js';
+import { d as defineCustomElement$5 } from './p-BJ43Q58h.js';
+import { d as defineCustomElement$4 } from './p-fTG2YwZq.js';
+import { d as defineCustomElement$3 } from './p-DpzeiE9g.js';
+import { d as defineCustomElement$2 } from './p-ZFqVNkha.js';
 import { v as v4 } from './p-BF0_OXTe.js';
 const translations = {
@@ -52,7 +52,7 @@ const MapOverlays = /*@__PURE__*/ proxyCustomElement(class MapOverlays extends H
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'c3b999bcfd600744f885128418dcb69aa9a18133', class: "form-group dso-checkboxes" }, h("legend", { key: 'bf13c49ba66ed5a8f0c8ca8ce3b2f4e41de64032', class: "sr-only" }, "Kaartlagen"), h("div", { key: '639e81cdc4f91ee53da11c8aede39fd5c85fc6e7', class: "dso-label-container" }, h("span", { key: '94172cf1232312e5d39e09f99390119f189109ce', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'bb520e45e6a9c58c5bf7013fdbcf5ed39a635d45', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'd60d04424ff4824650822bca365b08d9e09343c4', class: "form-group dso-checkboxes" }, h("legend", { key: 'c7a9f921310bd6d5a6a2227ccd5f5aa14951553c', class: "sr-only" }, "Kaartlagen"), h("div", { key: 'ac37cdf13bab527ae0541ecdee5697e3c598b017', class: "dso-label-container" }, h("span", { key: '8747d30b9a1e6909e5fc2fb1318098517d2afe99', class: "control-label", "aria-hidden": "true" }, this.text("title"))), h("div", { key: 'f5dc6ccfc6c709736de801bca4ff30c2b4f8ae5d', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
     get host() { return this; }
     static get style() { return mapOverlaysCss; }

package/dist/bundle/dso-mark-bar.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
-import { d as defineCustomElement$3 } from './p-Dwv_hVo9.js';
-import { d as defineCustomElement$2 } from './p--HbwCvQM.js';
+import { d as defineCustomElement$3 } from './p-DTle6By6.js';
+import { d as defineCustomElement$2 } from './p-BJ43Q58h.js';
 const markBarCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input dso-icon-button{position:absolute;inset-inline-end:8px;inset-block-start:8px}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container dso-icon-button{--dso-icon-button-tertiary-border:0;cursor:pointer}.dso-button-container dso-icon-button:disabled{color:#ccc;cursor:default}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";
@@ -54,7 +54,7 @@ const MarkBar = /*@__PURE__*/ proxyCustomElement(class MarkBar extends H {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '3f2390f17346e0f6e8f5922c8205b7d0dbb68f89', class: "dso-mark-bar" }, h("div", { key: '19da44807b5d7be12bf74f601412e0228ada4a49', class: "dso-mark-bar-input" }, h("input", { key: 'fd26a40b6539bc0ac7638e587776819d9a8e2831', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '6b6599311c0068af1470cf2f04defc603740064f', htmlFor: "search-input" }, h("dso-icon", { key: '61e5cf281785c47181144e6a06fbc4f92f1f4ae9', class: "dso-search-icon", icon: "search" }), h("span", { key: '7a7b144411738a1d804e7c75256adccbf922b864', class: "label-text" }, this.label)), h("dso-icon-button", { key: 'bb929394de046b8a3acaff79bda1a51a0768870a', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '32c06190f96d124d6f2d7ac6fe207aedd4af9638', class: "dso-button-container" }, h("span", { key: '988bd229b69150fcc6107f6e291a00c76b04e8b5', class: "divider" }), h("dso-icon-button", { key: '40ae708d4a8676e617d728d3d326d50767394046', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '973aa6d3df09e3809bbcd4c2b96dee8144cae2d6' }, current, "/", totalCount), h("dso-icon-button", { key: 'a26fc60b7e05fe6725f444476afe85345c9f13b8', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
+        return (h("div", { key: 'e54c7da22d3337f17613e5e719085d3bf5316082', class: "dso-mark-bar" }, h("div", { key: '307e0f902e416357f1c07fca7a821b81ff85d134', class: "dso-mark-bar-input" }, h("input", { key: '4a14603cc6a6906d1513a92bf1fd6d3959cc3f35', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '0d5bba8eebba90a9ace3734e95a7c11095c538d9', htmlFor: "search-input" }, h("dso-icon", { key: '4d4148c8c81e0b498a392aacc8d73abd51fa0b80', class: "dso-search-icon", icon: "search" }), h("span", { key: 'f66ecd32f667916908f46bdeaa614d96f49cc381', class: "label-text" }, this.label)), h("dso-icon-button", { key: '6dcece65cbbb3a987209c5249a92e2ab5f7bd43e', icon: "times", variant: "tertiary", label: "Zoekopdracht legen", onDsoClick: (e) => this.handleClear(e.detail.originalEvent) })), h("div", { key: '55e6e5962851773657ffbc632f79ec9184002db3', class: "dso-button-container" }, h("span", { key: '723965736ff9af612effa22520936f0007aa10cb', class: "divider" }), h("dso-icon-button", { key: 'c821f6334ed0d7b6425f843a93bed17ce885b3ec', icon: "chevron-up", variant: "tertiary", label: "Vorig zoekresultaat", onDsoClick: (e) => this.handlePrevious(e.detail.originalEvent), disabled: current <= 1 }), h("span", { key: '113ce92b9501ec203c1101a11f8cdc82c11dc4a0' }, current, "/", totalCount), h("dso-icon-button", { key: 'b08fb394190aae89f4a1e2390f1e318d5d42cf3b', icon: "chevron-down", variant: "tertiary", label: "Volgend zoekresultaat", onDsoClick: (e) => this.handleNext(e.detail.originalEvent), disabled: current >= totalCount }))));
     }
     static get style() { return markBarCss; }
 }, [257, "dso-mark-bar", {

package/dist/bundle/dso-modal.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
 import { g as getActiveElement } from './p-CodDyi2J.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$4 } from './p-Dwv_hVo9.js';
-import { d as defineCustomElement$3 } from './p--HbwCvQM.js';
-import { d as defineCustomElement$2 } from './p-DZgHugpQ.js';
+import { d as defineCustomElement$4 } from './p-DTle6By6.js';
+import { d as defineCustomElement$3 } from './p-BJ43Q58h.js';
+import { d as defineCustomElement$2 } from './p-BwJ60QDk.js';
 import { v as v4 } from './p-BF0_OXTe.js';
 const translations = {
@@ -89,7 +89,7 @@ const Modal = /*@__PURE__*/ proxyCustomElement(class Modal extends H {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '0a59daede2da8cea1862697b21a2c0cefe2ad2ba', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '1aa3945eefc77e466cf5f5a8176441f3341227c9', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '8b4f73119c03e79c411cf2be522a22347d5734ba' }, h("div", { key: 'eaf1dd3795fd7f29f784b19028a29f4adef739b1', class: "dso-body", tabIndex: 0 }, h("slot", { key: '6941bcfc9c5c38fbc1b4a7e54f5f6abf9b83938c', name: "body" }))), this.hasFooter && (h("div", { key: 'f1367f0059cde476a93126459a97e79be952ae4e', class: "dso-footer" }, h("slot", { key: '0ac156c12718075bebb54010cc360c118faa7bfd', name: "footer" }))))));
+        return (h("dialog", { key: '3132ce793e30baf922eaab1bda9c42dbcf8681c0', class: "dso-modal", role: (_a = this.dialogRole) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onClick: (e) => this.handleDialogClick(e), onKeyDown: (e) => this.blockEscapeKey(e) }, h("div", { key: '82d84e9c4655df5d8e193da4d9f58bd8613dba2a', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.closable && (h("dso-icon-button", { id: "close-modal", icon: "times", variant: "tertiary", label: this.text("close"), onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) })))) : (h("span", { class: "sr-only", id: this.ariaId }, this.text("dialog"))), h("dso-scrollable", { key: '4d96da22636c64a50b80dd391cbc8be460df5c5c' }, h("div", { key: '85b9efb3648158e13ed13ffab451433b247d3a91', class: "dso-body", tabIndex: 0 }, h("slot", { key: '467e8fed6481c2575acdac13bcd353cb13271533', name: "body" }))), this.hasFooter && (h("div", { key: '5cbc2000364edbab958f2b1299ea20dd5d734dfe', class: "dso-footer" }, h("slot", { key: '7422926e5e4422044db2606cd60bb20af23b0a89', name: "footer" }))))));
     }
     get host() { return this; }
     static get style() { return modalCss; }

package/dist/bundle/dso-onboarding-tip.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-Dm38fPV4.js';
-import { p as positionTooltip, d as defineCustomElement$2 } from './p--HbwCvQM.js';
-import { d as defineCustomElement$3 } from './p-Dwv_hVo9.js';
+import { p as positionTooltip } from './p-Dd5JHsV3.js';
+import { d as defineCustomElement$3 } from './p-DTle6By6.js';
+import { d as defineCustomElement$2 } from './p-BJ43Q58h.js';
-const onboardingTipCss = "*,*::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}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{position:absolute;inset-block-start:4px;inset-inline-end:4px}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{--_dso-icon-button-tertiary-color:#fff;background-color:#2b5780;border-color:#2b5780;color:#fff}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}";
+const onboardingTipCss = "*,*::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}::slotted([slot=heading]){display:flex !important;align-items:center !important;margin-block-end:0 !important;margin-block-start:0 !important;color:#fff !important;line-height:1.375 !important}:host{--_dso-button-primary-background-color:#fff;--_dso-button-primary-border-color:#fff;--_dso-button-primary-color:#000;--_dso-button-primary-hover-background-color:#ccc;--_dso-button-primary-hover-border-color:#ccc;--_dso-button-primary-hover-color:#000;--_dso-button-primary-active-background-color:#999;--_dso-button-primary-active-border-color:#999;--_dso-button-primary-active-color:#000;--_dso-button-primary-disabled-background-color:#fff;--_dso-button-primary-disabled-border-color:#fff;--_dso-button-primary-disabled-color:#b2b2b2;--_dso-button-secondary-background-color:#fff;--_dso-button-secondary-border-color:#fff;--_dso-button-secondary-color:#000;--_dso-button-secondary-hover-background-color:#ccc;--_dso-button-secondary-hover-border-color:#ccc;--_dso-button-secondary-hover-color:#000;--_dso-button-secondary-active-background-color:#999;--_dso-button-secondary-active-border-color:#999;--_dso-button-secondary-active-color:#000;--_dso-button-secondary-disabled-background-color:#fff;--_dso-button-secondary-disabled-border-color:#fff;--_dso-button-secondary-disabled-color:#b2b2b2;display:block;filter:drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));transition:visibility 400ms, opacity 400ms}:host(:not([ready])){opacity:1;animation:400ms ease-in 1 normal both fadeInOpacity}:host([popover]){margin:0 !important;border:0;padding:0;background-color:transparent;overflow:unset}.onboarding-tip{font-family:Asap, sans-serif;font-style:normal;font-weight:400;line-height:1.5;line-break:auto;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;word-spacing:normal;word-wrap:normal;white-space:normal;font-size:14px;inset-block-start:0;inset-inline-start:0;z-index:410}@media screen and (max-width: 360px){.onboarding-tip{padding-inline-start:8px !important}}.dso-close{position:absolute;inset-block-start:4px;inset-inline-end:4px}.onboarding-tip-inner{--link-color:#fff;--link-hover-color:#b2b2b2;--link-visited-color:#7f7f7f;max-inline-size:min(360px, 100vw - 2 * 8px);max-block-size:calc(100vh - 10px);overflow:auto;padding-block:32px 8px;padding-inline:8px;border-radius:4px;display:block;font-size:1rem;position:relative;z-index:2}.onboarding-tip-inner{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;--_dso-icon-button-tertiary-color:#fff;background-color:#2b5780;color:#fff}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-wit\"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-wit\"))}.onboarding-tip-inner a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-wit\"))}@media screen and (max-width: 991px){.onboarding-tip-inner{max-block-size:unset}}.onboarding-tip-arrow{border-start-start-radius:4px;position:absolute;block-size:20px;inline-size:20px;background:#2b5780;z-index:1;pointer-events:none}.onboarding-tip-content-wrapper{padding-inline:16px;padding-block-end:16px}.onboarding-tip-content-heading{display:flex}.onboarding-tip-content-heading dso-icon{margin-inline-end:8px}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}";
 const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip extends H {
     constructor() {
@@ -15,10 +16,15 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
          */
         this.placement = "right";
         this.ready = false;
+        this.popoverOpen = false;
     }
     componentDidRender() {
-        if (!this.host.matches(":popover-open")) {
+        if (!this.host.isConnected) {
+            return;
+        }
+        if (!this.popoverOpen) {
             this.host.showPopover();
+            this.popoverOpen = true;
         }
         if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof H) {
             this.cleanUp = positionTooltip({
@@ -33,14 +39,15 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
     }
     disconnectedCallback() {
         var _a;
-        if (this.host.matches(":popover-open")) {
+        if (this.popoverOpen) {
             this.host.hidePopover();
+            this.popoverOpen = false;
         }
         (_a = this.cleanUp) === null || _a === void 0 ? void 0 : _a.call(this);
         this.cleanUp = undefined;
     }
     render() {
-        return (h(Host, { key: 'bd723d0214e5604c3f99c7cf5ece0e1cbe6607d3', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '16615b7d71fde79e7f399e3ed98e25d869309fca', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '821435d563c0c65647111b8e78fc4ba977409b96', class: "onboarding-tip-inner" }, h("div", { key: 'f4c3a23d25bd18e1ceee8ae18f7619dc14b9e7b7', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'b83c3a2cd62a9f86efff9653a04b7c3d6db73b69', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '3cf10004da4f636ab8d08a1eb7ec6361fb788e36', icon: "light-bulb" }), h("slot", { key: '912bb0c3e062bdc1c1f72bcf1fd4d0e9b4253b67', name: "heading" }))), h("dso-icon-button", { key: '7f8372c8f6677687f2fb372b4015851b326a030b', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '1b4cd3b10a3d52f60b6592a33c6922d9a2a2b6b1' }))), h("div", { key: '6adcfa3c5ffc54d275fe2d35621f075669ddb254', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
+        return (h(Host, { key: 'a603e7fefe4391ac0b30f05b942ee99baf258db4', popover: "manual", ready: this.ready, onAnimationend: () => (this.ready = true) }, h("div", { key: '8666aef064552437ef484d5ec80cb8d07522bd90', class: "onboarding-tip", role: "tooltip" }, h("div", { key: '48570020dd7d6acb87730ffe208cf1bede7719ca', class: "onboarding-tip-inner" }, h("div", { key: 'cd18645655ee93588daceabf150a73c08370ed0e', class: "onboarding-tip-content-wrapper" }, this.headingSlottedElement !== null && (h("div", { key: 'fbc8b73c9705b49bb1ef04de470509c72a072ba7', class: "onboarding-tip-content-heading" }, h("dso-icon", { key: '3df4a752374281d1eb553dc5fb00920047cb5af0', icon: "light-bulb" }), h("slot", { key: 'f8dc8acb29b2c6b2fc1c26429bd3f11d8689c54a', name: "heading" }))), h("dso-icon-button", { key: '82bdc831b1e3dfa507b65c1a834ca8e70ab34566', class: "dso-close", label: "Sluiten", variant: "tertiary", icon: "times", onDsoClick: (e) => this.dsoClose.emit({ originalEvent: e }) }), h("slot", { key: '97cef8fa0655769837ecdc636b2360bf6facdc7d' }))), h("div", { key: '90a9888aa1aedc4c3c259873c10a5ead5734f5e5', class: "onboarding-tip-arrow", ref: (ref) => (this.tipArrowRef = ref) }))));
     }
     get headingSlottedElement() {
         return this.host.querySelector("[slot='heading']");
@@ -67,7 +74,8 @@ const OnboardingTip = /*@__PURE__*/ proxyCustomElement(class OnboardingTip exten
     static get style() { return onboardingTipCss; }
 }, [257, "dso-onboarding-tip", {
         "placement": [1],
-        "ready": [32]
+        "ready": [32],
+        "popoverOpen": [32]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/bundle/dso-onboarding-tip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-onboarding-tip.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/onboarding-tip/onboarding-tip.scss?tag=dso-onboarding-tip&encapsulation=shadow","src/components/onboarding-tip/onboarding-tip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\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/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"onboarding-tip.variables\" as onboarding-tip-variables;\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::slotted([slot=\"heading\"]) {\r\n display: flex !important;\r\n align-items: center !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n\r\n color: colors.$wit !important;\r\n line-height: 1.375 !important;\r\n}\r\n\r\n:host {\r\n --_dso-button-primary-background-color: #{colors.$wit};\r\n --_dso-button-primary-border-color: #{colors.$wit};\r\n --_dso-button-primary-color: #{colors.$zwart};\r\n --_dso-button-primary-hover-background-color: #{colors.$grijs-20};\r\n --_dso-button-primary-hover-border-color: #{colors.$grijs-20};\r\n --_dso-button-primary-hover-color: #{colors.$zwart};\r\n --_dso-button-primary-active-background-color: #{colors.$grijs-40};\r\n --_dso-button-primary-active-border-color: #{colors.$grijs-40};\r\n --_dso-button-primary-active-color: #{colors.$zwart};\r\n --_dso-button-primary-disabled-background-color: #{colors.$wit};\r\n --_dso-button-primary-disabled-border-color: #{colors.$wit};\r\n --_dso-button-primary-disabled-color: #{colors.$grijs-30};\r\n\r\n --_dso-button-secondary-background-color: #{colors.$wit};\r\n --_dso-button-secondary-border-color: #{colors.$wit};\r\n --_dso-button-secondary-color: #{colors.$zwart};\r\n --_dso-button-secondary-hover-background-color: #{colors.$grijs-20};\r\n --_dso-button-secondary-hover-border-color: #{colors.$grijs-20};\r\n --_dso-button-secondary-hover-color: #{colors.$zwart};\r\n --_dso-button-secondary-active-background-color: #{colors.$grijs-40};\r\n --_dso-button-secondary-active-border-color: #{colors.$grijs-40};\r\n --_dso-button-secondary-active-color: #{colors.$zwart};\r\n --_dso-button-secondary-disabled-background-color: #{colors.$wit};\r\n --_dso-button-secondary-disabled-border-color: #{colors.$wit};\r\n --_dso-button-secondary-disabled-color: #{colors.$grijs-30};\r\n\r\n display: block;\r\n filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));\r\n\r\n // Visibility & opacity are updated using Floating-UI\r\n transition:\r\n visibility onboarding-tip-variables.$transition-time,\r\n opacity onboarding-tip-variables.$transition-time;\r\n}\r\n\r\n// Startup fade-in transition\r\n:host(:not([ready])) {\r\n opacity: 1;\r\n animation: onboarding-tip-variables.$transition-time ease-in 1 normal both fadeInOpacity;\r\n}\r\n\r\n:host([popover]) {\r\n margin: 0 !important;\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n overflow: unset;\r\n}\r\n\r\n.onboarding-tip {\r\n font-family: typography.$font-family-base;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n overflow-wrap: anywhere;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n font-size: typography.$font-size-small;\r\n inset-block-start: 0;\r\n inset-inline-start: 0;\r\n z-index: zindex.$onboarding-tip;\r\n\r\n @media screen and (max-width: onboarding-tip-variables.$max-inline-size) {\r\n padding-inline-start: units.$u1 !important;\r\n }\r\n}\r\n\r\n.dso-close {\r\n position: absolute;\r\n inset-block-start: 4px;\r\n inset-inline-end: 4px;\r\n}\r\n\r\n.onboarding-tip-inner {\r\n --link-color: #{colors.$wit};\r\n --link-hover-color: #{colors.$grijs-30};\r\n --link-visited-color: #{colors.$grijs-50};\r\n\r\n max-inline-size: min(#{onboarding-tip-variables.$max-inline-size}, calc(100vw - 2 * #{units.$u1}));\r\n max-block-size: calc(100vh - 10px); // 10px is the padding given to floating-ui\r\n overflow: auto;\r\n padding-block: onboarding-tip-variables.$padding-block;\r\n padding-inline: onboarding-tip-variables.$padding-inline;\r\n border-radius: onboarding-tip-variables.$border-radius;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n position: relative;\r\n z-index: 2; // z-index higher than the arrow\r\n\r\n @include set-colors.apply(onboarding-tip-variables.$background-color, $icons: false, $links: false);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n max-block-size: unset;\r\n }\r\n}\r\n\r\n.onboarding-tip-arrow {\r\n border-start-start-radius: onboarding-tip-variables.$border-radius;\r\n position: absolute;\r\n block-size: onboarding-tip-variables.$arrow-block-size;\r\n inline-size: onboarding-tip-variables.$arrow-inline-size;\r\n background: onboarding-tip-variables.$background-color;\r\n z-index: 1;\r\n pointer-events: none;\r\n}\r\n\r\n.onboarding-tip-content-wrapper {\r\n padding-inline: units.$u2;\r\n padding-block-end: units.$u2;\r\n}\r\n\r\n.onboarding-tip-content-heading {\r\n display: flex;\r\n\r\n dso-icon {\r\n margin-inline-end: units.$u1;\r\n }\r\n}\r\n\r\n@keyframes fadeInOpacity {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-onboarding-tip\",\r\n styleUrl: \"onboarding-tip.scss\",\r\n shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoOnboardingTipElement;\r\n\r\n /*\r\n Where to place the Onboarding Tip relative to its reference element.\r\n /\r\n @Prop()\r\n placement: TooltipPlacement = \"right\";\r\n\r\n /\r\n Emitted when the user closes the Onboarding Tip.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n @State()\r\n ready = false;\r\n\r\n componentDidRender() {\r\n if (!this.host.matches(\":popover-open\")) {\r\n this.host.showPopover();\r\n }\r\n\r\n if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n this.cleanUp = positionTooltip({\r\n referenceElement: this.referenceElement,\r\n tipRef: this.host,\r\n tipArrowRef: this.tipArrowRef,\r\n placementTip: `${this.placement}-start`,\r\n topPositionSmallViewPort: true,\r\n halfMainAxisOffset: true,\r\n });\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.host.matches(\":popover-open\")) {\r\n this.host.hidePopover();\r\n }\r\n\r\n this.cleanUp?.();\r\n this.cleanUp = undefined;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n <div class=\"onboarding-tip\" role=\"tooltip\">\r\n <div class=\"onboarding-tip-inner\">\r\n <div class=\"onboarding-tip-content-wrapper\">\r\n {this.headingSlottedElement !== null && (\r\n <div class=\"onboarding-tip-content-heading\">\r\n <dso-icon icon=\"light-bulb\"></dso-icon>\r\n <slot name=\"heading\" />\r\n </div>\r\n )}\r\n <dso-icon-button\r\n class=\"dso-close\"\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n />\r\n <slot></slot>\r\n </div>\r\n </div>\r\n <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private tipArrowRef: HTMLDivElement \| undefined;\r\n\r\n private get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n private cleanUp: TooltipClean \| undefined;\r\n\r\n private get referenceElement(): HTMLElement \| undefined {\r\n const id = this.host.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.host.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n return reference;\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-onboarding-tip.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/onboarding-tip/onboarding-tip.scss?tag=dso-onboarding-tip&encapsulation=shadow","src/components/onboarding-tip/onboarding-tip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\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/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n\r\n@use \"onboarding-tip.variables\" as onboarding-tip-variables;\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::slotted([slot=\"heading\"]) {\r\n display: flex !important;\r\n align-items: center !important;\r\n\r\n margin-block-end: 0 !important;\r\n margin-block-start: 0 !important;\r\n\r\n color: colors.$wit !important;\r\n line-height: 1.375 !important;\r\n}\r\n\r\n:host {\r\n --_dso-button-primary-background-color: #{colors.$wit};\r\n --_dso-button-primary-border-color: #{colors.$wit};\r\n --_dso-button-primary-color: #{colors.$zwart};\r\n --_dso-button-primary-hover-background-color: #{colors.$grijs-20};\r\n --_dso-button-primary-hover-border-color: #{colors.$grijs-20};\r\n --_dso-button-primary-hover-color: #{colors.$zwart};\r\n --_dso-button-primary-active-background-color: #{colors.$grijs-40};\r\n --_dso-button-primary-active-border-color: #{colors.$grijs-40};\r\n --_dso-button-primary-active-color: #{colors.$zwart};\r\n --_dso-button-primary-disabled-background-color: #{colors.$wit};\r\n --_dso-button-primary-disabled-border-color: #{colors.$wit};\r\n --_dso-button-primary-disabled-color: #{colors.$grijs-30};\r\n\r\n --_dso-button-secondary-background-color: #{colors.$wit};\r\n --_dso-button-secondary-border-color: #{colors.$wit};\r\n --_dso-button-secondary-color: #{colors.$zwart};\r\n --_dso-button-secondary-hover-background-color: #{colors.$grijs-20};\r\n --_dso-button-secondary-hover-border-color: #{colors.$grijs-20};\r\n --_dso-button-secondary-hover-color: #{colors.$zwart};\r\n --_dso-button-secondary-active-background-color: #{colors.$grijs-40};\r\n --_dso-button-secondary-active-border-color: #{colors.$grijs-40};\r\n --_dso-button-secondary-active-color: #{colors.$zwart};\r\n --_dso-button-secondary-disabled-background-color: #{colors.$wit};\r\n --_dso-button-secondary-disabled-border-color: #{colors.$wit};\r\n --_dso-button-secondary-disabled-color: #{colors.$grijs-30};\r\n\r\n display: block;\r\n filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.4));\r\n\r\n // Visibility & opacity are updated using Floating-UI\r\n transition:\r\n visibility onboarding-tip-variables.$transition-time,\r\n opacity onboarding-tip-variables.$transition-time;\r\n}\r\n\r\n// Startup fade-in transition\r\n:host(:not([ready])) {\r\n opacity: 1;\r\n animation: onboarding-tip-variables.$transition-time ease-in 1 normal both fadeInOpacity;\r\n}\r\n\r\n:host([popover]) {\r\n margin: 0 !important;\r\n border: 0;\r\n padding: 0;\r\n background-color: transparent;\r\n overflow: unset;\r\n}\r\n\r\n.onboarding-tip {\r\n font-family: typography.$font-family-base;\r\n font-style: normal;\r\n font-weight: 400;\r\n line-height: typography.$line-height-base;\r\n line-break: auto;\r\n text-align: start;\r\n text-decoration: none;\r\n text-shadow: none;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n overflow-wrap: anywhere;\r\n word-spacing: normal;\r\n word-wrap: normal;\r\n white-space: normal;\r\n font-size: typography.$font-size-small;\r\n inset-block-start: 0;\r\n inset-inline-start: 0;\r\n z-index: zindex.$onboarding-tip;\r\n\r\n @media screen and (max-width: onboarding-tip-variables.$max-inline-size) {\r\n padding-inline-start: units.$u1 !important;\r\n }\r\n}\r\n\r\n.dso-close {\r\n position: absolute;\r\n inset-block-start: 4px;\r\n inset-inline-end: 4px;\r\n}\r\n\r\n.onboarding-tip-inner {\r\n --link-color: #{colors.$wit};\r\n --link-hover-color: #{colors.$grijs-30};\r\n --link-visited-color: #{colors.$grijs-50};\r\n\r\n max-inline-size: min(#{onboarding-tip-variables.$max-inline-size}, calc(100vw - 2 * #{units.$u1}));\r\n max-block-size: calc(100vh - 10px); // 10px is the padding given to floating-ui\r\n overflow: auto;\r\n padding-block: onboarding-tip-variables.$padding-block;\r\n padding-inline: onboarding-tip-variables.$padding-inline;\r\n border-radius: onboarding-tip-variables.$border-radius;\r\n display: block;\r\n font-size: typography.$root-font-size-base;\r\n position: relative;\r\n z-index: 2; // z-index higher than the arrow\r\n\r\n @include set-colors.apply(onboarding-tip-variables.$background-color, \"onboarding-tip\");\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-sm-max) {\r\n max-block-size: unset;\r\n }\r\n}\r\n\r\n.onboarding-tip-arrow {\r\n border-start-start-radius: onboarding-tip-variables.$border-radius;\r\n position: absolute;\r\n block-size: onboarding-tip-variables.$arrow-block-size;\r\n inline-size: onboarding-tip-variables.$arrow-inline-size;\r\n background: onboarding-tip-variables.$background-color;\r\n z-index: 1;\r\n pointer-events: none;\r\n}\r\n\r\n.onboarding-tip-content-wrapper {\r\n padding-inline: units.$u2;\r\n padding-block-end: units.$u2;\r\n}\r\n\r\n.onboarding-tip-content-heading {\r\n display: flex;\r\n\r\n dso-icon {\r\n margin-inline-end: units.$u1;\r\n }\r\n}\r\n\r\n@keyframes fadeInOpacity {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { OnboardingTipCloseEvent } from \"./onboarding-tip.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-onboarding-tip\",\r\n styleUrl: \"onboarding-tip.scss\",\r\n shadow: true,\r\n})\r\nexport class OnboardingTip implements ComponentInterface {\r\n @Element()\r\n private host!: HTMLDsoOnboardingTipElement;\r\n\r\n /*\r\n Where to place the Onboarding Tip relative to its reference element.\r\n /\r\n @Prop()\r\n placement: TooltipPlacement = \"right\";\r\n\r\n /\r\n Emitted when the user closes the Onboarding Tip.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<OnboardingTipCloseEvent>;\r\n\r\n @State()\r\n ready = false;\r\n\r\n @State()\r\n popoverOpen = false;\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (!this.popoverOpen) {\r\n this.host.showPopover();\r\n this.popoverOpen = true;\r\n }\r\n\r\n if (!this.cleanUp && this.referenceElement && this.tipArrowRef instanceof HTMLElement) {\r\n this.cleanUp = positionTooltip({\r\n referenceElement: this.referenceElement,\r\n tipRef: this.host,\r\n tipArrowRef: this.tipArrowRef,\r\n placementTip: `${this.placement}-start`,\r\n topPositionSmallViewPort: true,\r\n halfMainAxisOffset: true,\r\n });\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n if (this.popoverOpen) {\r\n this.host.hidePopover();\r\n this.popoverOpen = false;\r\n }\r\n this.cleanUp?.();\r\n this.cleanUp = undefined;\r\n }\r\n\r\n render() {\r\n return (\r\n <Host popover=\"manual\" ready={this.ready} onAnimationend={() => (this.ready = true)}>\r\n <div class=\"onboarding-tip\" role=\"tooltip\">\r\n <div class=\"onboarding-tip-inner\">\r\n <div class=\"onboarding-tip-content-wrapper\">\r\n {this.headingSlottedElement !== null && (\r\n <div class=\"onboarding-tip-content-heading\">\r\n <dso-icon icon=\"light-bulb\"></dso-icon>\r\n <slot name=\"heading\" />\r\n </div>\r\n )}\r\n <dso-icon-button\r\n class=\"dso-close\"\r\n label=\"Sluiten\"\r\n variant=\"tertiary\"\r\n icon=\"times\"\r\n onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n />\r\n <slot></slot>\r\n </div>\r\n </div>\r\n <div class=\"onboarding-tip-arrow\" ref={(ref) => (this.tipArrowRef = ref)}></div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private tipArrowRef: HTMLDivElement \| undefined;\r\n\r\n private get headingSlottedElement() {\r\n return this.host.querySelector(\"[slot='heading']\");\r\n }\r\n\r\n private cleanUp: TooltipClean \| undefined;\r\n\r\n private get referenceElement(): HTMLElement \| undefined {\r\n const id = this.host.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference. Onboarding Tip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.host.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedby=\"${id}\"]`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference element with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n return reference;\r\n }\r\n}\r\n"],"version":3}

package/dist/bundle/dso-ozon-content-toggletip.d.ts ADDED Viewed

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

package/dist/bundle/dso-ozon-content-toggletip.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { o as ozonContentToggletip, d as defineCustomElement$1 } from './p-BuyCa_uF.js';
+const DsoOzonContentToggletip = ozonContentToggletip;
+const defineCustomElement = defineCustomElement$1;
+export { DsoOzonContentToggletip, defineCustomElement };
+//# sourceMappingURL=dso-ozon-content-toggletip.js.map
+//# sourceMappingURL=dso-ozon-content-toggletip.js.map

package/dist/bundle/dso-ozon-content-toggletip.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"dso-ozon-content-toggletip.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/bundle/dso-ozon-content.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { O as OzonContent, d as defineCustomElement$1 } from './p-CTcIwB2o.js';
+import { O as OzonContent, d as defineCustomElement$1 } from './p-CN3aN7RU.js';
 const DsoOzonContent = OzonContent;
 const defineCustomElement = defineCustomElement$1;