@dso-toolkit/core 54.0.1 → 54.2.0

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

@@ -9,7 +9,7 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel, }) => (h("div", { cla
     h("span", null, "Toepassen"),
     h("dso-icon", { icon: "chevron-right" }))));
 
-const viewerGridCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([small]) .dso-map-panel {\n  flex-basis: 375px;\n  min-width: 0;\n  max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n  :host([small]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n\n:host([medium]) .dso-map-panel {\n  flex-basis: 624px;\n  min-width: 375px;\n  max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n  :host([medium]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n\n:host([large]) .dso-map-panel {\n  flex-basis: 60%;\n  min-width: 768px;\n  max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n  :host([large]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.dso-map-panel {\n  background-color: #fff;\n  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  flex-shrink: 0;\n  flex-grow: 0;\n  padding-right: 8px;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-map-panel .main {\n  height: 100%;\n  overflow-y: scroll;\n  padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  height: 100%;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 101;\n}\n\n.filterpanel {\n  box-shadow: 2px 0 5px #666;\n  padding: 8px 16px;\n  left: 0;\n  max-width: 896px;\n  width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    width: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-bottom: 16px;\n  margin-top: 24px;\n  font-size: 2rem;\n  font-weight: 700;\n}\n.filterpanel::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 896px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n\n.overlay {\n  box-shadow: -2px 0 5px #666;\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n\n.dimscreen {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 624px;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 102;\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}";
+const viewerGridCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: flex;\n  height: 100vh;\n  overflow: hidden;\n  position: relative;\n}\n\n:host([small]) .dso-map-panel {\n  flex-basis: 375px;\n  min-width: 0;\n  max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n  :host([small]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 0;\n    transition: none;\n  }\n}\n\n:host([medium]) .dso-map-panel {\n  flex-basis: 624px;\n  min-width: 375px;\n  max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n  :host([medium]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 375px;\n    transition: none;\n  }\n}\n\n:host([large]) .dso-map-panel {\n  flex-basis: 60%;\n  min-width: 768px;\n  max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n  :host([large]) .dso-map-panel {\n    flex-basis: 100vw;\n    max-width: 100vw;\n    min-width: 768px;\n    transition: none;\n  }\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n  outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n  outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n  color: #173521;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n  margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n  vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n  cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n  display: none;\n}\n\n.overlay-close-button {\n  position: absolute;\n  top: 8px;\n  right: 16px;\n}\n\n.dso-map-panel {\n  background-color: #fff;\n  box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n  flex-shrink: 0;\n  flex-grow: 0;\n  padding-right: 8px;\n  position: relative;\n  transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n  z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n  font-weight: bold;\n  margin: 8px 0;\n}\n.dso-map-panel .main {\n  height: 100%;\n  overflow-y: scroll;\n  padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n  left: calc(100% + 1px);\n  overflow-x: hidden;\n  padding: 0 4px 4px 0;\n  position: absolute;\n  top: 16px;\n  transition: left 200ms ease-in;\n  width: 44px;\n  z-index: -1;\n}\n.sizing-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-bottom-right-radius: 4px;\n  border-top-right-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.sizing-buttons button:active {\n  outline: 0;\n}\n.sizing-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.sizing-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n  line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.sizing-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n  color: #fff;\n}\n\n.map {\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n  background-color: #fff;\n  height: 100%;\n  overflow-y: auto;\n  position: absolute;\n  z-index: 101;\n}\n\n.filterpanel {\n  box-shadow: 2px 0 5px #666;\n  padding: 8px 16px;\n  left: 0;\n  max-width: 896px;\n  width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n  .filterpanel {\n    width: 100vw;\n  }\n  .filterpanel::before {\n    display: none !important;\n  }\n}\n.filterpanel h1 {\n  color: #275937;\n  margin-block-end: 16px;\n  margin-block-start: 24px;\n  font-size: 2rem;\n  font-weight: 700;\n}\n.filterpanel::before {\n  content: \"\";\n  display: block;\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 896px;\n  background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n  .filterpanel::before {\n    left: auto;\n    width: 40px;\n  }\n}\n\n.overlay {\n  box-shadow: -2px 0 5px #666;\n  padding: 40px 16px 8px;\n  right: 0;\n  width: 624px;\n}\n@media screen and (max-width: 624px) {\n  .overlay {\n    width: 100vw;\n  }\n}\n\n.dimscreen {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 624px;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 102;\n}\n\n.filterpanel-buttons {\n  text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n  outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n  outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n  background-color: #173521;\n  border-color: #173521;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n  background-color: #afcf9d;\n  border-color: #afcf9d;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n  line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n  margin-left: 16px;\n}";
 
 const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/expandable.js

@@ -1317,7 +1317,7 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.dsoToggle = createEvent(this, "dsoToggle", 7);
+    this.dsoToggle = createEvent(this, "dsoToggle", 3);
     this.animationInstantiated = createEvent(this, "animationInstantiated", 7);
     this.open = undefined;
     this.enableAnimation = false;
@@ -1374,6 +1374,9 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   prepareAnimationResizeObserver() {
     this.resizeObserver = new ResizeObserver(debounce_1(([entry]) => {
+      if (!entry) {
+        throw new Error("No entry found");
+      }
       // entry.contentRect does not include padding, so we use getBoundingClientRect.
       const height = entry.target.getBoundingClientRect().height;
       if (this.bodyHeight !== height) {

package/dist/components/index.d.ts

@@ -34,6 +34,7 @@ export { Pagination as DsoPagination } from '../types/components/pagination/pagi
 export { ProgressBar as DsoProgressBar } from '../types/components/progress-bar/progress-bar';
 export { Progressindicator as DsoProgressIndicator } from '../types/components/progress-indicator/progress-indicator';
 export { ResponsiveElement as DsoResponsiveElement } from '../types/components/responsive-element/responsive-element';
+export { Scrollable as DsoScrollable } from '../types/components/scrollable/scrollable';
 export { Selectable as DsoSelectable } from '../types/components/selectable/selectable';
 export { SlideToggle as DsoSlideToggle } from '../types/components/slide-toggle/slide-toggle';
 export { Table as DsoTable } from '../types/components/table/table';

package/dist/components/index.js

@@ -34,6 +34,7 @@ export { DsoPagination, defineCustomElement as defineCustomElementDsoPagination
 export { DsoProgressBar, defineCustomElement as defineCustomElementDsoProgressBar } from './dso-progress-bar.js';
 export { DsoProgressIndicator, defineCustomElement as defineCustomElementDsoProgressIndicator } from './dso-progress-indicator.js';
 export { DsoResponsiveElement, defineCustomElement as defineCustomElementDsoResponsiveElement } from './dso-responsive-element.js';
+export { DsoScrollable, defineCustomElement as defineCustomElementDsoScrollable } from './dso-scrollable.js';
 export { DsoSelectable, defineCustomElement as defineCustomElementDsoSelectable } from './dso-selectable.js';
 export { DsoSlideToggle, defineCustomElement as defineCustomElementDsoSlideToggle } from './dso-slide-toggle.js';
 export { DsoTable, defineCustomElement as defineCustomElementDsoTable } from './dso-table.js';

package/dist/components/responsive-element.js

@@ -24,6 +24,9 @@ const ResponsiveElement = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.dsoSizeChange = createEvent(this, "dsoSizeChange", 7);
     this.observer = new ResizeObserver(([entry]) => {
       var _a, _b;
+      if (!entry) {
+        throw new Error("No entry found");
+      }
       const size = (_b = (_a = elementSizes.find((s) => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
       this.sizeAlias = size;
       this.dsoSizeChange.emit(size);

package/dist/components/scrollable.js

@@ -0,0 +1,115 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as clsx } from './clsx.m.js';
+import { d as debounce_1 } from './index3.js';
+
+const scrollableCss = ":host{display:block;height:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{height:100%;position:relative}.dso-shadow-container .dso-scroll-container{height:100%;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;height:24px;left:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;width:100%}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));top:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));bottom:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
+
+const resizeObserver = new ResizeObserver(debounce_1((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
+function getScrollableComponentFromResizeObserverEntry({ target, }) {
+  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {
+    return target.parentNode.host;
+  }
+  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {
+    return target.parentElement;
+  }
+  return undefined;
+}
+function isDsoScrollableComponent(element) {
+  return element.tagName === "DSO-SCROLLABLE" && "_setScrollState" in element;
+}
+const Scrollable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.dsoScrollEnd = createEvent(this, "dsoScrollEnd", 7);
+    // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126
+    this.mutationObserver = new MutationObserver((entries) => entries.forEach(({ target }) => {
+      var _a;
+      const element = (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.closest("dso-scrollable");
+      if (element !== this.host) {
+        return;
+      }
+      this._setScrollState();
+    }));
+    this.scrollPosition = "noScroll";
+  }
+  /**
+   * Internal method. Do not use.
+   */
+  async _setScrollState() {
+    const scrollPosition = this.getScrollPosition();
+    if (this.scrollPosition !== scrollPosition) {
+      this.scrollPosition = scrollPosition;
+      if (this.scrollPosition === "top" || this.scrollPosition === "bottom") {
+        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });
+      }
+    }
+  }
+  get slottedElements() {
+    return Array.from(this.host.children);
+  }
+  getScrollPosition() {
+    if (!this.scrollContainerDiv) {
+      return "noScroll";
+    }
+    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;
+    if (scrollHeight <= clientHeight) {
+      return "noScroll";
+    }
+    if (scrollTop === 0) {
+      return "top";
+    }
+    if (scrollHeight - scrollTop - clientHeight < 1) {
+      return "bottom";
+    }
+    if (scrollTop > 0) {
+      return "middle";
+    }
+    return "noScroll";
+  }
+  componentDidLoad() {
+    this.mutationObserver.observe(this.host, {
+      characterData: true,
+      attributes: false,
+      childList: false,
+      subtree: true,
+    });
+    if (this.scrollContainerDiv instanceof HTMLDivElement) {
+      resizeObserver.observe(this.scrollContainerDiv);
+    }
+    this.slottedElements.forEach((element) => resizeObserver.observe(element));
+  }
+  disconnectedCallback() {
+    if (this.scrollContainerDiv instanceof HTMLDivElement) {
+      resizeObserver.unobserve(this.scrollContainerDiv);
+    }
+    this.mutationObserver.disconnect();
+    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
+  }
+  render() {
+    return (h("div", { class: "dso-shadow-container" }, h("div", { ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+        [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
+      }), onScroll: () => this._setScrollState() }, h("slot", null))));
+  }
+  get host() { return this; }
+  static get style() { return scrollableCss; }
+}, [1, "dso-scrollable", {
+    "scrollPosition": [32],
+    "_setScrollState": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["dso-scrollable"];
+  components.forEach(tagName => { switch (tagName) {
+    case "dso-scrollable":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Scrollable);
+      }
+      break;
+  } });
+}
+
+export { Scrollable as S, defineCustomElement as d };

package/dist/components/selectable.js

@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './info.js';
 import { d as defineCustomElement$1 } from './info-button.js';
 
-const selectableCss = ".sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h{--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline;margin-inline:-32px;min-height:24px;padding-inline:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}";
+const selectableCss = ".sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline;margin-inline:-32px;min-height:24px;padding-inline:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}";
 
 const Selectable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/tooltip.js

@@ -80,6 +80,12 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       activate: () => (this.active = true),
       deactivate: () => (this.active = false),
     };
+    this.onMouseLeave = () => {
+      var _a;
+      if (!this.element.matches(":hover") && !((_a = this.target) === null || _a === void 0 ? void 0 : _a.matches(":hover"))) {
+        this.callbacks.deactivate();
+      }
+    };
     this.keyDownListener = (event) => {
       if (event.key === "Escape") {
         this.deactivate();
@@ -177,7 +183,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     if (!this.stateless && this.target) {
       this.target.addEventListener("mouseenter", this.callbacks.activate);
-      this.target.addEventListener("mouseleave", this.callbacks.deactivate);
+      [this.element, this.target].forEach((element) => element.addEventListener("mouseleave", this.onMouseLeave));
       this.target.addEventListener("focus", this.callbacks.activate);
       this.target.addEventListener("blur", this.callbacks.deactivate);
     }
@@ -187,7 +193,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
     if (!this.stateless && this.target) {
       this.target.removeEventListener("mouseenter", this.callbacks.activate);
-      this.target.removeEventListener("mouseleave", this.callbacks.deactivate);
+      [this.element, this.target].forEach((element) => element.removeEventListener("mouseleave", this.onMouseLeave));
       this.target.removeEventListener("focus", this.callbacks.activate);
       this.target.removeEventListener("blur", this.callbacks.deactivate);
     }

package/dist/dso-toolkit/dso-toolkit.esm.js

@@ -1 +1 @@
-import{p as e,b as o}from"./p-98fd1658.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-efdf5c91",[[1,"dso-icon",{icon:[1]}]]],["p-0fce0861",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-f8a08ba1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-36224d6f",[[4,"dso-annotation-output",{identifier:[1],annotationPrefix:[1,"annotation-prefix"],toggleAnnotation:[64]}]]],["p-d4772fb0",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-96f44d35",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],state:[1],attachmentCount:[2,"attachment-count"],icon:[1],status:[1],open:[1540],hasNestedSection:[32],hover:[32],toggleSection:[64],scrollSectionIntoView:[64]}]]],["p-eaae698e",[[1,"dso-expandable-heading",{open:[4],heading:[1],color:[1],editAction:[1,"edit-action"]}]]],["p-975c172a",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]}]]],["p-8a77030b",[[1,"dso-label",{compact:[4],removable:[4],status:[1],truncate:[4],removeHover:[32],removeFocus:[32],textHover:[32],textFocus:[32],isTruncated:[32],labelText:[32],truncateLabel:[64],syncLabelText:[64]}]]],["p-09424a1d",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-588bc4d7",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-6a99d7f8",[[1,"dso-action-list-item",{step:[2],itemTitle:[1,"item-title"],flowLine:[4,"flow-line"],warning:[4],divider:[4]}]]],["p-5082d823",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-ee1acb32",[[0,"dso-annotation-button",{identifier:[1]}]]],["p-d6ea8670",[[1,"dso-attachments-counter",{count:[2]}]]],["p-c54ad578",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],loadingDelayed:[2,"loading-delayed"],notFoundLabel:[1,"not-found-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32],notFound:[32],showLoading:[32]},[[4,"click","onDocumentClick"]]]]],["p-cf9b79df",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],invalid:[516],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-d10ec2b3",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-398a8e0b",[[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-e04d87e0",[[1,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],manual:[4],manualInputWrapperElement:[32],manualCount:[32]}]]],["p-b7580ce3",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]}]]],["p-3238f7ee",[[1,"dso-modal",{modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],initialFocus:[1,"initial-focus"],returnFocus:[16],ariaId:[32],hasFooter:[32]}]]],["p-a1616935",[[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-bb90ea4c",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-ad0b38cf",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],allowMultipleOpen:[516,"allow-multiple-open"],getState:[64],toggleSection:[64],animationEnd:[64],closeOpenSections:[64]}]]],["p-e8a6ccf5",[[1,"dso-action-list",{listTitle:[1,"list-title"]}]]],["p-07952ece",[[1,"dso-badge",{status:[1]}]]],["p-1cb94d7d",[[1,"dso-banner",{status:[513]}]]],["p-61ac8d40",[[1,"dso-card",{isSelectable:[516,"is-selectable"],hasImage:[516,"has-image"],clickable:[4],imageShape:[513,"image-shape"]}]]],["p-69f37ab3",[[1,"dso-card-container",{mode:[513]}]]],["p-c1226b66",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-3b91c3e9",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[520],state:[32]}]]],["p-494fe8e5",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-82465cdc",[[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]],["p-5e50b616",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],dropdownOptionsOffset:[2,"dropdown-options-offset"],checkable:[4],boundary:[1],strategy:[1]}]]],["p-0af9bfb1",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-d987ef37",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-5de8b79a",[[1,"dso-tooltip",{descriptive:[516],position:[1],strategy:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-fe7ca25f",[[1,"dso-expandable",{open:[516],enableAnimation:[4,"enable-animation"],minimumHeight:[2,"minimum-height"],animationReady:[32],getAnimeInstance:[64],getBodyHeight:[64]}]]],["p-3914ad70",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-fa2f1a1c",[[6,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],labelledById:[1,"labelled-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],toggleInfo:[64]}],[1,"dso-info",{fixed:[516],active:[516]}]]]],e)));
+import{p as e,b as o}from"./p-98fd1658.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-efdf5c91",[[1,"dso-icon",{icon:[1]}]]],["p-0fce0861",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-f8a08ba1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-b049f492",[[4,"dso-annotation-output",{identifier:[1],annotationPrefix:[1,"annotation-prefix"],toggleAnnotation:[64]}]]],["p-d4772fb0",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-96f44d35",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],state:[1],attachmentCount:[2,"attachment-count"],icon:[1],status:[1],open:[1540],hasNestedSection:[32],hover:[32],toggleSection:[64],scrollSectionIntoView:[64]}]]],["p-65e8077e",[[1,"dso-expandable-heading",{open:[4],heading:[1],color:[1],editAction:[1,"edit-action"]}]]],["p-975c172a",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]}]]],["p-8a77030b",[[1,"dso-label",{compact:[4],removable:[4],status:[1],truncate:[4],removeHover:[32],removeFocus:[32],textHover:[32],textFocus:[32],isTruncated:[32],labelText:[32],truncateLabel:[64],syncLabelText:[64]}]]],["p-b9777372",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]}]]],["p-e8c46f70",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-281aa19e",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-6a99d7f8",[[1,"dso-action-list-item",{step:[2],itemTitle:[1,"item-title"],flowLine:[4,"flow-line"],warning:[4],divider:[4]}]]],["p-5082d823",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-ee1acb32",[[0,"dso-annotation-button",{identifier:[1]}]]],["p-d6ea8670",[[1,"dso-attachments-counter",{count:[2]}]]],["p-296657d3",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],loadingDelayed:[2,"loading-delayed"],notFoundLabel:[1,"not-found-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32],notFound:[32],showLoading:[32]},[[4,"click","onDocumentClick"]]]]],["p-c2215704",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],invalid:[516],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-d10ec2b3",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-398a8e0b",[[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-e04d87e0",[[1,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],manual:[4],manualInputWrapperElement:[32],manualCount:[32]}]]],["p-3238f7ee",[[1,"dso-modal",{modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],initialFocus:[1,"initial-focus"],returnFocus:[16],ariaId:[32],hasFooter:[32]}]]],["p-f3e38af3",[[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-7912940d",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-9361b19e",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],allowMultipleOpen:[516,"allow-multiple-open"],getState:[64],toggleSection:[64],animationEnd:[64],closeOpenSections:[64]}]]],["p-e8a6ccf5",[[1,"dso-action-list",{listTitle:[1,"list-title"]}]]],["p-07952ece",[[1,"dso-badge",{status:[1]}]]],["p-1cb94d7d",[[1,"dso-banner",{status:[513]}]]],["p-61ac8d40",[[1,"dso-card",{isSelectable:[516,"is-selectable"],hasImage:[516,"has-image"],clickable:[4],imageShape:[513,"image-shape"]}]]],["p-69f37ab3",[[1,"dso-card-container",{mode:[513]}]]],["p-c1226b66",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-3b91c3e9",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[520],state:[32]}]]],["p-494fe8e5",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-82465cdc",[[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]],["p-564a5d95",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],dropdownOptionsOffset:[2,"dropdown-options-offset"],checkable:[4],boundary:[1],strategy:[1]}]]],["p-ae45e550",[[1,"dso-scrollable",{scrollPosition:[32],_setScrollState:[64]}]]],["p-0af9bfb1",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-baef3721",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-bc975b99",[[1,"dso-tooltip",{descriptive:[516],position:[1],strategy:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-313d07f5",[[1,"dso-expandable",{open:[516],enableAnimation:[4,"enable-animation"],minimumHeight:[2,"minimum-height"],animationReady:[32],getAnimeInstance:[64],getBodyHeight:[64]}]]],["p-3914ad70",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-ca4fee8d",[[6,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],labelledById:[1,"labelled-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],toggleInfo:[64]}],[1,"dso-info",{fixed:[516],active:[516]}]]]],e)));

package/dist/dso-toolkit/p-281aa19e.entry.js

@@ -0,0 +1 @@
+import{h as e,F as t,r as o,c as i}from"./p-98fd1658.js";import{c as n}from"./p-6a1980b4.js";const r=({owner:o,ancestors:i,item:s,index:a,level:l,setSize:c})=>{var d,h,p,u;return e("li",{key:s.id,class:n("tree-item",{"has-child":s.hasItems,"is-expanded":!!s.open&&!!(null===(d=s.items)||void 0===d?void 0:d.length)}),role:"none"},e("div",{class:"tree-branch-control"},s.hasItems?e("div",{onClick:e=>o.itemClick(e,i,s)},e("dso-icon",{icon:s.open?"minus-square":"plus-square"})):e("dso-icon",null)),e("p",{class:n("tree-content",{active:s.active},{selected:s.selected}),tabindex:1===l&&0===a?0:-1,role:"treeitem","aria-expanded":s.hasItems?""+(!!s.open&&!!(null===(h=s.items)||void 0===h?void 0:h.length)):void 0,"aria-current":s.active?"true":void 0,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":s.loading?"true":void 0,"data-item-id":s.id,onClick:e=>o.itemClick(e,i,s)},s.selected&&e("span",{class:"sr-only"},"Resultaat: "),s.href?e("a",{href:s.href,tabindex:"-1"},s.label):e("span",null,s.label),null===(p=s.icons)||void 0===p?void 0:p.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),s.open&&e(t,null,s.hasItems&&!s.items&&s.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},null===(u=s.items)||void 0===u?void 0:u.map(((t,n,a)=>e(r,{owner:o,ancestors:[...i,s],item:t,index:n,level:l+1,setSize:a.length}))))))},s=class{constructor(e){o(this,e),this.dsoOpenItem=i(this,"dsoOpenItem",7),this.dsoCloseItem=i(this,"dsoCloseItem",7),this.dsoClickItem=i(this,"dsoClickItem",7),this.keyDownListener=e=>{if(e.defaultPrevented)return;const t=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(e.target instanceof HTMLParagraphElement&&t instanceof HTMLElement){switch(e.key){case"ArrowDown":s.moveFocus(t,e.target,"next");break;case"ArrowUp":s.moveFocus(t,e.target,"previous");break;case"ArrowRight":s.expandItemOrFocusChild(t,e.target);break;case"ArrowLeft":s.collapseItemOrFocusParent(t,e.target);break;case"End":s.moveFocus(t,e.target,"last");break;case"Home":s.moveFocus(t,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(1===(o=e.key).length&&o.match(/\S/)&&s.setFocusByFirstCharacter(t,e.target,e.key,e.shiftKey))break;return}var o;e.preventDefault()}},this.itemClick=(e,t,o)=>{if(!(e.target instanceof HTMLElement))return;const i=e.target.closest(".tree-content");if(i){const n=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(!(i instanceof HTMLParagraphElement&&n instanceof HTMLElement))return;return s.setFocus(n,i),void this.dsoClickItem.emit({path:[...t,o],originalEvent:e})}o.open?this.dsoCloseItem.emit([...t,o]):this.dsoOpenItem.emit([...t,o])},this.collection=void 0}async focusItem(e){var t;const o=this.tree;if(!o||0===e.length)return!1;const i=e[e.length-1];if(!i)throw new Error("No itemToFocus found");const n=Array.from(null!==(t=o.querySelectorAll("p"))&&void 0!==t?t:[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset.itemId===i.id));return!!n&&(s.setFocus(o,n),!0)}static setFocus(e,t){t&&(Array.from(e.querySelectorAll("p")).filter((e=>0===e.tabIndex)).forEach((e=>e.tabIndex=-1)),t.tabIndex=0,t.focus())}static moveFocus(e,t,o){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let n=0;switch(o){case"first":n=0;break;case"previous":n=i.indexOf(t)-1;break;case"next":n=i.indexOf(t)+1;break;case"last":n=i.length-1}const r=i[n];if(!r)throw new Error("No focusableItem found");s.setFocus(e,r)}static expandItemOrFocusChild(e,t){var o;if("true"===(null==t?void 0:t.getAttribute("aria-expanded")))s.moveFocus(e,t,"next");else{const e=null===(o=t.previousElementSibling)||void 0===o?void 0:o.firstElementChild;e instanceof HTMLElement&&e.click()}}static collapseItemOrFocusParent(e,t){var o,i,n;if("true"===(null==t?void 0:t.getAttribute("aria-expanded"))){const e=null===(o=t.previousElementSibling)||void 0===o?void 0:o.firstElementChild;e instanceof HTMLElement&&e.click()}else{const o=null===(n=null===(i=null==t?void 0:t.parentElement)||void 0===i?void 0:i.parentElement)||void 0===n?void 0:n.previousElementSibling;o instanceof HTMLElement&&s.setFocus(e,o)}}static setFocusByFirstCharacter(e,t,o,i){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));i&&n.reverse();const r=n.indexOf(t);o=o.toLowerCase();let a=n.find(((e,t)=>{var i;return t>r&&(null===(i=e.textContent)||void 0===i?void 0:i.toLowerCase().startsWith(o))}));return a||(a=n.find(((e,t)=>{var i;return t<r&&(null===(i=e.textContent)||void 0===i?void 0:i.toLowerCase().startsWith(o))}))),!!a&&(s.setFocus(e,a),!0)}render(){var t;return e("div",{id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{role:"tree","aria-label":"Objectenboom"},null===(t=this.collection)||void 0===t?void 0:t.map(((t,o)=>e(r,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};s.style=':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-left:0}:host ul[role=group]::before{border-left:1px solid #275937;content:"";height:8px;left:44px;position:absolute;top:0;width:0}:host li:not(.has-child)::before{border-top:1px solid #275937;content:"";height:0;left:12px;position:absolute;top:20px;width:16px}:host li:not(.has-child)::after{border-left:1px solid #275937;content:"";height:100%;left:12px;position:absolute;top:8px;width:0}:host li:not(.has-child):last-child::after{height:20px;top:0}:host li.has-child::before{border-top:1px solid #275937;content:"";height:0;left:24px;position:absolute;top:20px;width:4px}:host li.has-child:not(:last-child)::after{border-left:1px solid #275937;content:"";height:calc(100% - 24px);left:12px;position:absolute;top:32px;width:0}:host li.has-child.is-expanded:last-child::after{border-left:1px solid #275937;content:"";height:calc(100% - 32px);left:12px;position:absolute;top:32px;width:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin:8px 8px 8px 0;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0;max-width:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';export{s as dso_tree_view}

package/dist/dso-toolkit/p-296657d3.entry.js

@@ -0,0 +1 @@
+import{r as t,c as s,h as i,F as e,g as h}from"./p-98fd1658.js";import{d as o}from"./p-1805f5b0.js";import{v as a}from"./p-5d7f4ff2.js";const n=class{constructor(i){t(this,i),this.dsoSelect=s(this,"dsoSelect",7),this.dsoChange=s(this,"dsoChange",7),this.dsoSearch=s(this,"dsoSearch",7),this.listboxId=a(),this.inputId=a(),this.labelId=a(),this.debouncedEmitValue=o((t=>{this.dsoChange.emit(t),this.debouncedShowLoading()}),200),this.debouncedShowLoading=o((()=>{this.inputValue&&(this.showLoading=!0)}),this.loadingDelayed),this.inputValue="",this.onInput=t=>{if(!(t.target instanceof HTMLInputElement))throw new Error("event.target is not instanceof HTMLInputElement");this.showLoading=!this.loadingDelayed,this.inputValue=t.target.value,this.debouncedEmitValue(t.target.value.match(/(\S+)/g)?t.target.value:"")},this.onFocusIn=()=>{this.suggestOnFocus&&this.openSuggestions()},this.onKeyDown=t=>{if(!t.defaultPrevented&&!this.loading){switch(t.key){case"ArrowDown":this.showSuggestions?this.selectNextSuggestion():this.openSuggestions("first");break;case"ArrowUp":this.showSuggestions?this.selectPreviousSuggestion():this.openSuggestions("last");break;case"Tab":return void this.closeSuggestions();case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}t.preventDefault()}},this.suggestions=null,this.loading=!1,this.loadingLabel="Een moment geduld.",this.loadingDelayed=void 0,this.notFoundLabel=void 0,this.suggestOnFocus=!1,this.showSuggestions=!1,this.selectedSuggestion=void 0,this.notFound=!1,this.showLoading=!1}suggestionsWatcher(){this.resetSelectedSuggestion(),this.showSuggestions&&this.notFound||!this.inputValue?!this.showSuggestions&&!this.notFound||this.inputValue||this.closeSuggestions():this.openSuggestions()}onDocumentClick(t){(this.showSuggestions||this.notFound)&&this.listbox&&t.target instanceof Node&&!this.listbox.contains(t.target)&&this.input!==t.target&&this.closeSuggestions()}connectedCallback(){setTimeout((()=>{const t=this.host.querySelector('input[type="text"]');if(!(t instanceof HTMLInputElement))throw new ReferenceError("Mandatory text input not found");if(this.input=t,t.id?this.inputId=t.id:t.id=this.inputId,!this.input.labels||this.input.labels.length<1)throw new ReferenceError("Mandatory label for text input not found");const s=this.input.labels[0];(null==s?void 0:s.id)?this.labelId=s.id:s&&(s.id=this.labelId),this.input.setAttribute("role","combobox"),this.input.setAttribute("aria-haspopup","listbox"),this.input.setAttribute("aria-controls",this.listboxId),this.input.setAttribute("aria-expanded","false"),this.input.setAttribute("autocomplete","off"),this.input.setAttribute("aria-autocomplete","list"),this.input.setAttribute("aria-activedescendant",""),this.input.addEventListener("input",this.onInput),this.input.addEventListener("keydown",this.onKeyDown),this.input.addEventListener("focusin",this.onFocusIn)}))}disconnectedCallback(){var t,s,i;null===(t=this.input)||void 0===t||t.removeEventListener("input",this.onInput),null===(s=this.input)||void 0===s||s.removeEventListener("keydown",this.onKeyDown),null===(i=this.input)||void 0===i||i.removeEventListener("focusin",this.onFocusIn)}markTerms(t,s){if(!t||!s||0===s.length||void 0===s[0])return[""];const e=new RegExp(`(${function(t){if("string"!=typeof t)throw new TypeError("Expected a string");return t.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}(s[0])})`,"gi");return t.split(e).map((t=>t?e.test(t)?i("mark",null,t):1===s.length?i("span",null,t):this.markTerms(t,s.slice(1)):""))}selectSuggestion(t){var s;this.selectedSuggestion=t,null===(s=this.input)||void 0===s||s.setAttribute("aria-activedescendant",this.listboxItemId(t))}selectFirstSuggestion(){var t;this.suggestions&&(this.selectedSuggestion=this.suggestions[0],this.selectedSuggestion&&(null===(t=this.input)||void 0===t||t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))))}selectLastSuggestion(){var t;this.suggestions&&(this.selectedSuggestion=this.suggestions[this.suggestions.length-1],this.selectedSuggestion&&(null===(t=this.input)||void 0===t||t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))))}selectNextSuggestion(){var t,s;if(!this.suggestions)return;const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=null!==(t=this.suggestions[i+1])&&void 0!==t?t:this.suggestions[0],this.selectedSuggestion&&(null===(s=this.input)||void 0===s||s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion)))}selectPreviousSuggestion(){var t,s;if(!this.suggestions)return;const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=null!==(t=this.suggestions[i-1])&&void 0!==t?t:this.suggestions[this.suggestions.length-1],this.selectedSuggestion&&(null===(s=this.input)||void 0===s||s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion)))}resetSelectedSuggestion(){var t;this.showLoading=!this.loadingDelayed,this.notFound=!1,this.selectedSuggestion=void 0,null===(t=this.input)||void 0===t||t.setAttribute("aria-activedescendant","")}openSuggestions(t){var s,i,e,h;this.showSuggestions=null!==(s=this.suggestions&&this.suggestions.length>0)&&void 0!==s&&s,this.notFound=null!==(e=0===(null===(i=this.suggestions)||void 0===i?void 0:i.length))&&void 0!==e&&e,null===(h=this.input)||void 0===h||h.setAttribute("aria-expanded",(this.showSuggestions||this.notFound).toString()),this.showSuggestions&&"first"===t?this.selectFirstSuggestion():this.showSuggestions&&"last"===t&&this.selectLastSuggestion()}closeSuggestions(){var t;this.showSuggestions=!1,this.notFound=!1,null===(t=this.input)||void 0===t||t.setAttribute("aria-expanded","false"),this.selectFirstSuggestion()}pickSelectedValue(){var t;this.selectedSuggestion&&this.showSuggestions?this.dsoSelect.emit(this.selectedSuggestion):this.dsoSearch.emit(null===(t=this.input)||void 0===t?void 0:t.value),this.closeSuggestions()}listboxItemId(t){return this.suggestions?`${this.inputId}-${this.suggestions.indexOf(t)+1}`:""}render(){var t,s;const h=null!==(s=null===(t=this.input)||void 0===t?void 0:t.value.split(" ").filter((t=>t)))&&void 0!==s?s:[];return i(e,null,i("slot",null),this.loading&&this.showLoading?i("div",{class:"autosuggest-progress-box"},i("dso-progress-indicator",{label:this.loadingLabel})):i("ul",{role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:t=>this.listbox=t,hidden:!this.showSuggestions&&!this.notFound},this.showSuggestions&&this.suggestions?this.suggestions.map((t=>i("li",{role:"option",id:this.listboxItemId(t),key:t.value,onMouseEnter:()=>this.selectSuggestion(t),onMouseLeave:()=>this.resetSelectedSuggestion(),onClick:()=>this.pickSelectedValue(),"aria-selected":(t===this.selectedSuggestion).toString(),"aria-label":t.value},i("span",{class:"value"},this.markTerms(t.value,h)),t.type?i("span",{class:"type"},t.type):void 0))):this.notFound?i("li",null,i("span",{class:"value"},this.notFoundLabel?i("span",null,this.notFoundLabel):this.markTerms(`${this.inputValue} is niet gevonden.`,h))):void 0))}get host(){return h(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};n.style=".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 16px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";export{n as dso_autosuggest}

package/dist/dso-toolkit/{p-fe7ca25f.entry.js → p-313d07f5.entry.js}

@@ -1 +1 @@
-import{r as n,c as t,h as r,H as e,g as i}from"./p-98fd1658.js";import{c as u}from"./p-6a1980b4.js";import{d as a}from"./p-1805f5b0.js";var o={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},c={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},f=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],s={CSS:{},springs:{}};function v(n,t,r){return Math.min(Math.max(n,t),r)}function l(n,t){return n.indexOf(t)>-1}function h(n,t){return n.apply(null,t)}var d={arr:function(n){return Array.isArray(n)},obj:function(n){return l(Object.prototype.toString.call(n),"Object")},pth:function(n){return d.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||d.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return d.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return d.hex(n)||d.rgb(n)||d.hsl(n)},key:function(n){return!o.hasOwnProperty(n)&&!c.hasOwnProperty(n)&&"targets"!==n&&"keyframes"!==n}};function p(n){var t=/\(([^)]+)\)/.exec(n);return t?t[1].split(",").map((function(n){return parseFloat(n)})):[]}function m(n,t){var r=p(n),e=v(d.und(r[0])?1:r[0],.1,100),i=v(d.und(r[1])?100:r[1],.1,100),u=v(d.und(r[2])?10:r[2],.1,100),a=v(d.und(r[3])?0:r[3],.1,100),o=Math.sqrt(i/e),c=u/(2*Math.sqrt(i*e)),f=c<1?o*Math.sqrt(1-c*c):0,l=c<1?(c*o-a)/f:-a+o;function h(n){var r=t?t*n/1e3:n;return r=c<1?Math.exp(-r*c*o)*(1*Math.cos(f*r)+l*Math.sin(f*r)):(1+l*r)*Math.exp(-r*o),0===n||1===n?n:1-r}return t?h:function(){var t=s.springs[n];if(t)return t;for(var r=1/6,e=0,i=0;;)if(1===h(e+=r)){if(++i>=16)break}else i=0;var u=e*r*1e3;return s.springs[n]=u,u}}function g(n){return void 0===n&&(n=10),function(t){return Math.ceil(v(t,1e-6,1)*n)*(1/n)}}var b,M,y=function(){var n=.1;function t(n,t){return 1-3*t+3*n}function r(n,t){return 3*t-6*n}function e(n){return 3*n}function i(n,i,u){return((t(i,u)*n+r(i,u))*n+e(i))*n}function u(n,i,u){return 3*t(i,u)*n*n+2*r(i,u)*n+e(i)}return function(t,r,e,a){if(0<=t&&t<=1&&0<=e&&e<=1){var o=new Float32Array(11);if(t!==r||e!==a)for(var c=0;c<11;++c)o[c]=i(c*n,t,e);return function(c){return t===r&&e===a||0===c||1===c?c:i(function(r){for(var a=0,c=1;10!==c&&o[c]<=r;++c)a+=n;--c;var f=a+(r-o[c])/(o[c+1]-o[c])*n,s=u(f,t,e);return s>=.001?function(n,t,r,e){for(var a=0;a<4;++a){var o=u(t,r,e);if(0===o)return t;t-=(i(t,r,e)-n)/o}return t}(r,f,t,e):0===s?f:function(n,t,r,e,u){var a,o,c=0;do{(a=i(o=t+(r-t)/2,e,u)-n)>0?r=o:t=o}while(Math.abs(a)>1e-7&&++c<10);return o}(r,a,a+n,t,e)}(c),r,a)}}}}(),w=(b={linear:function(){return function(n){return n}}},M={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var t,r=4;n<((t=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*t-2)/22-n,2)}},Elastic:function(n,t){void 0===n&&(n=1),void 0===t&&(t=.5);var r=v(n,1,10),e=v(t,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-e/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/e)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach((function(n,t){M[n]=function(){return function(n){return Math.pow(n,t+2)}}})),Object.keys(M).forEach((function(n){var t=M[n];b["easeIn"+n]=t,b["easeOut"+n]=function(n,r){return function(e){return 1-t(n,r)(1-e)}},b["easeInOut"+n]=function(n,r){return function(e){return e<.5?t(n,r)(2*e)/2:1-t(n,r)(-2*e+2)/2}},b["easeOutIn"+n]=function(n,r){return function(e){return e<.5?(1-t(n,r)(1-2*e))/2:(t(n,r)(2*e-1)+1)/2}}})),b);function x(n,t){if(d.fnc(n))return n;var r=n.split("(")[0],e=w[r],i=p(n);switch(r){case"spring":return m(n,t);case"cubicBezier":return h(y,i);case"steps":return h(g,i);default:return h(e,i)}}function A(n){try{return document.querySelectorAll(n)}catch(n){return}}function F(n,t){for(var r=n.length,e=arguments.length>=2?arguments[1]:void 0,i=[],u=0;u<r;u++)if(u in n){var a=n[u];t.call(e,a,u,n)&&i.push(a)}return i}function O(n){return n.reduce((function(n,t){return n.concat(d.arr(t)?O(t):t)}),[])}function I(n){return d.arr(n)?n:(d.str(n)&&(n=A(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function k(n,t){return n.some((function(n){return n===t}))}function B(n){var t={};for(var r in n)t[r]=n[r];return t}function C(n,t){var r=B(n);for(var e in n)r[e]=t.hasOwnProperty(e)?t[e]:n[e];return r}function j(n,t){var r=B(n);for(var e in t)r[e]=d.und(n[e])?t[e]:n[e];return r}function E(n){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(t)return t[1]}function L(n,t){return d.fnc(n)?n(t.target,t.id,t.total):n}function $(n,t){return n.getAttribute(t)}function z(n,t,r){if(k([r,"deg","rad","turn"],E(t)))return t;var e=s.CSS[t+r];if(!d.und(e))return e;var i=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(i),i.style.position="absolute",i.style.width=100+r;var a=100/i.offsetWidth;u.removeChild(i);var o=a*parseFloat(t);return s.CSS[t+r]=o,o}function N(n,t,r){if(t in n.style){var e=t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),i=n.style[t]||getComputedStyle(n).getPropertyValue(e)||"0";return r?z(n,i,r):i}}function H(n,t){return d.dom(n)&&!d.inp(n)&&(!d.nil($(n,t))||d.svg(n)&&n[t])?"attribute":d.dom(n)&&k(f,t)?"transform":d.dom(n)&&"transform"!==t&&N(n,t)?"css":null!=n[t]?"object":void 0}function S(n){if(d.dom(n)){for(var t,r=n.style.transform||"",e=/(\w+)\(([^)]*)\)/g,i=new Map;t=e.exec(r);)i.set(t[1],t[2]);return i}}function D(n,t,r,e){switch(H(n,t)){case"transform":return function(n,t,r,e){var i=l(t,"scale")?1:0+function(n){return l(n,"translate")||"perspective"===n?"px":l(n,"rotate")||l(n,"skew")?"deg":void 0}(t),u=S(n).get(t)||i;return r&&(r.transforms.list.set(t,u),r.transforms.last=t),e?z(n,u,e):u}(n,t,e,r);case"css":return N(n,t,r);case"attribute":return $(n,t);default:return n[t]||0}}function X(n,t){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var e=E(n)||0,i=parseFloat(t),u=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return i+u+e;case"-":return i-u+e;case"*":return i*u+e}}function Y(n,t){if(d.col(n))return function(n){return d.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(t=n))?"rgba("+r[1]+",1)":t:d.hex(n)?function(n){var t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(n,t,r,e){return t+t+r+r+e+e})),r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return"rgba("+parseInt(r[1],16)+","+parseInt(r[2],16)+","+parseInt(r[3],16)+",1)"}(n):d.hsl(n)?function(n){var t,r,e,i=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),u=parseInt(i[1],10)/360,a=parseInt(i[2],10)/100,o=parseInt(i[3],10)/100,c=i[4]||1;function f(n,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(t-n)*r:r<.5?t:r<2/3?n+(t-n)*(2/3-r)*6:n}if(0==a)t=r=e=o;else{var s=o<.5?o*(1+a):o+a-o*a,v=2*o-s;t=f(v,s,u+1/3),r=f(v,s,u),e=f(v,s,u-1/3)}return"rgba("+255*t+","+255*r+","+255*e+","+c+")"}(n):void 0;var t,r}(n);if(/\s/g.test(n))return n;var r=E(n),e=r?n.substr(0,n.length-r.length):n;return t?e+t:e}function Z(n,t){return Math.sqrt(Math.pow(t.x-n.x,2)+Math.pow(t.y-n.y,2))}function Q(n){for(var t,r=n.points,e=0,i=0;i<r.numberOfItems;i++){var u=r.getItem(i);i>0&&(e+=Z(t,u)),t=u}return e}function T(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return function(n){return 2*Math.PI*$(n,"r")}(n);case"rect":return function(n){return 2*$(n,"width")+2*$(n,"height")}(n);case"line":return function(n){return Z({x:$(n,"x1"),y:$(n,"y1")},{x:$(n,"x2"),y:$(n,"y2")})}(n);case"polyline":return Q(n);case"polygon":return function(n){var t=n.points;return Q(n)+Z(t.getItem(t.numberOfItems-1),t.getItem(0))}(n)}}function q(n,t){var r=t||{},e=r.el||function(n){for(var t=n.parentNode;d.svg(t)&&d.svg(t.parentNode);)t=t.parentNode;return t}(n),i=e.getBoundingClientRect(),u=$(e,"viewBox"),a=i.width,o=i.height,c=r.viewBox||(u?u.split(" "):[0,0,a,o]);return{el:e,viewBox:c,x:c[0]/1,y:c[1]/1,w:a,h:o,vW:c[2],vH:c[3]}}function P(n,t,r){function e(r){return void 0===r&&(r=0),n.el.getPointAtLength(t+r>=1?t+r:0)}var i=q(n.el,n.svg),u=e(),a=e(-1),o=e(1),c=r?1:i.w/i.vW,f=r?1:i.h/i.vH;switch(n.property){case"x":return(u.x-i.x)*c;case"y":return(u.y-i.y)*f;case"angle":return 180*Math.atan2(o.y-a.y,o.x-a.x)/Math.PI}}function R(n,t){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,e=Y(d.pth(n)?n.totalLength:n,t)+"";return{original:e,numbers:e.match(r)?e.match(r).map(Number):[0],strings:d.str(n)||t?e.split(r):[]}}function W(n){return F(n?O(d.arr(n)?n.map(I):I(n)):[],(function(n,t,r){return r.indexOf(n)===t}))}function G(n){var t=W(n);return t.map((function(n,r){return{target:n,id:r,total:t.length,transforms:{list:S(n)}}}))}function V(n,t){var r=B(t);if(/^spring/.test(r.easing)&&(r.duration=m(r.easing)),d.arr(n)){var e=n.length;2!==e||d.obj(n[0])?d.fnc(t.duration)||(r.duration=t.duration/e):n={value:n}}var i=d.arr(n)?n:[n];return i.map((function(n,r){var e=d.obj(n)&&!d.pth(n)?n:{value:n};return d.und(e.delay)&&(e.delay=r?0:t.delay),d.und(e.endDelay)&&(e.endDelay=r===i.length-1?t.endDelay:0),e})).map((function(n){return j(n,r)}))}var _={css:function(n,t,r){return n.style[t]=r},attribute:function(n,t,r){return n.setAttribute(t,r)},object:function(n,t,r){return n[t]=r},transform:function(n,t,r,e,i){if(e.list.set(t,r),t===e.last||i){var u="";e.list.forEach((function(n,t){u+=t+"("+n+") "})),n.style.transform=u}}};function J(n,t){G(n).forEach((function(n){for(var r in t){var e=L(t[r],n),i=n.target,u=E(e),a=D(i,r,u,n),o=X(Y(e,u||E(a)),a),c=H(i,r);_[c](i,r,o,n.transforms,!0)}}))}function K(n,t){return F(O(n.map((function(n){return t.map((function(t){return function(n,t){var r=H(n.target,t.name);if(r){var e=function(n,t){var r;return n.tweens.map((function(e){var i=function(n,t){var r={};for(var e in n){var i=L(n[e],t);d.arr(i)&&1===(i=i.map((function(n){return L(n,t)}))).length&&(i=i[0]),r[e]=i}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(e,t),u=i.value,a=d.arr(u)?u[1]:u,o=E(a),c=D(t.target,n.name,o,t),f=r?r.to.original:c,s=d.arr(u)?u[0]:f,v=E(s)||E(c),l=o||v;return d.und(a)&&(a=f),i.from=R(s,l),i.to=R(X(a,s),l),i.start=r?r.end:0,i.end=i.start+i.delay+i.duration+i.endDelay,i.easing=x(i.easing,i.duration),i.isPath=d.pth(u),i.isPathTargetInsideSVG=i.isPath&&d.svg(t.target),i.isColor=d.col(i.from.original),i.isColor&&(i.round=1),r=i,i}))}(t,n),i=e[e.length-1];return{type:r,property:t.name,animatable:n,tweens:e,duration:i.end,delay:e[0].delay,endDelay:i.endDelay}}}(n,t)}))}))),(function(n){return!d.und(n)}))}function U(n,t){var r=n.length,e=function(n){return n.timelineOffset?n.timelineOffset:0},i={};return i.duration=r?Math.max.apply(Math,n.map((function(n){return e(n)+n.duration}))):t.duration,i.delay=r?Math.min.apply(Math,n.map((function(n){return e(n)+n.delay}))):t.delay,i.endDelay=r?i.duration-Math.max.apply(Math,n.map((function(n){return e(n)+n.duration-n.endDelay}))):t.endDelay,i}var nn=0,tn=[],rn=function(){var n;function t(r){for(var e=tn.length,i=0;i<e;){var u=tn[i];u.paused?(tn.splice(i,1),e--):(u.tick(r),i++)}n=i>0?requestAnimationFrame(t):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",(function(){un.suspendWhenDocumentHidden&&(en()?n=cancelAnimationFrame(n):(tn.forEach((function(n){return n._onDocumentVisibility()})),rn()))})),function(){n||en()&&un.suspendWhenDocumentHidden||!(tn.length>0)||(n=requestAnimationFrame(t))}}();function en(){return!!document&&document.hidden}function un(n){void 0===n&&(n={});var t,r=0,e=0,i=0,u=0,a=null;function f(n){var t=window.Promise&&new Promise((function(n){return a=n}));return n.finished=t,t}var s=function(n){var t=C(o,n),r=C(c,n),e=function(n,t){var r=[],e=t.keyframes;for(var i in e&&(t=j(function(n){for(var t=F(O(n.map((function(n){return Object.keys(n)}))),(function(n){return d.key(n)})).reduce((function(n,t){return n.indexOf(t)<0&&n.push(t),n}),[]),r={},e=function(e){var i=t[e];r[i]=n.map((function(n){var t={};for(var r in n)d.key(r)?r==i&&(t.value=n[r]):t[r]=n[r];return t}))},i=0;i<t.length;i++)e(i);return r}(e),t)),t)d.key(i)&&r.push({name:i,tweens:V(t[i],n)});return r}(r,n),i=G(n.targets),u=K(i,e),a=U(u,r),f=nn;return nn++,j(t,{id:f,children:[],animatables:i,animations:u,duration:a.duration,delay:a.delay,endDelay:a.endDelay})}(n);function l(){var n=s.direction;"alternate"!==n&&(s.direction="normal"!==n?"normal":"reverse"),s.reversed=!s.reversed,t.forEach((function(n){return n.reversed=s.reversed}))}function h(n){return s.reversed?s.duration-n:n}function p(){r=0,e=h(s.currentTime)*(1/un.speed)}function m(n,t){t&&t.seek(n-t.timelineOffset)}function g(n){for(var t=0,r=s.animations,e=r.length;t<e;){var i=r[t],u=i.animatable,a=i.tweens,o=a.length-1,c=a[o];o&&(c=F(a,(function(t){return n<t.end}))[0]||c);for(var f=v(n-c.start-c.delay,0,c.duration)/c.duration,l=isNaN(f)?1:c.easing(f),h=c.to.strings,d=c.round,p=[],m=c.to.numbers.length,g=void 0,b=0;b<m;b++){var M=void 0,y=c.to.numbers[b],w=c.from.numbers[b]||0;M=c.isPath?P(c.value,l*y,c.isPathTargetInsideSVG):w+l*(y-w),d&&(c.isColor&&b>2||(M=Math.round(M*d)/d)),p.push(M)}var x=h.length;if(x){g=h[0];for(var A=0;A<x;A++){var O=h[A+1],I=p[A];isNaN(I)||(g+=O?I+O:I+" ")}}else g=p[0];_[i.type](u.target,i.property,g,u.transforms),i.currentValue=g,t++}}function b(n){s[n]&&!s.passThrough&&s[n](s)}function M(n){var o=s.duration,c=s.delay,d=o-s.endDelay,p=h(n);s.progress=v(p/o*100,0,100),s.reversePlayback=p<s.currentTime,t&&function(n){if(s.reversePlayback)for(var r=u;r--;)m(n,t[r]);else for(var e=0;e<u;e++)m(n,t[e])}(p),!s.began&&s.currentTime>0&&(s.began=!0,b("begin")),!s.loopBegan&&s.currentTime>0&&(s.loopBegan=!0,b("loopBegin")),p<=c&&0!==s.currentTime&&g(0),(p>=d&&s.currentTime!==o||!o)&&g(o),p>c&&p<d?(s.changeBegan||(s.changeBegan=!0,s.changeCompleted=!1,b("changeBegin")),b("change"),g(p)):s.changeBegan&&(s.changeCompleted=!0,s.changeBegan=!1,b("changeComplete")),s.currentTime=v(p,0,o),s.began&&b("update"),n>=o&&(e=0,s.remaining&&!0!==s.remaining&&s.remaining--,s.remaining?(r=i,b("loopComplete"),s.loopBegan=!1,"alternate"===s.direction&&l()):(s.paused=!0,s.completed||(s.completed=!0,b("loopComplete"),b("complete"),!s.passThrough&&"Promise"in window&&(a(),f(s)))))}return f(s),s.reset=function(){var n=s.direction;s.passThrough=!1,s.currentTime=0,s.progress=0,s.paused=!0,s.began=!1,s.loopBegan=!1,s.changeBegan=!1,s.completed=!1,s.changeCompleted=!1,s.reversePlayback=!1,s.reversed="reverse"===n,s.remaining=s.loop;for(var r=u=(t=s.children).length;r--;)s.children[r].reset();(s.reversed&&!0!==s.loop||"alternate"===n&&1===s.loop)&&s.remaining++,g(s.reversed?s.duration:0)},s._onDocumentVisibility=p,s.set=function(n,t){return J(n,t),s},s.tick=function(n){i=n,r||(r=i),M((i+(e-r))*un.speed)},s.seek=function(n){M(h(n))},s.pause=function(){s.paused=!0,p()},s.play=function(){s.paused&&(s.completed&&s.reset(),s.paused=!1,tn.push(s),p(),rn())},s.reverse=function(){l(),s.completed=!s.reversed,p()},s.restart=function(){s.reset(),s.play()},s.remove=function(n){on(W(n),s)},s.reset(),s.autoplay&&s.play(),s}function an(n,t){for(var r=t.length;r--;)k(n,t[r].animatable.target)&&t.splice(r,1)}function on(n,t){var r=t.animations,e=t.children;an(n,r);for(var i=e.length;i--;){var u=e[i],a=u.animations;an(n,a),a.length||u.children.length||e.splice(i,1)}r.length||e.length||t.pause()}un.version="3.2.1",un.speed=1,un.suspendWhenDocumentHidden=!0,un.running=tn,un.remove=function(n){for(var t=W(n),r=tn.length;r--;)on(t,tn[r])},un.get=D,un.set=J,un.convertPx=z,un.path=function(n,t){var r=d.str(n)?A(n)[0]:n,e=t||100;return function(n){return{property:n,el:r,svg:q(r),totalLength:T(r)*(e/100)}}},un.setDashoffset=function(n){var t=T(n);return n.setAttribute("stroke-dasharray",t),t},un.stagger=function(n,t){void 0===t&&(t={});var r=t.direction||"normal",e=t.easing?x(t.easing):null,i=t.grid,u=t.axis,a=t.from||0,o="first"===a,c="center"===a,f="last"===a,s=d.arr(n),v=s?parseFloat(n[0]):parseFloat(n),l=s?parseFloat(n[1]):0,h=E(s?n[1]:n)||0,p=t.start||0+(s?v:0),m=[],g=0;return function(n,t,d){if(o&&(a=0),c&&(a=(d-1)/2),f&&(a=d-1),!m.length){for(var b=0;b<d;b++){if(i){var M=c?(i[0]-1)/2:a%i[0],y=c?(i[1]-1)/2:Math.floor(a/i[0]),w=M-b%i[0],x=y-Math.floor(b/i[0]),A=Math.sqrt(w*w+x*x);"x"===u&&(A=-w),"y"===u&&(A=-x),m.push(A)}else m.push(Math.abs(a-b));g=Math.max.apply(Math,m)}e&&(m=m.map((function(n){return e(n/g)*g}))),"reverse"===r&&(m=m.map((function(n){return u?n<0?-1*n:-n:Math.abs(g-n)})))}return p+(s?(l-v)/g:v)*(Math.round(100*m[t])/100)+h}},un.timeline=function(n){void 0===n&&(n={});var t=un(n);return t.duration=0,t.add=function(r,e){var i=tn.indexOf(t),u=t.children;function a(n){n.passThrough=!0}i>-1&&tn.splice(i,1);for(var o=0;o<u.length;o++)a(u[o]);var f=j(r,C(c,n));f.targets=f.targets||n.targets;var s=t.duration;f.autoplay=!1,f.direction=t.direction,f.timelineOffset=d.und(e)?s:X(e,s),a(t),t.seek(f.timelineOffset);var v=un(f);a(v),u.push(v);var l=U(u,n);return t.delay=l.delay,t.endDelay=l.endDelay,t.duration=l.duration,t.seek(0),t.reset(),t.autoplay&&t.play(),t},t},un.easing=x,un.penner=w,un.random=function(n,t){return Math.floor(Math.random()*(t-n+1))+n};const cn=class{constructor(r){n(this,r),this.dsoToggle=t(this,"dsoToggle",7),this.animationInstantiated=t(this,"animationInstantiated",7),this.open=void 0,this.enableAnimation=!1,this.minimumHeight=void 0,this.animationReady=!1}toggleOpen(){this.enableAnimation&&this.activateAnimation()}toggleEnableAnimation(n){var t;n?(this.prepareAnimationResizeObserver(),this.activateObserver()):(null===(t=this.resizeObserver)||void 0===t||t.disconnect(),delete this.animeInstance,this.host.removeAttribute("style"))}async getAnimeInstance(){return this.animeInstance}async getBodyHeight(){return this.bodyHeight}componentWillLoad(){this.enableAnimation&&this.prepareAnimationResizeObserver()}componentDidLoad(){this.activateObserver()}activateObserver(){var n;const t=this.host.querySelector('[slot="expandable-content"]');t&&(null===(n=this.resizeObserver)||void 0===n||n.observe(t))}disconnectedCallback(){var n;null===(n=this.resizeObserver)||void 0===n||n.disconnect()}render(){return r(e,{"aria-hidden":this.open?"false":"true",class:u({"dso-animate-ready":this.enableAnimation&&this.animationReady,"dso-hide":!this.enableAnimation&&!this.open})},r("slot",{name:"expandable-content"}))}prepareAnimationResizeObserver(){this.resizeObserver=new ResizeObserver(a((([n])=>{const t=n.target.getBoundingClientRect().height;this.bodyHeight!==t&&(this.bodyHeight=t),this.instantiateAnimation()}),150))}instantiateAnimation(){var n;this.animeInstance=un({targets:this.host,height:null!==(n=this.minimumHeight)&&void 0!==n?n:0,easing:"cubicBezier(0.4, 0, 0.2, 1)",duration:260,autoplay:!1,direction:"normal",begin:()=>{this.host&&this.open&&(this.host.style.visibility="",this.host.style.position="",this.host.style.bottom="")},complete:()=>{this.host&&(this.host.style.height="",this.open||(this.host.style.visibility="hidden",this.host.style.position="absolute",this.host.style.bottom="100%"))}}),this.open||(this.animeInstance.reverse(),this.animeInstance.play()),this.host&&(this.host.style.height=""),this.animationReady=!!this.animeInstance,this.animationInstantiated.emit()}activateAnimation(){this.animeInstance&&(this.animeInstance.progress>0&&this.animeInstance.progress<100?this.animeInstance.reverse():this.open?(this.animeInstance.direction="reverse",this.animeInstance.play()):(this.animeInstance.direction="normal",this.animeInstance.play()))}get host(){return i(this)}static get watchers(){return{open:["toggleOpen"],enableAnimation:["toggleEnableAnimation"]}}};cn.style=":host{display:block;overflow-y:hidden}:host(.dso-hide){display:none}:host(:not(.dso-animate-ready)){position:absolute;visibility:hidden}:host([open]){position:inherit;visibility:inherit}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";export{cn as dso_expandable}
+import{r as n,c as t,h as r,H as e,g as i}from"./p-98fd1658.js";import{c as u}from"./p-6a1980b4.js";import{d as o}from"./p-1805f5b0.js";var a={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},c={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},f=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],s={CSS:{},springs:{}};function v(n,t,r){return Math.min(Math.max(n,t),r)}function h(n,t){return n.indexOf(t)>-1}function l(n,t){return n.apply(null,t)}var d={arr:function(n){return Array.isArray(n)},obj:function(n){return h(Object.prototype.toString.call(n),"Object")},pth:function(n){return d.obj(n)&&n.hasOwnProperty("totalLength")},svg:function(n){return n instanceof SVGElement},inp:function(n){return n instanceof HTMLInputElement},dom:function(n){return n.nodeType||d.svg(n)},str:function(n){return"string"==typeof n},fnc:function(n){return"function"==typeof n},und:function(n){return void 0===n},nil:function(n){return d.und(n)||null===n},hex:function(n){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(n)},rgb:function(n){return/^rgb/.test(n)},hsl:function(n){return/^hsl/.test(n)},col:function(n){return d.hex(n)||d.rgb(n)||d.hsl(n)},key:function(n){return!a.hasOwnProperty(n)&&!c.hasOwnProperty(n)&&"targets"!==n&&"keyframes"!==n}};function p(n){var t=/\(([^)]+)\)/.exec(n);return t?t[1].split(",").map((function(n){return parseFloat(n)})):[]}function m(n,t){var r=p(n),e=v(d.und(r[0])?1:r[0],.1,100),i=v(d.und(r[1])?100:r[1],.1,100),u=v(d.und(r[2])?10:r[2],.1,100),o=v(d.und(r[3])?0:r[3],.1,100),a=Math.sqrt(i/e),c=u/(2*Math.sqrt(i*e)),f=c<1?a*Math.sqrt(1-c*c):0,h=c<1?(c*a-o)/f:-o+a;function l(n){var r=t?t*n/1e3:n;return r=c<1?Math.exp(-r*c*a)*(1*Math.cos(f*r)+h*Math.sin(f*r)):(1+h*r)*Math.exp(-r*a),0===n||1===n?n:1-r}return t?l:function(){var t=s.springs[n];if(t)return t;for(var r=1/6,e=0,i=0;;)if(1===l(e+=r)){if(++i>=16)break}else i=0;var u=e*r*1e3;return s.springs[n]=u,u}}function g(n){return void 0===n&&(n=10),function(t){return Math.ceil(v(t,1e-6,1)*n)*(1/n)}}var b,M,y=function(){var n=.1;function t(n,t){return 1-3*t+3*n}function r(n,t){return 3*t-6*n}function e(n){return 3*n}function i(n,i,u){return((t(i,u)*n+r(i,u))*n+e(i))*n}function u(n,i,u){return 3*t(i,u)*n*n+2*r(i,u)*n+e(i)}return function(t,r,e,o){if(0<=t&&t<=1&&0<=e&&e<=1){var a=new Float32Array(11);if(t!==r||e!==o)for(var c=0;c<11;++c)a[c]=i(c*n,t,e);return function(c){return t===r&&e===o||0===c||1===c?c:i(function(r){for(var o=0,c=1;10!==c&&a[c]<=r;++c)o+=n;--c;var f=o+(r-a[c])/(a[c+1]-a[c])*n,s=u(f,t,e);return s>=.001?function(n,t,r,e){for(var o=0;o<4;++o){var a=u(t,r,e);if(0===a)return t;t-=(i(t,r,e)-n)/a}return t}(r,f,t,e):0===s?f:function(n,t,r,e,u){var o,a,c=0;do{(o=i(a=t+(r-t)/2,e,u)-n)>0?r=a:t=a}while(Math.abs(o)>1e-7&&++c<10);return a}(r,o,o+n,t,e)}(c),r,o)}}}}(),w=(b={linear:function(){return function(n){return n}}},M={Sine:function(){return function(n){return 1-Math.cos(n*Math.PI/2)}},Circ:function(){return function(n){return 1-Math.sqrt(1-n*n)}},Back:function(){return function(n){return n*n*(3*n-2)}},Bounce:function(){return function(n){for(var t,r=4;n<((t=Math.pow(2,--r))-1)/11;);return 1/Math.pow(4,3-r)-7.5625*Math.pow((3*t-2)/22-n,2)}},Elastic:function(n,t){void 0===n&&(n=1),void 0===t&&(t=.5);var r=v(n,1,10),e=v(t,.1,2);return function(n){return 0===n||1===n?n:-r*Math.pow(2,10*(n-1))*Math.sin((n-1-e/(2*Math.PI)*Math.asin(1/r))*(2*Math.PI)/e)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach((function(n,t){M[n]=function(){return function(n){return Math.pow(n,t+2)}}})),Object.keys(M).forEach((function(n){var t=M[n];b["easeIn"+n]=t,b["easeOut"+n]=function(n,r){return function(e){return 1-t(n,r)(1-e)}},b["easeInOut"+n]=function(n,r){return function(e){return e<.5?t(n,r)(2*e)/2:1-t(n,r)(-2*e+2)/2}},b["easeOutIn"+n]=function(n,r){return function(e){return e<.5?(1-t(n,r)(1-2*e))/2:(t(n,r)(2*e-1)+1)/2}}})),b);function x(n,t){if(d.fnc(n))return n;var r=n.split("(")[0],e=w[r],i=p(n);switch(r){case"spring":return m(n,t);case"cubicBezier":return l(y,i);case"steps":return l(g,i);default:return l(e,i)}}function A(n){try{return document.querySelectorAll(n)}catch(n){return}}function F(n,t){for(var r=n.length,e=arguments.length>=2?arguments[1]:void 0,i=[],u=0;u<r;u++)if(u in n){var o=n[u];t.call(e,o,u,n)&&i.push(o)}return i}function O(n){return n.reduce((function(n,t){return n.concat(d.arr(t)?O(t):t)}),[])}function I(n){return d.arr(n)?n:(d.str(n)&&(n=A(n)||n),n instanceof NodeList||n instanceof HTMLCollection?[].slice.call(n):[n])}function k(n,t){return n.some((function(n){return n===t}))}function B(n){var t={};for(var r in n)t[r]=n[r];return t}function C(n,t){var r=B(n);for(var e in n)r[e]=t.hasOwnProperty(e)?t[e]:n[e];return r}function j(n,t){var r=B(n);for(var e in t)r[e]=d.und(n[e])?t[e]:n[e];return r}function E(n){var t=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?(%|px|pt|em|rem|in|cm|mm|ex|ch|pc|vw|vh|vmin|vmax|deg|rad|turn)?$/.exec(n);if(t)return t[1]}function L(n,t){return d.fnc(n)?n(t.target,t.id,t.total):n}function N(n,t){return n.getAttribute(t)}function $(n,t,r){if(k([r,"deg","rad","turn"],E(t)))return t;var e=s.CSS[t+r];if(!d.und(e))return e;var i=document.createElement(n.tagName),u=n.parentNode&&n.parentNode!==document?n.parentNode:document.body;u.appendChild(i),i.style.position="absolute",i.style.width=100+r;var o=100/i.offsetWidth;u.removeChild(i);var a=o*parseFloat(t);return s.CSS[t+r]=a,a}function z(n,t,r){if(t in n.style){var e=t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase(),i=n.style[t]||getComputedStyle(n).getPropertyValue(e)||"0";return r?$(n,i,r):i}}function H(n,t){return d.dom(n)&&!d.inp(n)&&(!d.nil(N(n,t))||d.svg(n)&&n[t])?"attribute":d.dom(n)&&k(f,t)?"transform":d.dom(n)&&"transform"!==t&&z(n,t)?"css":null!=n[t]?"object":void 0}function S(n){if(d.dom(n)){for(var t,r=n.style.transform||"",e=/(\w+)\(([^)]*)\)/g,i=new Map;t=e.exec(r);)i.set(t[1],t[2]);return i}}function D(n,t,r,e){switch(H(n,t)){case"transform":return function(n,t,r,e){var i=h(t,"scale")?1:0+function(n){return h(n,"translate")||"perspective"===n?"px":h(n,"rotate")||h(n,"skew")?"deg":void 0}(t),u=S(n).get(t)||i;return r&&(r.transforms.list.set(t,u),r.transforms.last=t),e?$(n,u,e):u}(n,t,e,r);case"css":return z(n,t,r);case"attribute":return N(n,t);default:return n[t]||0}}function X(n,t){var r=/^(\*=|\+=|-=)/.exec(n);if(!r)return n;var e=E(n)||0,i=parseFloat(t),u=parseFloat(n.replace(r[0],""));switch(r[0][0]){case"+":return i+u+e;case"-":return i-u+e;case"*":return i*u+e}}function Y(n,t){if(d.col(n))return function(n){return d.rgb(n)?(r=/rgb\((\d+,\s*[\d]+,\s*[\d]+)\)/g.exec(t=n))?"rgba("+r[1]+",1)":t:d.hex(n)?function(n){var t=n.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(function(n,t,r,e){return t+t+r+r+e+e})),r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);return"rgba("+parseInt(r[1],16)+","+parseInt(r[2],16)+","+parseInt(r[3],16)+",1)"}(n):d.hsl(n)?function(n){var t,r,e,i=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(n)||/hsla\((\d+),\s*([\d.]+)%,\s*([\d.]+)%,\s*([\d.]+)\)/g.exec(n),u=parseInt(i[1],10)/360,o=parseInt(i[2],10)/100,a=parseInt(i[3],10)/100,c=i[4]||1;function f(n,t,r){return r<0&&(r+=1),r>1&&(r-=1),r<1/6?n+6*(t-n)*r:r<.5?t:r<2/3?n+(t-n)*(2/3-r)*6:n}if(0==o)t=r=e=a;else{var s=a<.5?a*(1+o):a+o-a*o,v=2*a-s;t=f(v,s,u+1/3),r=f(v,s,u),e=f(v,s,u-1/3)}return"rgba("+255*t+","+255*r+","+255*e+","+c+")"}(n):void 0;var t,r}(n);if(/\s/g.test(n))return n;var r=E(n),e=r?n.substr(0,n.length-r.length):n;return t?e+t:e}function Z(n,t){return Math.sqrt(Math.pow(t.x-n.x,2)+Math.pow(t.y-n.y,2))}function Q(n){for(var t,r=n.points,e=0,i=0;i<r.numberOfItems;i++){var u=r.getItem(i);i>0&&(e+=Z(t,u)),t=u}return e}function T(n){if(n.getTotalLength)return n.getTotalLength();switch(n.tagName.toLowerCase()){case"circle":return function(n){return 2*Math.PI*N(n,"r")}(n);case"rect":return function(n){return 2*N(n,"width")+2*N(n,"height")}(n);case"line":return function(n){return Z({x:N(n,"x1"),y:N(n,"y1")},{x:N(n,"x2"),y:N(n,"y2")})}(n);case"polyline":return Q(n);case"polygon":return function(n){var t=n.points;return Q(n)+Z(t.getItem(t.numberOfItems-1),t.getItem(0))}(n)}}function q(n,t){var r=t||{},e=r.el||function(n){for(var t=n.parentNode;d.svg(t)&&d.svg(t.parentNode);)t=t.parentNode;return t}(n),i=e.getBoundingClientRect(),u=N(e,"viewBox"),o=i.width,a=i.height,c=r.viewBox||(u?u.split(" "):[0,0,o,a]);return{el:e,viewBox:c,x:c[0]/1,y:c[1]/1,w:o,h:a,vW:c[2],vH:c[3]}}function P(n,t,r){function e(r){return void 0===r&&(r=0),n.el.getPointAtLength(t+r>=1?t+r:0)}var i=q(n.el,n.svg),u=e(),o=e(-1),a=e(1),c=r?1:i.w/i.vW,f=r?1:i.h/i.vH;switch(n.property){case"x":return(u.x-i.x)*c;case"y":return(u.y-i.y)*f;case"angle":return 180*Math.atan2(a.y-o.y,a.x-o.x)/Math.PI}}function R(n,t){var r=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,e=Y(d.pth(n)?n.totalLength:n,t)+"";return{original:e,numbers:e.match(r)?e.match(r).map(Number):[0],strings:d.str(n)||t?e.split(r):[]}}function W(n){return F(n?O(d.arr(n)?n.map(I):I(n)):[],(function(n,t,r){return r.indexOf(n)===t}))}function G(n){var t=W(n);return t.map((function(n,r){return{target:n,id:r,total:t.length,transforms:{list:S(n)}}}))}function V(n,t){var r=B(t);if(/^spring/.test(r.easing)&&(r.duration=m(r.easing)),d.arr(n)){var e=n.length;2!==e||d.obj(n[0])?d.fnc(t.duration)||(r.duration=t.duration/e):n={value:n}}var i=d.arr(n)?n:[n];return i.map((function(n,r){var e=d.obj(n)&&!d.pth(n)?n:{value:n};return d.und(e.delay)&&(e.delay=r?0:t.delay),d.und(e.endDelay)&&(e.endDelay=r===i.length-1?t.endDelay:0),e})).map((function(n){return j(n,r)}))}var _={css:function(n,t,r){return n.style[t]=r},attribute:function(n,t,r){return n.setAttribute(t,r)},object:function(n,t,r){return n[t]=r},transform:function(n,t,r,e,i){if(e.list.set(t,r),t===e.last||i){var u="";e.list.forEach((function(n,t){u+=t+"("+n+") "})),n.style.transform=u}}};function J(n,t){G(n).forEach((function(n){for(var r in t){var e=L(t[r],n),i=n.target,u=E(e),o=D(i,r,u,n),a=X(Y(e,u||E(o)),o),c=H(i,r);_[c](i,r,a,n.transforms,!0)}}))}function K(n,t){return F(O(n.map((function(n){return t.map((function(t){return function(n,t){var r=H(n.target,t.name);if(r){var e=function(n,t){var r;return n.tweens.map((function(e){var i=function(n,t){var r={};for(var e in n){var i=L(n[e],t);d.arr(i)&&1===(i=i.map((function(n){return L(n,t)}))).length&&(i=i[0]),r[e]=i}return r.duration=parseFloat(r.duration),r.delay=parseFloat(r.delay),r}(e,t),u=i.value,o=d.arr(u)?u[1]:u,a=E(o),c=D(t.target,n.name,a,t),f=r?r.to.original:c,s=d.arr(u)?u[0]:f,v=E(s)||E(c),h=a||v;return d.und(o)&&(o=f),i.from=R(s,h),i.to=R(X(o,s),h),i.start=r?r.end:0,i.end=i.start+i.delay+i.duration+i.endDelay,i.easing=x(i.easing,i.duration),i.isPath=d.pth(u),i.isPathTargetInsideSVG=i.isPath&&d.svg(t.target),i.isColor=d.col(i.from.original),i.isColor&&(i.round=1),r=i,i}))}(t,n),i=e[e.length-1];return{type:r,property:t.name,animatable:n,tweens:e,duration:i.end,delay:e[0].delay,endDelay:i.endDelay}}}(n,t)}))}))),(function(n){return!d.und(n)}))}function U(n,t){var r=n.length,e=function(n){return n.timelineOffset?n.timelineOffset:0},i={};return i.duration=r?Math.max.apply(Math,n.map((function(n){return e(n)+n.duration}))):t.duration,i.delay=r?Math.min.apply(Math,n.map((function(n){return e(n)+n.delay}))):t.delay,i.endDelay=r?i.duration-Math.max.apply(Math,n.map((function(n){return e(n)+n.duration-n.endDelay}))):t.endDelay,i}var nn=0,tn=[],rn=function(){var n;function t(r){for(var e=tn.length,i=0;i<e;){var u=tn[i];u.paused?(tn.splice(i,1),e--):(u.tick(r),i++)}n=i>0?requestAnimationFrame(t):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",(function(){un.suspendWhenDocumentHidden&&(en()?n=cancelAnimationFrame(n):(tn.forEach((function(n){return n._onDocumentVisibility()})),rn()))})),function(){n||en()&&un.suspendWhenDocumentHidden||!(tn.length>0)||(n=requestAnimationFrame(t))}}();function en(){return!!document&&document.hidden}function un(n){void 0===n&&(n={});var t,r=0,e=0,i=0,u=0,o=null;function f(n){var t=window.Promise&&new Promise((function(n){return o=n}));return n.finished=t,t}var s=function(n){var t=C(a,n),r=C(c,n),e=function(n,t){var r=[],e=t.keyframes;for(var i in e&&(t=j(function(n){for(var t=F(O(n.map((function(n){return Object.keys(n)}))),(function(n){return d.key(n)})).reduce((function(n,t){return n.indexOf(t)<0&&n.push(t),n}),[]),r={},e=function(e){var i=t[e];r[i]=n.map((function(n){var t={};for(var r in n)d.key(r)?r==i&&(t.value=n[r]):t[r]=n[r];return t}))},i=0;i<t.length;i++)e(i);return r}(e),t)),t)d.key(i)&&r.push({name:i,tweens:V(t[i],n)});return r}(r,n),i=G(n.targets),u=K(i,e),o=U(u,r),f=nn;return nn++,j(t,{id:f,children:[],animatables:i,animations:u,duration:o.duration,delay:o.delay,endDelay:o.endDelay})}(n);function h(){var n=s.direction;"alternate"!==n&&(s.direction="normal"!==n?"normal":"reverse"),s.reversed=!s.reversed,t.forEach((function(n){return n.reversed=s.reversed}))}function l(n){return s.reversed?s.duration-n:n}function p(){r=0,e=l(s.currentTime)*(1/un.speed)}function m(n,t){t&&t.seek(n-t.timelineOffset)}function g(n){for(var t=0,r=s.animations,e=r.length;t<e;){var i=r[t],u=i.animatable,o=i.tweens,a=o.length-1,c=o[a];a&&(c=F(o,(function(t){return n<t.end}))[0]||c);for(var f=v(n-c.start-c.delay,0,c.duration)/c.duration,h=isNaN(f)?1:c.easing(f),l=c.to.strings,d=c.round,p=[],m=c.to.numbers.length,g=void 0,b=0;b<m;b++){var M=void 0,y=c.to.numbers[b],w=c.from.numbers[b]||0;M=c.isPath?P(c.value,h*y,c.isPathTargetInsideSVG):w+h*(y-w),d&&(c.isColor&&b>2||(M=Math.round(M*d)/d)),p.push(M)}var x=l.length;if(x){g=l[0];for(var A=0;A<x;A++){var O=l[A+1],I=p[A];isNaN(I)||(g+=O?I+O:I+" ")}}else g=p[0];_[i.type](u.target,i.property,g,u.transforms),i.currentValue=g,t++}}function b(n){s[n]&&!s.passThrough&&s[n](s)}function M(n){var a=s.duration,c=s.delay,d=a-s.endDelay,p=l(n);s.progress=v(p/a*100,0,100),s.reversePlayback=p<s.currentTime,t&&function(n){if(s.reversePlayback)for(var r=u;r--;)m(n,t[r]);else for(var e=0;e<u;e++)m(n,t[e])}(p),!s.began&&s.currentTime>0&&(s.began=!0,b("begin")),!s.loopBegan&&s.currentTime>0&&(s.loopBegan=!0,b("loopBegin")),p<=c&&0!==s.currentTime&&g(0),(p>=d&&s.currentTime!==a||!a)&&g(a),p>c&&p<d?(s.changeBegan||(s.changeBegan=!0,s.changeCompleted=!1,b("changeBegin")),b("change"),g(p)):s.changeBegan&&(s.changeCompleted=!0,s.changeBegan=!1,b("changeComplete")),s.currentTime=v(p,0,a),s.began&&b("update"),n>=a&&(e=0,s.remaining&&!0!==s.remaining&&s.remaining--,s.remaining?(r=i,b("loopComplete"),s.loopBegan=!1,"alternate"===s.direction&&h()):(s.paused=!0,s.completed||(s.completed=!0,b("loopComplete"),b("complete"),!s.passThrough&&"Promise"in window&&(o(),f(s)))))}return f(s),s.reset=function(){var n=s.direction;s.passThrough=!1,s.currentTime=0,s.progress=0,s.paused=!0,s.began=!1,s.loopBegan=!1,s.changeBegan=!1,s.completed=!1,s.changeCompleted=!1,s.reversePlayback=!1,s.reversed="reverse"===n,s.remaining=s.loop;for(var r=u=(t=s.children).length;r--;)s.children[r].reset();(s.reversed&&!0!==s.loop||"alternate"===n&&1===s.loop)&&s.remaining++,g(s.reversed?s.duration:0)},s._onDocumentVisibility=p,s.set=function(n,t){return J(n,t),s},s.tick=function(n){i=n,r||(r=i),M((i+(e-r))*un.speed)},s.seek=function(n){M(l(n))},s.pause=function(){s.paused=!0,p()},s.play=function(){s.paused&&(s.completed&&s.reset(),s.paused=!1,tn.push(s),p(),rn())},s.reverse=function(){h(),s.completed=!s.reversed,p()},s.restart=function(){s.reset(),s.play()},s.remove=function(n){an(W(n),s)},s.reset(),s.autoplay&&s.play(),s}function on(n,t){for(var r=t.length;r--;)k(n,t[r].animatable.target)&&t.splice(r,1)}function an(n,t){var r=t.animations,e=t.children;on(n,r);for(var i=e.length;i--;){var u=e[i],o=u.animations;on(n,o),o.length||u.children.length||e.splice(i,1)}r.length||e.length||t.pause()}un.version="3.2.1",un.speed=1,un.suspendWhenDocumentHidden=!0,un.running=tn,un.remove=function(n){for(var t=W(n),r=tn.length;r--;)an(t,tn[r])},un.get=D,un.set=J,un.convertPx=$,un.path=function(n,t){var r=d.str(n)?A(n)[0]:n,e=t||100;return function(n){return{property:n,el:r,svg:q(r),totalLength:T(r)*(e/100)}}},un.setDashoffset=function(n){var t=T(n);return n.setAttribute("stroke-dasharray",t),t},un.stagger=function(n,t){void 0===t&&(t={});var r=t.direction||"normal",e=t.easing?x(t.easing):null,i=t.grid,u=t.axis,o=t.from||0,a="first"===o,c="center"===o,f="last"===o,s=d.arr(n),v=s?parseFloat(n[0]):parseFloat(n),h=s?parseFloat(n[1]):0,l=E(s?n[1]:n)||0,p=t.start||0+(s?v:0),m=[],g=0;return function(n,t,d){if(a&&(o=0),c&&(o=(d-1)/2),f&&(o=d-1),!m.length){for(var b=0;b<d;b++){if(i){var M=c?(i[0]-1)/2:o%i[0],y=c?(i[1]-1)/2:Math.floor(o/i[0]),w=M-b%i[0],x=y-Math.floor(b/i[0]),A=Math.sqrt(w*w+x*x);"x"===u&&(A=-w),"y"===u&&(A=-x),m.push(A)}else m.push(Math.abs(o-b));g=Math.max.apply(Math,m)}e&&(m=m.map((function(n){return e(n/g)*g}))),"reverse"===r&&(m=m.map((function(n){return u?n<0?-1*n:-n:Math.abs(g-n)})))}return p+(s?(h-v)/g:v)*(Math.round(100*m[t])/100)+l}},un.timeline=function(n){void 0===n&&(n={});var t=un(n);return t.duration=0,t.add=function(r,e){var i=tn.indexOf(t),u=t.children;function o(n){n.passThrough=!0}i>-1&&tn.splice(i,1);for(var a=0;a<u.length;a++)o(u[a]);var f=j(r,C(c,n));f.targets=f.targets||n.targets;var s=t.duration;f.autoplay=!1,f.direction=t.direction,f.timelineOffset=d.und(e)?s:X(e,s),o(t),t.seek(f.timelineOffset);var v=un(f);o(v),u.push(v);var h=U(u,n);return t.delay=h.delay,t.endDelay=h.endDelay,t.duration=h.duration,t.seek(0),t.reset(),t.autoplay&&t.play(),t},t},un.easing=x,un.penner=w,un.random=function(n,t){return Math.floor(Math.random()*(t-n+1))+n};const cn=class{constructor(r){n(this,r),this.dsoToggle=t(this,"dsoToggle",3),this.animationInstantiated=t(this,"animationInstantiated",7),this.open=void 0,this.enableAnimation=!1,this.minimumHeight=void 0,this.animationReady=!1}toggleOpen(){this.enableAnimation&&this.activateAnimation()}toggleEnableAnimation(n){var t;n?(this.prepareAnimationResizeObserver(),this.activateObserver()):(null===(t=this.resizeObserver)||void 0===t||t.disconnect(),delete this.animeInstance,this.host.removeAttribute("style"))}async getAnimeInstance(){return this.animeInstance}async getBodyHeight(){return this.bodyHeight}componentWillLoad(){this.enableAnimation&&this.prepareAnimationResizeObserver()}componentDidLoad(){this.activateObserver()}activateObserver(){var n;const t=this.host.querySelector('[slot="expandable-content"]');t&&(null===(n=this.resizeObserver)||void 0===n||n.observe(t))}disconnectedCallback(){var n;null===(n=this.resizeObserver)||void 0===n||n.disconnect()}render(){return r(e,{"aria-hidden":this.open?"false":"true",class:u({"dso-animate-ready":this.enableAnimation&&this.animationReady,"dso-hide":!this.enableAnimation&&!this.open})},r("slot",{name:"expandable-content"}))}prepareAnimationResizeObserver(){this.resizeObserver=new ResizeObserver(o((([n])=>{if(!n)throw new Error("No entry found");const t=n.target.getBoundingClientRect().height;this.bodyHeight!==t&&(this.bodyHeight=t),this.instantiateAnimation()}),150))}instantiateAnimation(){var n;this.animeInstance=un({targets:this.host,height:null!==(n=this.minimumHeight)&&void 0!==n?n:0,easing:"cubicBezier(0.4, 0, 0.2, 1)",duration:260,autoplay:!1,direction:"normal",begin:()=>{this.host&&this.open&&(this.host.style.visibility="",this.host.style.position="",this.host.style.bottom="")},complete:()=>{this.host&&(this.host.style.height="",this.open||(this.host.style.visibility="hidden",this.host.style.position="absolute",this.host.style.bottom="100%"))}}),this.open||(this.animeInstance.reverse(),this.animeInstance.play()),this.host&&(this.host.style.height=""),this.animationReady=!!this.animeInstance,this.animationInstantiated.emit()}activateAnimation(){this.animeInstance&&(this.animeInstance.progress>0&&this.animeInstance.progress<100?this.animeInstance.reverse():this.open?(this.animeInstance.direction="reverse",this.animeInstance.play()):(this.animeInstance.direction="normal",this.animeInstance.play()))}get host(){return i(this)}static get watchers(){return{open:["toggleOpen"],enableAnimation:["toggleEnableAnimation"]}}};cn.style=":host{display:block;overflow-y:hidden}:host(.dso-hide){display:none}:host(:not(.dso-animate-ready)){position:absolute;visibility:hidden}:host([open]){position:inherit;visibility:inherit}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}";export{cn as dso_expandable}

package/dist/dso-toolkit/{p-5e50b616.entry.js → p-564a5d95.entry.js}

@@ -1 +1 @@
-import{r as t,h as s,H as o,g as i}from"./p-98fd1658.js";import{t as e}from"./p-5950644a.js";import{h as n,c as r}from"./p-452b1234.js";import{v as h}from"./p-5d7f4ff2.js";const a=class{constructor(s){t(this,s),this.focusOutListener=t=>{this.tabbables.includes(t.relatedTarget)||(this.open=!1)},this.keyDownListener=t=>{if(!t.defaultPrevented){switch(t.key){case"ArrowDown":this.tabInPopup(1);break;case"ArrowUp":this.tabInPopup(-1);break;case"Escape":this.escape();break;case" ":t.target instanceof HTMLElement&&t.target.click();break;default:return}t.preventDefault()}},this.escape=()=>{this.button.focus(),this.open=!1},this.open=!1,this.dropdownAlign="left",this.dropdownOptionsOffset=2,this.checkable=!1,this.boundary=void 0,this.strategy="auto"}watchPosition(){this.popper&&this.popper.setOptions({placement:"right"===this.dropdownAlign?"bottom-end":"bottom-start"})}watchOptionsOffset(){var t;null===(t=this.popper)||void 0===t||t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper)return;if("absolute"===this.strategy||"fixed"===this.strategy)return void this.popper.setOptions({strategy:this.strategy});let t=this.host;const s=this.boundary||document;for(;t&&t.parentNode!==s;)if(t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement,null!==t&&n(t))return void this.popper.setOptions({strategy:"fixed"});this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement))throw new ReferenceError("Mandatory toggle button not found");return t}get tabbables(){return e(this.host).filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu"),this.button.setAttribute("aria-expanded","false"),this.button.id||(this.button.id=h()),this.button.addEventListener("click",(()=>{this.open=!this.open}));const t=this.host.querySelector(".dso-dropdown-options");if(!t)throw new ReferenceError("Dropdown options not found");t.setAttribute("role","menu"),t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li")))s.setAttribute("role","none")}if(this.popper)return;const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement))throw new Error("dropdown options element is not instanceof HTMLElement");this.popper=r(this.button,s,{placement:"right"===this.dropdownAlign?"bottom-end":"bottom-start",modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:void 0!==this.boundary}]})}componentDidRender(){var t;this.setStrategy(),this.open&&(null===(t=this.popper)||void 0===t||t.update());for(const t of Array.from(this.host.getElementsByTagName("li")))for(const s of e(t))s.setAttribute("role",this.checkable?"menuitemradio":"menuitem"),this.checkable&&s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString());this.host.removeEventListener("keydown",this.keyDownListener),this.button.setAttribute("aria-expanded",this.open?"true":"false"),this.open&&this.host.addEventListener("keydown",this.keyDownListener),this.tabbables.forEach((t=>{t.removeEventListener("click",this.escape),this.open&&t.addEventListener("click",this.escape)}))}disconnectedCallback(){var t;null===(t=this.popper)||void 0===t||t.destroy()}getActiveElement(t=document){const s=t.activeElement;return s?s.shadowRoot?this.getActiveElement(s.shadowRoot):s:null}tabInPopup(t){const s=this.tabbables;let o=s.findIndex((t=>t===this.getActiveElement()))+t;o>=s.length?o=0:o<0&&(o=s.length-1),s[o].focus()}render(){return s(o,{onFocusout:this.focusOutListener,tabindex:this.open?"-1":void 0},s("slot",{name:"toggle"}),s("div",{hidden:!this.open},s("slot",null)))}get host(){return i(this)}static get watchers(){return{dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};a.style=":host(:focus){outline:none}:host{display:inline-block}";export{a as dso_dropdown_menu}
+import{r as t,h as s,H as o,g as i}from"./p-98fd1658.js";import{t as e}from"./p-5950644a.js";import{h as n,c as r}from"./p-452b1234.js";import{v as h}from"./p-5d7f4ff2.js";const a=class{constructor(s){t(this,s),this.focusOutListener=t=>{this.tabbables.includes(t.relatedTarget)||(this.open=!1)},this.keyDownListener=t=>{if(!t.defaultPrevented){switch(t.key){case"ArrowDown":this.tabInPopup(1);break;case"ArrowUp":this.tabInPopup(-1);break;case"Escape":this.escape();break;case" ":t.target instanceof HTMLElement&&t.target.click();break;default:return}t.preventDefault()}},this.escape=()=>{this.button.focus(),this.open=!1},this.open=!1,this.dropdownAlign="left",this.dropdownOptionsOffset=2,this.checkable=!1,this.boundary=void 0,this.strategy="auto"}watchPosition(){this.popper&&this.popper.setOptions({placement:"right"===this.dropdownAlign?"bottom-end":"bottom-start"})}watchOptionsOffset(){var t;null===(t=this.popper)||void 0===t||t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper)return;if("absolute"===this.strategy||"fixed"===this.strategy)return void this.popper.setOptions({strategy:this.strategy});let t=this.host;const s=this.boundary||document;for(;t&&t.parentNode!==s;)if(t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement,null!==t&&n(t))return void this.popper.setOptions({strategy:"fixed"});this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement))throw new ReferenceError("Mandatory toggle button not found");return t}get tabbables(){return e(this.host).filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu"),this.button.setAttribute("aria-expanded","false"),this.button.id||(this.button.id=h()),this.button.addEventListener("click",(()=>{this.open=!this.open}));const t=this.host.querySelector(".dso-dropdown-options");if(!t)throw new ReferenceError("Dropdown options not found");t.setAttribute("role","menu"),t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li")))s.setAttribute("role","none")}if(this.popper)return;const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement))throw new Error("dropdown options element is not instanceof HTMLElement");this.popper=r(this.button,s,{placement:"right"===this.dropdownAlign?"bottom-end":"bottom-start",modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:void 0!==this.boundary}]})}componentDidRender(){var t;this.setStrategy(),this.open&&(null===(t=this.popper)||void 0===t||t.update());for(const t of Array.from(this.host.getElementsByTagName("li")))for(const s of e(t))s.setAttribute("role",this.checkable?"menuitemradio":"menuitem"),this.checkable&&s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString());this.host.removeEventListener("keydown",this.keyDownListener),this.button.setAttribute("aria-expanded",this.open?"true":"false"),this.open&&this.host.addEventListener("keydown",this.keyDownListener),this.tabbables.forEach((t=>{t.removeEventListener("click",this.escape),this.open&&t.addEventListener("click",this.escape)}))}disconnectedCallback(){var t;null===(t=this.popper)||void 0===t||t.destroy()}getActiveElement(t=document){const s=t.activeElement;return s?s.shadowRoot?this.getActiveElement(s.shadowRoot):s:null}tabInPopup(t){var s;const o=this.tabbables;let i=o.findIndex((t=>t===this.getActiveElement()))+t;i>=o.length?i=0:i<0&&(i=o.length-1),null===(s=o[i])||void 0===s||s.focus()}render(){return s(o,{onFocusout:this.focusOutListener,tabindex:this.open?"-1":void 0},s("slot",{name:"toggle"}),s("div",{hidden:!this.open},s("slot",null)))}get host(){return i(this)}static get watchers(){return{dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};a.style=":host(:focus){outline:none}:host{display:inline-block}";export{a as dso_dropdown_menu}