@dso-toolkit/core 88.1.0 → 88.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/bundle/dso-document-component.js +1 -1
  2. package/dist/bundle/dso-list-button.js +1 -1
  3. package/dist/bundle/dso-map-controls.js +1 -1
  4. package/dist/bundle/dso-ozon-content.js +1 -1
  5. package/dist/bundle/dso-table.js +1 -1
  6. package/dist/bundle/dso-viewer-grid.js +1 -1
  7. package/dist/bundle/dsot-document-component-demo.js +3 -3
  8. package/dist/bundle/{p-B8nbVKJr.js → p-ChdQ7Urg.js} +3 -3
  9. package/dist/bundle/{p-B8nbVKJr.js.map → p-ChdQ7Urg.js.map} +1 -1
  10. package/dist/bundle/{p-DugmH51O.js → p-CuUjEAKj.js} +5 -5
  11. package/dist/bundle/{p-DugmH51O.js.map → p-CuUjEAKj.js.map} +1 -1
  12. package/dist/bundle/{p-PE5H8duf.js → p-DegYTrRA.js} +5 -5
  13. package/dist/bundle/{p-PE5H8duf.js.map → p-DegYTrRA.js.map} +1 -1
  14. package/dist/cjs/dso-alert_7.cjs.entry.js +3 -3
  15. package/dist/cjs/dso-annotation-locatie_2.cjs.entry.js +1 -1
  16. package/dist/cjs/dso-list-button.cjs.entry.js +1 -1
  17. package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
  18. package/dist/cjs/dso-viewer-grid.cjs.entry.js +1 -1
  19. package/dist/collection/components/document-component/document-component.css +1 -1
  20. package/dist/collection/components/list-button/list-button.css +1 -1
  21. package/dist/collection/components/map-controls/map-controls.css +1 -1
  22. package/dist/collection/components/ozon-content/ozon-content.css +2 -2
  23. package/dist/collection/components/table/table.css +1 -1
  24. package/dist/collection/components/viewer-grid/viewer-grid.css +1 -1
  25. package/dist/components/document-component.js +1 -1
  26. package/dist/components/dso-list-button.js +1 -1
  27. package/dist/components/dso-map-controls.js +1 -1
  28. package/dist/components/dso-viewer-grid.js +1 -1
  29. package/dist/components/ozon-content.js +2 -2
  30. package/dist/components/table.js +1 -1
  31. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  32. package/dist/dso-toolkit/{p-1a258175.entry.js → p-0fffd169.entry.js} +2 -2
  33. package/dist/dso-toolkit/{p-b4ae7950.entry.js → p-2d35b793.entry.js} +2 -2
  34. package/dist/dso-toolkit/{p-5d3ac273.entry.js → p-5e8291ba.entry.js} +2 -2
  35. package/dist/dso-toolkit/{p-96728e50.entry.js → p-7fc764a4.entry.js} +2 -2
  36. package/dist/dso-toolkit/{p-e66785fd.entry.js → p-a58cc4a7.entry.js} +2 -2
  37. package/dist/esm/dso-alert_7.entry.js +3 -3
  38. package/dist/esm/dso-annotation-locatie_2.entry.js +1 -1
  39. package/dist/esm/dso-list-button.entry.js +1 -1
  40. package/dist/esm/dso-map-controls.entry.js +1 -1
  41. package/dist/esm/dso-viewer-grid.entry.js +1 -1
  42. package/package.json +3 -3
  43. /package/dist/dso-toolkit/{p-1a258175.entry.js.map → p-0fffd169.entry.js.map} +0 -0
  44. /package/dist/dso-toolkit/{p-b4ae7950.entry.js.map → p-2d35b793.entry.js.map} +0 -0
  45. /package/dist/dso-toolkit/{p-5d3ac273.entry.js.map → p-5e8291ba.entry.js.map} +0 -0
  46. /package/dist/dso-toolkit/{p-96728e50.entry.js.map → p-7fc764a4.entry.js.map} +0 -0
  47. /package/dist/dso-toolkit/{p-e66785fd.entry.js.map → p-a58cc4a7.entry.js.map} +0 -0
package/dist/dso-toolkit/{p-b4ae7950.entry.js → p-2d35b793.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{h as n,F as e,r as i,d as t,g as o}from"./p-Dx5skKSq.js";import{c as a}from"./p-ChV9xqsO.js";import{d as s}from"./p-baWVwd8J.js";const l=["search","map","document"];const r={map:"Kaart",document:"Document",search:"Zoeken"};const d={small:"smal",medium:"middel",large:"breed"};const c=({className:e,onClick:i,label:t,icon:o})=>n("dso-icon-button",{variant:"map",class:e,onDsoClick:i,icon:o,label:t});const p=({shrink:e,expand:i,size:t,panelLabel:o,placement:a})=>{const s=[];if(t!=="small"){s.push(n(c,{onClick:e,label:`${o} smaller maken`,icon:a==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(t!=="large"){s.push(n(c,{onClick:i,label:`${o} breder maken`,icon:a==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",o.toLocaleLowerCase(),": ",d[t]),s)};const m=({tabView:e,panelSize:i,shrinkDocumentPanel:t,expandDocumentPanel:o,dsoDocumentPanelSizeChangeAnimationEnd:a})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){a.emit({currentSize:i})}}},!e&&n(p,{panelLabel:"Documentpaneel",size:i,expand:o,shrink:t,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const b=({open:i,title:t,ref:o,dsoCloseFilterPanel:a})=>n("dialog",{class:"filter-panel",ref:o},i&&n(e,null,t&&n("h3",null,t),n("dso-icon-button",{class:"dso-close",icon:"times",variant:"tertiary",label:"Sluiten",onDsoClick:a}),n("slot",{name:"filter-panel"})));const h=({tabView:e,mainSize:i,documentPanelOpen:t,mainPanelExpanded:o,mainPanelHidden:s,toggleMainPanel:l,dsoMainSizeChangeAnimationEnd:r})=>n("div",{class:a("dso-main-panel",{compact:!e&&t&&!o,contracted:!e&&!t&&!o,expanded:!e&&t&&o,collapsed:s}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){r.emit({currentSize:i})}}},!e&&t&&n("div",{class:"toggle-button"},n("dso-icon-button",{variant:"map",label:`Zoeken paneel ${s?"tonen":"verbergen"}`,icon:s?"chevron-right":"chevron-left",onDsoClick:l})),n("div",{class:a("content",{invisible:s})},n("slot",{name:"main"})));const v=({ref:e,dsoCloseOverlay:i})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();i(n)}},n("dso-icon-button",{class:"overlay-close-button",icon:"times",variant:"tertiary",label:"Sluiten",onDsoClick:i}),n("slot",{name:"overlay"}));const x=()=>`*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host .overlay {\n block-size: calc(100% - 32px);\n margin-block: 16px;\n margin-inline: auto 16px;\n}\n:host .dso-main-panel {\n transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;\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 inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n border: 0;\n overflow: hidden;\n clip-path: rect(0 0 0 0);\n}\n\n.overlay-close-button {\n position: absolute;\n line-height: 1;\n inset-block-start: 8px;\n inset-inline-end: 16px;\n}\n\n.content.invisible {\n visibility: hidden;\n}\n\n.viewer-grid-columns {\n position: relative;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n block-size: 100%;\n padding-block: 0;\n padding-inline: 16px;\n}\n\n.dso-main-panel {\n background-color: #fff;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n flex-shrink: unset;\n flex-grow: unset;\n position: absolute;\n transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n position: absolute;\n block-size: 100%;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n inset-inline-start: calc(100% + 1px);\n transition: inset-inline-start 200ms ease-in;\n padding-block: 0 8px;\n padding-inline: 0 4px;\n}\n.dso-main-panel .toggle-button {\n --_dt-icon-button-border-start-start-radius: 0;\n --_dt-icon-button-border-end-start-radius: 0;\n}\n\n.dso-document-panel {\n background-color: #fff;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n inset-block-start: auto;\n inset-block-end: 16px;\n inset-inline-end: calc(100% + 1px);\n transition: inset-inline-end 200ms ease-in;\n padding-block: 0 8px;\n padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons .shrink,\n.dso-document-panel .sizing-buttons .expand {\n --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;\n --_dt-icon-button-border-start-end-radius: 0;\n --_dt-icon-button-border-end-end-radius: 0;\n}\n\n.sizing-buttons,\n.toggle-button {\n overflow-x: hidden;\n position: absolute;\n inset-block-start: 16px;\n inline-size: 44px;\n z-index: -1;\n}\n\n.map {\n block-size: 100%;\n inline-size: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.filter-panel,\n.overlay {\n background-color: #fff;\n border: 0;\n block-size: 100%;\n margin-block: 0;\n max-block-size: 100vh;\n overflow-y: auto;\n z-index: 101;\n}\n\n.filter-panel {\n display: block;\n position: absolute;\n padding-block: 8px;\n padding-inline: 16px;\n inset-block-start: 0;\n block-size: 100%;\n inset-inline-start: -380px;\n inline-size: 100%;\n transition: inset-inline-start 200ms ease-in;\n}\n@media screen and (max-width: 768px) {\n .filter-panel {\n inline-size: 100vw;\n }\n .filter-panel::before {\n display: none !important;\n }\n}\n@media screen and (min-width: 992px) {\n .filter-panel {\n max-inline-size: 380px;\n }\n}\n.filter-panel[open] {\n inset-inline-start: 0;\n box-shadow: none;\n border-inline-end: 1px solid #e5e5e5;\n}\n.filter-panel h3 {\n color: #275937;\n}\n.filter-panel .dso-close {\n --_dso-icon-button-tertiary-color: #191919;\n position: absolute;\n inset-block-start: 20px;\n inset-inline-end: 20px;\n}\n\n.overlay {\n padding-block: 40px 8px;\n padding-inline: 16px;\n inset-inline-end: 0;\n inline-size: 624px;\n}\n.overlay::backdrop {\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n .overlay {\n inline-size: 100vw;\n }\n}\n\n@media screen and (min-width: 808px) {\n :host([main-size=small]) .dso-main-panel,\n :host([document-panel-size=small]) .dso-document-panel {\n flex-basis: 375px;\n min-inline-size: 0;\n max-inline-size: 375px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n :host([main-size=small]) .dso-main-panel,\n :host([document-panel-size=small]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 0;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host([main-size=medium]) .dso-main-panel,\n :host([document-panel-size=medium]) .dso-document-panel {\n flex-basis: 624px;\n min-inline-size: 375px;\n max-inline-size: 624px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n :host([main-size=medium]) .dso-main-panel,\n :host([document-panel-size=medium]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 375px;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host([main-size=large]) .dso-main-panel,\n :host([document-panel-size=large]) .dso-document-panel {\n flex-basis: 60%;\n min-inline-size: 768px;\n max-inline-size: 1024px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n :host([main-size=large]) .dso-main-panel,\n :host([document-panel-size=large]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 768px;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host {\n display: flex;\n flex-direction: column;\n block-size: 100vh;\n overflow: clip;\n position: relative;\n }\n :host .dso-main-panel.compact,\n :host .dso-main-panel.expanded {\n flex-basis: unset;\n min-inline-size: unset;\n max-inline-size: unset;\n inline-size: 440px;\n }\n :host .viewer-grid-columns {\n display: flex;\n overflow: hidden;\n flex-grow: 1;\n }\n .dso-main-panel,\n .dso-document-panel {\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n }\n .dso-main-panel .content,\n .dso-document-panel .content {\n overflow-y: auto;\n }\n .filter-panel {\n margin-inline: 0 auto;\n inline-size: calc(100vw - 40px);\n }\n .filter-panel[open] {\n border-inline-end: 1px solid #e5e5e5;\n }\n .overlay {\n box-shadow: -2px 0 5px #666;\n margin-inline: auto 0;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 1031.99px) {\n :host([filter-panel-open]) .dso-main-panel {\n margin-inline-start: 380px;\n max-inline-size: calc(100vw - 380px);\n }\n .filter-panel {\n inline-size: 380px;\n inset-inline-start: -380px;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar {\n min-block-size: 32px;\n }\n .dso-navbar .dso-navbar-header {\n float: inline-start;\n }\n .dso-navbar .dso-navbar-toggle {\n border-radius: 4px;\n min-inline-size: auto;\n padding-block: 5px;\n padding-inline: 0;\n }\n .dso-navbar .dso-navbar-toggle dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: 8px;\n }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n .dso-navbar .dso-navbar-toggle {\n display: none;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n margin-inline-end: 8rem;\n }\n .dso-nav {\n list-style: none;\n margin-block-end: 0;\n padding-inline-start: 0;\n }\n .dso-nav > li > button {\n border: 0;\n background-color: transparent;\n }\n .dso-nav > li > a,\n .dso-nav > li > button {\n display: block;\n }\n .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n .dso-nav > li > button,\n .dso-nav > li > button:hover,\n .dso-nav > li > button:focus,\n .dso-nav > li > button:visited {\n color: #275937;\n }\n .dso-nav > li.dso-active > a,\n .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n .dso-nav > li.is-active > button {\n border-block-end: 4px solid #8b4a6a;\n font-weight: bold;\n }\n .dso-nav.dso-nav-main > li {\n display: inline-block;\n }\n .dso-nav.dso-nav-main > li > a,\n .dso-nav.dso-nav-main > li > button {\n text-decoration: none;\n }\n .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n .dso-nav.dso-nav-main > li > button:hover,\n .dso-nav.dso-nav-main > li > button:focus-visible,\n .dso-nav.dso-nav-main > li > button:active {\n text-decoration: underline;\n }\n .dso-nav.dso-nav-main > li > a,\n .dso-nav.dso-nav-main > li > button {\n font-size: 1.25em;\n line-height: 1;\n margin-block-start: 8px;\n padding-block: 8px 7px;\n padding-inline: 16px;\n }\n .dso-nav.dso-nav-sub > li {\n display: inline-block;\n }\n .dso-nav.dso-nav-sub > li > a,\n .dso-nav.dso-nav-sub > li > button {\n text-decoration: none;\n }\n .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n .dso-nav.dso-nav-sub > li > button:hover,\n .dso-nav.dso-nav-sub > li > button:focus-visible,\n .dso-nav.dso-nav-sub > li > button:active {\n text-decoration: underline;\n }\n .dso-nav.dso-nav-sub > li > a,\n .dso-nav.dso-nav-sub > li > button {\n font-size: 1rem;\n margin-block-start: 4px;\n padding-block: 4px 3px;\n padding-inline: 8px;\n }\n .dso-navbar {\n padding-inline: 16px;\n }\n .dso-nav {\n border-block-end: 1px solid #ccc;\n display: flex;\n gap: 16px;\n margin-block-start: 0;\n inline-size: calc(100vw - 32px);\n }\n .dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n }\n .dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n }\n .dso-tertiary:active {\n outline: 0;\n }\n .dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n }\n .dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n }\n .dso-tertiary:active {\n outline: 0;\n }\n .dso-tertiary {\n background-color: var(--_dso-button-tertiary-background-color, );\n border-color: var(--_dso-button-tertiary-border-color, );\n color: var(--_dso-button-tertiary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n }\n .dso-tertiary:hover {\n background-color: var(--_dso-button-tertiary-hover-background-color, );\n border-color: var(--_dso-button-tertiary-hover-border-color, );\n color: var(--_dso-button-tertiary-hover-color, #275937);\n }\n .dso-tertiary:active {\n background-color: var(--_dso-button-tertiary-active-background-color, );\n border-color: var(--_dso-button-tertiary-active-border-color, );\n color: var(--_dso-button-tertiary-active-color, #173521);\n }\n .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {\n background-color: var(--_dso-button-tertiary-disabled-background-color, );\n border-color: var(--_dso-button-tertiary-disabled-border-color, );\n color: var(--_dso-button-tertiary-disabled-color, #afcf9d);\n }\n .dso-tertiary.dso-small {\n line-height: 1rem;\n }\n .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n }\n .dso-tertiary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n }\n .dso-tertiary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n }\n .dso-tertiary.dso-extra-small {\n line-height: 1rem;\n }\n .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n }\n .dso-tertiary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n }\n .dso-tertiary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n }\n .dso-tertiary.dso-extra-small {\n padding-block: 9px;\n }\n .dso-tertiary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n }\n .dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n }\n .dso-tertiary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n }\n .dso-tertiary {\n border: 0;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n }\n .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n }\n .dso-tertiary:not([disabled]):hover {\n text-decoration: underline;\n text-underline-position: under;\n }\n .dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n }\n .dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .dso-tertiary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n }\n .dso-tertiary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n }\n .dso-tertiary dso-icon + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n }\n .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n }\n .dso-tertiary dso-icon,\n .dso-tertiary span {\n vertical-align: middle;\n }\n .dso-tertiary {\n font-weight: 300;\n }\n .filter-panel,\n .overlay {\n margin-inline: 0;\n max-inline-size: 100vw;\n inset-block-start: 0;\n inline-size: 100vw;\n }\n .filter-panel {\n inset-inline-start: -100vw;\n }\n}\n@media screen and (min-width: 992px) {\n :host([filter-panel-open]) .dso-main-panel {\n margin-inline-start: 380px;\n }\n}`;const u=new ResizeObserver(s((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&f(e.host)){e.host._checkMainPanelVisibility()}}),50));function f(n){return n.tagName==="DSO-VIEWER-GRID"}const g=40;const y=768+g;const k=440;const z=class{constructor(n){i(this,n);this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7);this.dsoCloseFilterPanel=t(this,"dsoCloseFilterPanel",7);this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${y}px)`;this.filterPanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<y;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=k+g+g){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterPanelOpenWatcher(n){var e,i;if(!this.filterPanelSlot){console.warn("slot 'filter-panel' has not been set")}if(n){(e=this.filterPanel)===null||e===void 0?void 0:e.show()}else{(i=this.filterPanel)===null||i===void 0?void 0:i.close()}}overlayOpenWatcher(n){var e,i;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(i=this.overlay)===null||i===void 0?void 0:i.close()}}async _checkMainPanelVisibility(){if(this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=k+g+g&&!this.mainPanelExpanded||this.mapElement.clientWidth<=g+g&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,e;if(this.filterPanelOpen&&this.filterPanelSlot){(n=this.filterPanel)===null||n===void 0?void 0:n.show()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mapElement instanceof HTMLDivElement){u.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mapElement){u.unobserve(this.mapElement)}}render(){return n(e,{key:"d1d81c9db00b4fb1394e9938ed698a78e2f54976"},n("slot",{key:"8523d2e37a153f3b8e6521e1d4a07f0395c67180",name:"top-bar"}),n("div",{key:"64e25d1b9c82661ead44a20dc43fc60b3400b8a9",class:"viewer-grid-columns"},this.tabView&&n("nav",{key:"5b3975cd300000076405acd470f1bcc2ed6581f1",class:"dso-navbar"},n("ul",{key:"8d987841d10e4806ce6025fb81db489d1f583410",class:"dso-nav dso-nav-sub"},l.map((e=>n("li",{key:e,class:a({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},r[e])))))),(!this.tabView||this.tabView&&this.activeTab==="search")&&n(h,{key:"21baa34326e6cce24feef6ae8ac2237520c6dd90",tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),(!this.tabView||this.tabView&&this.activeTab==="search")&&n(b,{key:"4f00c13af3676b1dbfb97a05a4c644ed0aa027f2",open:this.filterPanelOpen,title:this.filterPanelTitle,ref:n=>this.filterPanel=n,dsoCloseFilterPanel:n=>this.dsoCloseFilterPanel.emit({originalEvent:n})}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"b397c8a90326fd24ebdcd8148d0222dc7038e131",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"ae239735328e35dc97e8fc7653fad4c886dab9eb",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(m,{key:"1a12d6aa3431c11db288a0b07ebb51b772a27df7",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(v,{key:"ee5b23969f8ace7db8d94adce586d8fd91fea08b",ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})})))}get host(){return o(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterPanelOpen:["filterPanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};z.style=x();export{z as dso_viewer_grid};
2
- //# sourceMappingURL=p-b4ae7950.entry.js.map
1
+ import{h as n,F as e,r as i,d as t,g as o}from"./p-Dx5skKSq.js";import{c as a}from"./p-ChV9xqsO.js";import{d as s}from"./p-baWVwd8J.js";const l=["search","map","document"];const r={map:"Kaart",document:"Document",search:"Zoeken"};const d={small:"smal",medium:"middel",large:"breed"};const c=({className:e,onClick:i,label:t,icon:o})=>n("dso-icon-button",{variant:"map",class:e,onDsoClick:i,icon:o,label:t});const p=({shrink:e,expand:i,size:t,panelLabel:o,placement:a})=>{const s=[];if(t!=="small"){s.push(n(c,{onClick:e,label:`${o} smaller maken`,icon:a==="right"?"chevron-right":"chevron-left",className:"shrink"}))}if(t!=="large"){s.push(n(c,{onClick:i,label:`${o} breder maken`,icon:a==="right"?"chevron-left":"chevron-right",className:"expand"}))}return n("div",{class:"sizing-buttons"},n("span",{class:"sr-only","aria-live":"polite","aria-atomic":"true"},"Breedte ",o.toLocaleLowerCase(),": ",d[t]),s)};const m=({tabView:e,panelSize:i,shrinkDocumentPanel:t,expandDocumentPanel:o,dsoDocumentPanelSizeChangeAnimationEnd:a})=>n("div",{class:"dso-document-panel",onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){a.emit({currentSize:i})}}},!e&&n(p,{panelLabel:"Documentpaneel",size:i,expand:o,shrink:t,placement:"right"}),n("div",{class:"content"},n("slot",{name:"document-panel"})));const b=({open:i,title:t,ref:o,dsoCloseFilterPanel:a})=>n("dialog",{class:"filter-panel",ref:o},i&&n(e,null,t&&n("h3",null,t),n("dso-icon-button",{class:"dso-close",icon:"times",variant:"tertiary",label:"Sluiten",onDsoClick:a}),n("slot",{name:"filter-panel"})));const h=({tabView:e,mainSize:i,documentPanelOpen:t,mainPanelExpanded:o,mainPanelHidden:s,toggleMainPanel:l,dsoMainSizeChangeAnimationEnd:r})=>n("div",{class:a("dso-main-panel",{compact:!e&&t&&!o,contracted:!e&&!t&&!o,expanded:!e&&t&&o,collapsed:s}),onTransitionEnd:n=>{if(n.propertyName==="flex-basis"){r.emit({currentSize:i})}}},!e&&t&&n("div",{class:"toggle-button"},n("dso-icon-button",{variant:"map",label:`Zoeken paneel ${s?"tonen":"verbergen"}`,icon:s?"chevron-right":"chevron-left",onDsoClick:l})),n("div",{class:a("content",{invisible:s})},n("slot",{name:"main"})));const v=({ref:e,dsoCloseOverlay:i})=>n("dialog",{class:"overlay",ref:e,onCancel:n=>{n.preventDefault();i(n)}},n("dso-icon-button",{class:"overlay-close-button",icon:"times",variant:"tertiary",label:"Sluiten",onDsoClick:i}),n("slot",{name:"overlay"}));const x=()=>`*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host .overlay {\n block-size: calc(100% - 32px);\n margin-block: 16px;\n margin-inline: auto 16px;\n}\n:host .dso-main-panel {\n transition: min-inline-size 200ms ease-in, margin-inline-start 200ms ease-in;\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 inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n border: 0;\n overflow: hidden;\n clip-path: rect(0 0 0 0);\n}\n\n.overlay-close-button {\n position: absolute;\n line-height: 1;\n inset-block-start: 8px;\n inset-inline-end: 16px;\n}\n\n.content.invisible {\n visibility: hidden;\n}\n\n.viewer-grid-columns {\n position: relative;\n}\n\n.dso-main-panel .content,\n.dso-document-panel .content {\n block-size: 100%;\n padding-block: 0;\n padding-inline: 16px;\n}\n\n.dso-main-panel {\n background-color: #fff;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n z-index: 100;\n}\n.dso-main-panel.compact.collapsed, .dso-main-panel.expanded.collapsed {\n inset-inline-start: -432px;\n}\n.dso-main-panel.compact, .dso-main-panel.contracted {\n flex-shrink: unset;\n flex-grow: unset;\n position: absolute;\n transition: none;\n}\n.dso-main-panel.expanded.collapsed {\n position: absolute;\n block-size: 100%;\n}\n.dso-main-panel .sizing-buttons,\n.dso-main-panel .toggle-button {\n inset-inline-start: calc(100% + 1px);\n transition: inset-inline-start 200ms ease-in;\n padding-block: 0 8px;\n padding-inline: 0 4px;\n}\n.dso-main-panel .toggle-button {\n --_dt-icon-button-border-start-start-radius: 0;\n --_dt-icon-button-border-end-start-radius: 0;\n}\n\n.dso-document-panel {\n background-color: #fff;\n flex-shrink: 0;\n flex-grow: 0;\n position: relative;\n transition: flex-basis 200ms ease-in, max-inline-size 200ms ease-in, min-inline-size 200ms ease-in;\n z-index: 100;\n}\n.dso-document-panel .sizing-buttons {\n inset-block-start: auto;\n inset-block-end: 16px;\n inset-inline-end: calc(100% + 1px);\n transition: inset-inline-end 200ms ease-in;\n padding-block: 0 8px;\n padding-inline: 4px 0;\n}\n.dso-document-panel .sizing-buttons .shrink,\n.dso-document-panel .sizing-buttons .expand {\n --_dt-icon-button-map-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 4px 0px;\n --_dt-icon-button-border-start-end-radius: 0;\n --_dt-icon-button-border-end-end-radius: 0;\n}\n\n.sizing-buttons,\n.toggle-button {\n overflow-x: hidden;\n position: absolute;\n inset-block-start: 16px;\n inline-size: 44px;\n z-index: -1;\n}\n\n.map {\n block-size: 100%;\n inline-size: 100%;\n overflow: hidden;\n position: relative;\n}\n\n.filter-panel,\n.overlay {\n background-color: #fff;\n border: 0;\n block-size: 100%;\n margin-block: 0;\n max-block-size: 100vh;\n overflow-y: auto;\n z-index: 101;\n}\n\n.filter-panel {\n display: block;\n position: absolute;\n padding-block: 8px;\n padding-inline: 16px;\n inset-block-start: 0;\n block-size: 100%;\n inset-inline-start: -380px;\n inline-size: 100%;\n transition: inset-inline-start 200ms ease-in;\n}\n@media screen and (max-width: 768px) {\n .filter-panel {\n inline-size: 100vw;\n }\n .filter-panel::before {\n display: none !important;\n }\n}\n@media screen and (min-width: 992px) {\n .filter-panel {\n max-inline-size: 380px;\n }\n}\n.filter-panel[open] {\n inset-inline-start: 0;\n box-shadow: none;\n border-inline-end: 1px solid #e5e5e5;\n}\n.filter-panel h3 {\n color: #275937;\n}\n.filter-panel .dso-close {\n --_dso-icon-button-tertiary-color: #191919;\n position: absolute;\n inset-block-start: 20px;\n inset-inline-end: 20px;\n}\n\n.overlay {\n padding-block: 40px 8px;\n padding-inline: 16px;\n inset-inline-end: 0;\n inline-size: 624px;\n}\n.overlay::backdrop {\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 624px) {\n .overlay {\n inline-size: 100vw;\n }\n}\n\n@media screen and (min-width: 808px) {\n :host([main-size=small]) .dso-main-panel,\n :host([document-panel-size=small]) .dso-document-panel {\n flex-basis: 375px;\n min-inline-size: 0;\n max-inline-size: 375px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 375px) {\n :host([main-size=small]) .dso-main-panel,\n :host([document-panel-size=small]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 0;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host([main-size=medium]) .dso-main-panel,\n :host([document-panel-size=medium]) .dso-document-panel {\n flex-basis: 624px;\n min-inline-size: 375px;\n max-inline-size: 624px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 624px) {\n :host([main-size=medium]) .dso-main-panel,\n :host([document-panel-size=medium]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 375px;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host([main-size=large]) .dso-main-panel,\n :host([document-panel-size=large]) .dso-document-panel {\n flex-basis: 60%;\n min-inline-size: 768px;\n max-inline-size: 1024px;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 768px) {\n :host([main-size=large]) .dso-main-panel,\n :host([document-panel-size=large]) .dso-document-panel {\n flex-basis: 100vw;\n max-inline-size: 100vw;\n min-inline-size: 768px;\n transition: none;\n }\n}\n@media screen and (min-width: 808px) {\n :host {\n display: flex;\n flex-direction: column;\n block-size: 100vh;\n overflow: clip;\n position: relative;\n }\n :host .dso-main-panel.compact,\n :host .dso-main-panel.expanded {\n flex-basis: unset;\n min-inline-size: unset;\n max-inline-size: unset;\n inline-size: 440px;\n }\n :host .viewer-grid-columns {\n display: flex;\n overflow: hidden;\n flex-grow: 1;\n }\n .dso-main-panel,\n .dso-document-panel {\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n }\n .dso-main-panel .content,\n .dso-document-panel .content {\n overflow-y: auto;\n }\n .filter-panel {\n margin-inline: 0 auto;\n inline-size: calc(100vw - 40px);\n }\n .filter-panel[open] {\n border-inline-end: 1px solid #e5e5e5;\n }\n .overlay {\n box-shadow: -2px 0 5px #666;\n margin-inline: auto 0;\n }\n}\n@media screen and (min-width: 808px) and (max-width: 1031.99px) {\n :host([filter-panel-open]) .dso-main-panel {\n margin-inline-start: 380px;\n max-inline-size: calc(100vw - 380px);\n }\n .filter-panel {\n inline-size: 380px;\n inset-inline-start: -380px;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar {\n min-block-size: 32px;\n }\n .dso-navbar .dso-navbar-header {\n float: inline-start;\n }\n .dso-navbar .dso-navbar-toggle {\n border-radius: 4px;\n min-inline-size: auto;\n padding-block: 5px;\n padding-inline: 0;\n }\n .dso-navbar .dso-navbar-toggle dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: 8px;\n }\n}\n@media screen and (max-width: 807.99px) and (min-width: 992px) {\n .dso-navbar .dso-navbar-toggle {\n display: none;\n }\n}\n@media screen and (max-width: 807.99px) {\n .dso-navbar.dso-has-navbar-extension .dso-nav > li:last-child {\n margin-inline-end: 8rem;\n }\n .dso-nav {\n list-style: none;\n margin-block-end: 0;\n padding-inline-start: 0;\n }\n .dso-nav > li > button {\n border: 0;\n background-color: transparent;\n }\n .dso-nav > li > a,\n .dso-nav > li > button {\n display: block;\n }\n .dso-nav > li > a, .dso-nav > li > a:hover, .dso-nav > li > a:focus, .dso-nav > li > a:visited,\n .dso-nav > li > button,\n .dso-nav > li > button:hover,\n .dso-nav > li > button:focus,\n .dso-nav > li > button:visited {\n color: #275937;\n }\n .dso-nav > li.dso-active > a,\n .dso-nav > li.dso-active > button, .dso-nav > li.is-active > a,\n .dso-nav > li.is-active > button {\n border-block-end: 4px solid #8b4a6a;\n font-weight: bold;\n }\n .dso-nav.dso-nav-main > li {\n display: inline-block;\n }\n .dso-nav.dso-nav-main > li > a,\n .dso-nav.dso-nav-main > li > button {\n text-decoration: none;\n }\n .dso-nav.dso-nav-main > li > a:hover, .dso-nav.dso-nav-main > li > a:focus-visible, .dso-nav.dso-nav-main > li > a:active,\n .dso-nav.dso-nav-main > li > button:hover,\n .dso-nav.dso-nav-main > li > button:focus-visible,\n .dso-nav.dso-nav-main > li > button:active {\n text-decoration: underline;\n }\n .dso-nav.dso-nav-main > li > a,\n .dso-nav.dso-nav-main > li > button {\n font-size: 1.25em;\n line-height: 1;\n margin-block-start: 8px;\n padding-block: 8px 7px;\n padding-inline: 16px;\n }\n .dso-nav.dso-nav-sub > li {\n display: inline-block;\n }\n .dso-nav.dso-nav-sub > li > a,\n .dso-nav.dso-nav-sub > li > button {\n text-decoration: none;\n }\n .dso-nav.dso-nav-sub > li > a:hover, .dso-nav.dso-nav-sub > li > a:focus-visible, .dso-nav.dso-nav-sub > li > a:active,\n .dso-nav.dso-nav-sub > li > button:hover,\n .dso-nav.dso-nav-sub > li > button:focus-visible,\n .dso-nav.dso-nav-sub > li > button:active {\n text-decoration: underline;\n }\n .dso-nav.dso-nav-sub > li > a,\n .dso-nav.dso-nav-sub > li > button {\n font-size: 1rem;\n margin-block-start: 4px;\n padding-block: 4px 3px;\n padding-inline: 8px;\n }\n .dso-navbar {\n padding-inline: 16px;\n }\n .dso-nav {\n border-block-end: 1px solid #ccc;\n display: flex;\n gap: 16px;\n margin-block-start: 0;\n inline-size: calc(100vw - 32px);\n }\n .dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n }\n .dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n }\n .dso-tertiary:active {\n outline: 0;\n }\n .dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n }\n .dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n }\n .dso-tertiary:active {\n outline: 0;\n }\n .dso-tertiary {\n background-color: var(--_dso-button-tertiary-background-color, );\n border-color: var(--_dso-button-tertiary-border-color, );\n color: var(--_dso-button-tertiary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: auto;\n padding-block: 11px;\n padding-inline: 15px;\n }\n .dso-tertiary:hover {\n background-color: var(--_dso-button-tertiary-hover-background-color, );\n border-color: var(--_dso-button-tertiary-hover-border-color, );\n color: var(--_dso-button-tertiary-hover-color, #275937);\n }\n .dso-tertiary:active {\n background-color: var(--_dso-button-tertiary-active-background-color, );\n border-color: var(--_dso-button-tertiary-active-border-color, );\n color: var(--_dso-button-tertiary-active-color, #173521);\n }\n .dso-tertiary[disabled], .dso-tertiary[disabled]:hover {\n background-color: var(--_dso-button-tertiary-disabled-background-color, );\n border-color: var(--_dso-button-tertiary-disabled-border-color, );\n color: var(--_dso-button-tertiary-disabled-color, #afcf9d);\n }\n .dso-tertiary.dso-small {\n line-height: 1rem;\n }\n .dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n }\n .dso-tertiary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n }\n .dso-tertiary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n }\n .dso-tertiary.dso-extra-small {\n line-height: 1rem;\n }\n .dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n }\n .dso-tertiary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n }\n .dso-tertiary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n }\n .dso-tertiary.dso-extra-small {\n padding-block: 9px;\n }\n .dso-tertiary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n }\n .dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n }\n .dso-tertiary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n }\n .dso-tertiary {\n border: 0;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n }\n .dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n }\n .dso-tertiary:not([disabled]):hover {\n text-decoration: underline;\n text-underline-position: under;\n }\n .dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n }\n .dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .dso-tertiary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n }\n .dso-tertiary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n }\n .dso-tertiary dso-icon + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n }\n .dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n .dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n .dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n }\n .dso-tertiary dso-icon,\n .dso-tertiary span {\n vertical-align: middle;\n }\n .dso-tertiary {\n font-weight: 300;\n }\n .filter-panel,\n .overlay {\n margin-inline: 0;\n max-inline-size: 100vw;\n inset-block-start: 0;\n inline-size: 100vw;\n }\n .filter-panel {\n inset-inline-start: -100vw;\n }\n}\n@media screen and (min-width: 992px) {\n :host([filter-panel-open]) .dso-main-panel {\n margin-inline-start: 380px;\n }\n}`;const u=new ResizeObserver(s((([n])=>{const e=n===null||n===void 0?void 0:n.target.getRootNode();if(e instanceof ShadowRoot&&f(e.host)){e.host._checkMainPanelVisibility()}}),50));function f(n){return n.tagName==="DSO-VIEWER-GRID"}const g=40;const y=768+g;const k=440;const z=class{constructor(n){i(this,n);this.dsoCloseOverlay=t(this,"dsoCloseOverlay",7);this.dsoCloseFilterPanel=t(this,"dsoCloseFilterPanel",7);this.dsoActiveTabSwitch=t(this,"dsoActiveTabSwitch",7);this.dsoMainSizeChangeAnimationEnd=t(this,"dsoMainSizeChangeAnimationEnd",7);this.dsoDocumentPanelSizeChange=t(this,"dsoDocumentPanelSizeChange",7);this.dsoDocumentPanelSizeChangeAnimationEnd=t(this,"dsoDocumentPanelSizeChangeAnimationEnd",7);this.dsoMainPanelToggle=t(this,"dsoMainPanelToggle",7);this.mediaCondition=`(min-width: ${y}px)`;this.filterPanelOpen=false;this.overlayOpen=false;this.documentPanelOpen=false;this.mainSize="large";this.documentPanelSize="large";this.mainPanelExpanded=false;this.mainPanelHidden=false;this.tabView=window.innerWidth<y;this.switchActiveTab=n=>{this.dsoActiveTabSwitch.emit({tab:n})};this.shrinkDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="large"?"medium":"small"})};this.expandDocumentPanel=()=>{this.dsoDocumentPanelSizeChange.emit({currentSize:this.documentPanelSize,nextSize:this.documentPanelSize==="small"?"medium":"large"})};this.toggleMainPanel=()=>{if(this.mapElement instanceof HTMLDivElement&&this.mapElement.clientWidth<=k+g+g){this.mainSize="small"}this.dsoMainPanelToggle.emit({hide:!this.mainPanelHidden})};this.changeListener=n=>this.tabView=!n.matches}get filterPanelSlot(){return this.host.querySelector("[slot='filter-panel']")}get overlaySlot(){return this.host.querySelector("[slot='overlay']")}documentPanelOpenWatcher(n){if(n){this._checkMainPanelVisibility()}}filterPanelOpenWatcher(n){var e,i;if(!this.filterPanelSlot){console.warn("slot 'filter-panel' has not been set")}if(n){(e=this.filterPanel)===null||e===void 0?void 0:e.show()}else{(i=this.filterPanel)===null||i===void 0?void 0:i.close()}}overlayOpenWatcher(n){var e,i;if(!this.overlaySlot){console.warn("slot 'overlay' has not been set")}if(n){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}else{(i=this.overlay)===null||i===void 0?void 0:i.close()}}async _checkMainPanelVisibility(){if(this.documentPanelOpen&&!this.mainPanelHidden&&this.mapElement instanceof HTMLDivElement&&(this.mapElement.clientWidth<=k+g+g&&!this.mainPanelExpanded||this.mapElement.clientWidth<=g+g&&this.mainPanelExpanded)){this.dsoMainPanelToggle.emit({hide:true})}}connectedCallback(){window.matchMedia(this.mediaCondition).addEventListener("change",this.changeListener)}componentDidLoad(){var n,e;if(this.filterPanelOpen&&this.filterPanelSlot){(n=this.filterPanel)===null||n===void 0?void 0:n.show()}if(this.overlayOpen&&this.overlaySlot){(e=this.overlay)===null||e===void 0?void 0:e.showModal()}if(this.mapElement instanceof HTMLDivElement){u.observe(this.mapElement)}}disconnectedCallback(){window.matchMedia(this.mediaCondition).removeEventListener("change",this.changeListener);if(this.mapElement){u.unobserve(this.mapElement)}}render(){return n(e,{key:"d1d81c9db00b4fb1394e9938ed698a78e2f54976"},n("slot",{key:"8523d2e37a153f3b8e6521e1d4a07f0395c67180",name:"top-bar"}),n("div",{key:"64e25d1b9c82661ead44a20dc43fc60b3400b8a9",class:"viewer-grid-columns"},this.tabView&&n("nav",{key:"5b3975cd300000076405acd470f1bcc2ed6581f1",class:"dso-navbar"},n("ul",{key:"8d987841d10e4806ce6025fb81db489d1f583410",class:"dso-nav dso-nav-sub"},l.map((e=>n("li",{key:e,class:a({"dso-active":this.activeTab===e})},n("button",{type:"button",class:"dso-tertiary",onClick:()=>this.switchActiveTab(e)},r[e])))))),(!this.tabView||this.tabView&&this.activeTab==="search")&&n(h,{key:"21baa34326e6cce24feef6ae8ac2237520c6dd90",tabView:this.tabView,mainSize:this.mainSize,documentPanelOpen:this.documentPanelOpen,mainPanelExpanded:this.mainPanelExpanded,mainPanelHidden:this.mainPanelHidden,toggleMainPanel:this.toggleMainPanel,dsoMainSizeChangeAnimationEnd:this.dsoMainSizeChangeAnimationEnd}),(!this.tabView||this.tabView&&this.activeTab==="search")&&n(b,{key:"4f00c13af3676b1dbfb97a05a4c644ed0aa027f2",open:this.filterPanelOpen,title:this.filterPanelTitle,ref:n=>this.filterPanel=n,dsoCloseFilterPanel:n=>this.dsoCloseFilterPanel.emit({originalEvent:n})}),(!this.tabView||this.tabView&&this.activeTab==="map")&&n("div",{key:"b397c8a90326fd24ebdcd8148d0222dc7038e131",class:"map",ref:n=>this.mapElement=n},n("slot",{key:"ae239735328e35dc97e8fc7653fad4c886dab9eb",name:"map"})),(!this.tabView&&this.documentPanelOpen||this.tabView&&this.activeTab==="document")&&n(m,{key:"1a12d6aa3431c11db288a0b07ebb51b772a27df7",tabView:this.tabView,panelSize:this.documentPanelSize,shrinkDocumentPanel:this.shrinkDocumentPanel,expandDocumentPanel:this.expandDocumentPanel,dsoDocumentPanelSizeChangeAnimationEnd:this.dsoDocumentPanelSizeChangeAnimationEnd}),n(v,{key:"ee5b23969f8ace7db8d94adce586d8fd91fea08b",ref:n=>this.overlay=n,dsoCloseOverlay:n=>this.dsoCloseOverlay.emit({originalEvent:n})})))}get host(){return o(this)}static get watchers(){return{documentPanelOpen:["documentPanelOpenWatcher"],filterPanelOpen:["filterPanelOpenWatcher"],overlayOpen:["overlayOpenWatcher"]}}};z.style=x();export{z as dso_viewer_grid};
2
+ //# sourceMappingURL=p-2d35b793.entry.js.map
package/dist/dso-toolkit/{p-5d3ac273.entry.js → p-5e8291ba.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as n,d as o,h as e,F as r,g as a}from"./p-Dx5skKSq.js";import{i as s}from"./p-pxiVAmq4.js";const t={en:{"dso-map-controls":{title:"Map layers",layersButton:"Map layers",zoomIn:"Zoom in",zoomOut:"Zoom out",hidePanel:"Hide panel {{title}}"}},nl:{"dso-map-controls":{title:"Kaartlagen",layersButton:"Kaartlagen",zoomIn:"Zoom in",zoomOut:"Zoom uit",hidePanel:"Verberg paneel {{title}}"}}};const d=()=>`button {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n background-color: var(--_dso-button-primary-background-color, #39870c);\n border-color: var(--_dso-button-primary-border-color, #39870c);\n color: var(--_dso-button-primary-color, #fff);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n background-color: var(--_dso-button-primary-hover-background-color, #275937);\n border-color: var(--_dso-button-primary-hover-border-color, #275937);\n color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n background-color: var(--_dso-button-primary-active-background-color, #173521);\n border-color: var(--_dso-button-primary-active-border-color, #173521);\n color: var(--_dso-button-primary-active-color, #fff);\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n line-height: 1rem;\n}\na.dso-primary.dso-extra-small dso-icon, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,\nbutton.dso-primary.dso-extra-small dso-icon,\nbutton.dso-primary.dso-extra-small.extern::after,\nbutton.dso-primary.dso-extra-small.download::after,\nbutton.dso-primary.dso-extra-small.dso-spinner::before,\nlabel.dso-primary.dso-extra-small dso-icon,\nlabel.dso-primary.dso-extra-small.extern::after,\nlabel.dso-primary.dso-extra-small.download::after,\nlabel.dso-primary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-primary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-primary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-primary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-primary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-primary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n padding-block: 9px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n background: url("./di.svg#download-wit") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n background: url("./di.svg#external-link-wit") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n background-color: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n color: var(--_dso-button-secondary-hover-color, #275937);\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: var(--_dso-button-secondary-active-background-color, #275937);\n border-color: var(--_dso-button-secondary-active-border-color, #275937);\n color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n line-height: 1rem;\n}\na.dso-secondary.dso-extra-small dso-icon, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,\nbutton.dso-secondary.dso-extra-small dso-icon,\nbutton.dso-secondary.dso-extra-small.extern::after,\nbutton.dso-secondary.dso-extra-small.download::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner::before,\nlabel.dso-secondary.dso-extra-small dso-icon,\nlabel.dso-secondary.dso-extra-small.extern::after,\nlabel.dso-secondary.dso-extra-small.download::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n padding-block: 9px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n background: url("./di.svg#download") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n background: url("./di.svg#external-link") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n background-color: var(--_dso-button-tertiary-background-color, );\n border-color: var(--_dso-button-tertiary-border-color, );\n color: var(--_dso-button-tertiary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-tertiary:hover,\nbutton.dso-tertiary:hover,\nlabel.dso-tertiary:hover {\n background-color: var(--_dso-button-tertiary-hover-background-color, );\n border-color: var(--_dso-button-tertiary-hover-border-color, );\n color: var(--_dso-button-tertiary-hover-color, #275937);\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n background-color: var(--_dso-button-tertiary-active-background-color, );\n border-color: var(--_dso-button-tertiary-active-border-color, );\n color: var(--_dso-button-tertiary-active-color, #173521);\n}\na.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,\nbutton.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled]:hover,\nlabel.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled]:hover {\n background-color: var(--_dso-button-tertiary-disabled-background-color, );\n border-color: var(--_dso-button-tertiary-disabled-border-color, );\n color: var(--_dso-button-tertiary-disabled-color, #afcf9d);\n}\na.dso-tertiary.dso-small,\nbutton.dso-tertiary.dso-small,\nlabel.dso-tertiary.dso-small {\n line-height: 1rem;\n}\na.dso-tertiary.dso-small dso-icon, a.dso-tertiary.dso-small.extern::after, a.dso-tertiary.dso-small.download::after, a.dso-tertiary.dso-small.dso-spinner::before,\nbutton.dso-tertiary.dso-small dso-icon,\nbutton.dso-tertiary.dso-small.extern::after,\nbutton.dso-tertiary.dso-small.download::after,\nbutton.dso-tertiary.dso-small.dso-spinner::before,\nlabel.dso-tertiary.dso-small dso-icon,\nlabel.dso-tertiary.dso-small.extern::after,\nlabel.dso-tertiary.dso-small.download::after,\nlabel.dso-tertiary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-tertiary.dso-small.dso-spinner-left::before,\nbutton.dso-tertiary.dso-small.dso-spinner-left::before,\nlabel.dso-tertiary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-tertiary.dso-small.dso-spinner-right::after,\nbutton.dso-tertiary.dso-small.dso-spinner-right::after,\nlabel.dso-tertiary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-tertiary.dso-extra-small,\nbutton.dso-tertiary.dso-extra-small,\nlabel.dso-tertiary.dso-extra-small {\n line-height: 1rem;\n}\na.dso-tertiary.dso-extra-small dso-icon, a.dso-tertiary.dso-extra-small.extern::after, a.dso-tertiary.dso-extra-small.download::after, a.dso-tertiary.dso-extra-small.dso-spinner::before,\nbutton.dso-tertiary.dso-extra-small dso-icon,\nbutton.dso-tertiary.dso-extra-small.extern::after,\nbutton.dso-tertiary.dso-extra-small.download::after,\nbutton.dso-tertiary.dso-extra-small.dso-spinner::before,\nlabel.dso-tertiary.dso-extra-small dso-icon,\nlabel.dso-tertiary.dso-extra-small.extern::after,\nlabel.dso-tertiary.dso-extra-small.download::after,\nlabel.dso-tertiary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-tertiary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-tertiary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-tertiary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-tertiary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-tertiary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-tertiary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-tertiary.dso-extra-small,\nbutton.dso-tertiary.dso-extra-small,\nlabel.dso-tertiary.dso-extra-small {\n padding-block: 9px;\n}\na.dso-tertiary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-tertiary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\na.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n border: 0;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n text-decoration: underline;\n text-underline-position: under;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary span {\n vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n position: relative;\n inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n background: url("./di.svg#download") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n background: url("./di.svg#external-link") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n outline-offset: 2px;\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n outline: 0;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n background-color: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-map:hover,\nbutton.dso-map:hover,\nlabel.dso-map:hover {\n background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n color: var(--_dso-button-secondary-hover-color, #275937);\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n background-color: var(--_dso-button-secondary-active-background-color, #275937);\n border-color: var(--_dso-button-secondary-active-border-color, #275937);\n color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-map[disabled], a.dso-map[disabled]:hover,\nbutton.dso-map[disabled],\nbutton.dso-map[disabled]:hover,\nlabel.dso-map[disabled],\nlabel.dso-map[disabled]:hover {\n background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\na.dso-map.dso-small,\nbutton.dso-map.dso-small,\nlabel.dso-map.dso-small {\n line-height: 1rem;\n}\na.dso-map.dso-small dso-icon, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,\nbutton.dso-map.dso-small dso-icon,\nbutton.dso-map.dso-small.extern::after,\nbutton.dso-map.dso-small.download::after,\nbutton.dso-map.dso-small.dso-spinner::before,\nlabel.dso-map.dso-small dso-icon,\nlabel.dso-map.dso-small.extern::after,\nlabel.dso-map.dso-small.download::after,\nlabel.dso-map.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-map.dso-small.dso-spinner-left::before,\nbutton.dso-map.dso-small.dso-spinner-left::before,\nlabel.dso-map.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-small.dso-spinner-right::after,\nbutton.dso-map.dso-small.dso-spinner-right::after,\nlabel.dso-map.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n line-height: 1rem;\n}\na.dso-map.dso-extra-small dso-icon, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,\nbutton.dso-map.dso-extra-small dso-icon,\nbutton.dso-map.dso-extra-small.extern::after,\nbutton.dso-map.dso-extra-small.download::after,\nbutton.dso-map.dso-extra-small.dso-spinner::before,\nlabel.dso-map.dso-extra-small dso-icon,\nlabel.dso-map.dso-extra-small.extern::after,\nlabel.dso-map.dso-extra-small.download::after,\nlabel.dso-map.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-map.dso-extra-small.dso-spinner-left::before,\nbutton.dso-map.dso-extra-small.dso-spinner-left::before,\nlabel.dso-map.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-extra-small.dso-spinner-right::after,\nbutton.dso-map.dso-extra-small.dso-spinner-right::after,\nlabel.dso-map.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n padding-block: 9px;\n}\na.dso-map dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-map dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-map dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\na.dso-map span:not(.sr-only) + dso-icon,\nbutton.dso-map span:not(.sr-only) + dso-icon,\nlabel.dso-map span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-map dso-icon + span:not(.sr-only),\nbutton.dso-map dso-icon + span:not(.sr-only),\nlabel.dso-map dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],\nbutton.dso-map.dso-spinner-left[disabled],\nbutton.dso-map.dso-spinner-right[disabled],\nlabel.dso-map.dso-spinner-left[disabled],\nlabel.dso-map.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-map.dso-spinner-left::before,\nbutton.dso-map.dso-spinner-left::before,\nlabel.dso-map.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-map.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]):hover::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-spinner-right::after,\nbutton.dso-map.dso-spinner-right::after,\nlabel.dso-map.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]):hover::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n border: 0;\n font-weight: 600;\n margin-inline-end: 16px;\n padding-block: 8px;\n padding-inline: 16px;\n white-space: nowrap;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n outline-offset: -1px;\n}\na.dso-map:has(span.sr-only):has(dso-icon),\nbutton.dso-map:has(span.sr-only):has(dso-icon),\nlabel.dso-map:has(span.sr-only):has(dso-icon) {\n padding: 8px;\n min-inline-size: auto;\n block-size: 40px;\n inline-size: 40px;\n}\n\na.dso-primary {\n text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n color: #fff;\n}\na.dso-secondary {\n text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n color: #275937;\n}\na.dso-tertiary {\n text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n margin-inline-start: 16px;\n}\n\n:host {\n background-color: #fff;\n border: 1px solid #ccc;\n inset-block-end: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n transition: transform 300ms ease;\n inline-size: 300px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button,\n:host([open]) .toggle-visibility-icon-button {\n display: none;\n}\n:host([open]) .zoom-buttons {\n inset-block-start: 16px;\n}\n\n.toggle-visibility-icon-button {\n display: none;\n}\n\n.toggle-visibility-button {\n position: absolute;\n inset-inline-end: calc(100% + 56px);\n inset-block-start: 16px;\n}\n\n.zoom-buttons {\n position: absolute;\n inset-inline-end: calc(100% + 16px);\n inset-block-start: 16px;\n}\n\n.close-button {\n padding: 0;\n position: absolute;\n inset-inline-end: 16px;\n inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n block-size: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-block-end: 1px solid #ccc;\n flex-grow: 0;\n position: relative;\n}\nheader h2 {\n color: #275937;\n font-family: "Asap", sans-serif;\n line-height: 1;\n margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n button.toggle-visibility-button {\n display: none;\n }\n .toggle-visibility-icon-button {\n display: inline-block;\n position: absolute;\n inset-block-start: 16px;\n inset-inline-end: calc(100% + 16px);\n }\n .zoom-buttons {\n inset-block-start: 72px;\n }\n}`;var i=undefined&&undefined.__classPrivateFieldGet||function(n,o,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o==="function"?n!==o||!r:!o.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(n):r?r.value:o.get(n)};var l=undefined&&undefined.__classPrivateFieldSet||function(n,o,e,r,a){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof o==="function"?n!==o||!a:!o.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?a.call(n,e):a?a.value=e:o.set(n,e),e};var c,b,p;const f=300;const m=class{constructor(e){n(this,e);this.dsoZoomIn=o(this,"dsoZoomIn",7);this.dsoZoomOut=o(this,"dsoZoomOut",7);this.dsoToggle=o(this,"dsoToggle",7);this.open=false;this.hideContent=!this.open;this.text=s((()=>this.host),t);c.set(this,void 0);b.set(this,void 0);p.set(this,void 0)}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=i(this,c,"f"))===null||n===void 0?void 0:n.focus()}),f)}else{setTimeout((()=>{var n,o,e;this.hideContent=true;if((n=i(this,b,"f"))===null||n===void 0?void 0:n.checkVisibility()){(o=i(this,b,"f"))===null||o===void 0?void 0:o.focus()}if((e=i(this,p,"f"))===null||e===void 0?void 0:e.checkVisibility()){i(this,p,"f").focus()}}),f)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return e(r,{key:"31c5d89ecdc3151ae2fc526ff0dede8dcac86cc7"},e("dso-icon-button",{key:"48ef2aed7c06164db5b7e7970e58e89bb6542c41",label:this.text("layersButton"),icon:"layers",variant:"map",tooltipPlacement:"left",class:"toggle-visibility-icon-button",onDsoClick:n=>this.toggleVisibility(n.detail.originalEvent),ref:n=>l(this,p,n,"f")}),e("button",{key:"1d14943fa858477fb01370095a1d9ee61da45be5",type:"button",class:"dso-map toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>l(this,b,n,"f")},e("dso-icon",{key:"4d854ab110c6a91008d08452764ee4bfe2e92cc1",icon:"layers"}),e("span",{key:"0aa99415bf2944299a319215e6d667323a03e9f2"},this.text("layersButton"))),e("dso-button-group",{key:"cc499e10742bac282222a550a389191680b3d7c5",class:"zoom-buttons",direction:"column"},e("dso-icon-button",{key:"dfa5283d7dd8f9ec0cc4718613eb1d265dc6fb19",label:this.text("zoomIn"),icon:"plus",variant:"map",tooltipPlacement:"left",onDsoClick:n=>this.dsoZoomIn.emit(n.detail.originalEvent),disabled:this.disableZoom==="in"||this.disableZoom==="both"}),e("dso-icon-button",{key:"92636c6fa991095c9615901f54bfac09a92543f0",label:this.text("zoomOut"),icon:"minus",variant:"map",tooltipPlacement:"left",onDsoClick:n=>this.dsoZoomOut.emit(n.detail.originalEvent),disabled:this.disableZoom==="out"||this.disableZoom==="both"})),e("section",{key:"3acd93f44a44be85490fd118210a8f60672ec444",hidden:this.hideContent},e("header",{key:"20f02fdc7d4393e830fef60aeebd459a363b1b40"},e("h2",{key:"3b64e4c12246cd89bdceceaa05f1868d1e242477"},this.text("title")),e("dso-icon-button",{key:"003abb86c99a583639090443690125f2b5c512f9",class:"close-button",label:this.text("hidePanel",{title:this.text("title")}),icon:"times",variant:"tertiary",onDsoClick:n=>this.toggleVisibility(n.detail.originalEvent),ref:n=>l(this,c,n,"f")})),e("dso-scrollable",{key:"7c2aa131fdefbc6adde5b736b8469272d50519c6"},e("div",{key:"62958c695eb80b1f838c714989da69771c557f3f",class:"content"},e("slot",{key:"86ee6e7002cffbae46a9db1df9e9d574a59a9f50"})))))}get host(){return a(this)}static get watchers(){return{open:["watchOpen"]}}};c=new WeakMap,b=new WeakMap,p=new WeakMap;m.style=d();export{m as dso_map_controls};
2
- //# sourceMappingURL=p-5d3ac273.entry.js.map
1
+ import{r as n,d as o,h as e,F as r,g as a}from"./p-Dx5skKSq.js";import{i as s}from"./p-pxiVAmq4.js";const t={en:{"dso-map-controls":{title:"Map layers",layersButton:"Map layers",zoomIn:"Zoom in",zoomOut:"Zoom out",hidePanel:"Hide panel {{title}}"}},nl:{"dso-map-controls":{title:"Kaartlagen",layersButton:"Kaartlagen",zoomIn:"Zoom in",zoomOut:"Zoom uit",hidePanel:"Verberg paneel {{title}}"}}};const d=()=>`button {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n background-color: var(--_dso-button-primary-background-color, #39870c);\n border-color: var(--_dso-button-primary-border-color, #39870c);\n color: var(--_dso-button-primary-color, #fff);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n background-color: var(--_dso-button-primary-hover-background-color, #275937);\n border-color: var(--_dso-button-primary-hover-border-color, #275937);\n color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n background-color: var(--_dso-button-primary-active-background-color, #173521);\n border-color: var(--_dso-button-primary-active-border-color, #173521);\n color: var(--_dso-button-primary-active-color, #fff);\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n line-height: 1rem;\n}\na.dso-primary.dso-extra-small dso-icon, a.dso-primary.dso-extra-small.extern::after, a.dso-primary.dso-extra-small.download::after, a.dso-primary.dso-extra-small.dso-spinner::before,\nbutton.dso-primary.dso-extra-small dso-icon,\nbutton.dso-primary.dso-extra-small.extern::after,\nbutton.dso-primary.dso-extra-small.download::after,\nbutton.dso-primary.dso-extra-small.dso-spinner::before,\nlabel.dso-primary.dso-extra-small dso-icon,\nlabel.dso-primary.dso-extra-small.extern::after,\nlabel.dso-primary.dso-extra-small.download::after,\nlabel.dso-primary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-primary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-primary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-primary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-primary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-primary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-primary.dso-extra-small,\nbutton.dso-primary.dso-extra-small,\nlabel.dso-primary.dso-extra-small {\n padding-block: 9px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n background: url("./di.svg#download-wit") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n background: url("./di.svg#external-link-wit") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n background-color: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n color: var(--_dso-button-secondary-hover-color, #275937);\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n background-color: var(--_dso-button-secondary-active-background-color, #275937);\n border-color: var(--_dso-button-secondary-active-border-color, #275937);\n color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n line-height: 1rem;\n}\na.dso-secondary.dso-extra-small dso-icon, a.dso-secondary.dso-extra-small.extern::after, a.dso-secondary.dso-extra-small.download::after, a.dso-secondary.dso-extra-small.dso-spinner::before,\nbutton.dso-secondary.dso-extra-small dso-icon,\nbutton.dso-secondary.dso-extra-small.extern::after,\nbutton.dso-secondary.dso-extra-small.download::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner::before,\nlabel.dso-secondary.dso-extra-small dso-icon,\nlabel.dso-secondary.dso-extra-small.extern::after,\nlabel.dso-secondary.dso-extra-small.download::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-extra-small,\nbutton.dso-secondary.dso-extra-small,\nlabel.dso-secondary.dso-extra-small {\n padding-block: 9px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n background: url("./di.svg#download") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-wit"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n background: url("./di.svg#external-link") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-wit"));\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n content: "";\n display: inline-block;\n margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n background-color: var(--_dso-button-tertiary-background-color, );\n border-color: var(--_dso-button-tertiary-border-color, );\n color: var(--_dso-button-tertiary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: auto;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-tertiary:hover,\nbutton.dso-tertiary:hover,\nlabel.dso-tertiary:hover {\n background-color: var(--_dso-button-tertiary-hover-background-color, );\n border-color: var(--_dso-button-tertiary-hover-border-color, );\n color: var(--_dso-button-tertiary-hover-color, #275937);\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n background-color: var(--_dso-button-tertiary-active-background-color, );\n border-color: var(--_dso-button-tertiary-active-border-color, );\n color: var(--_dso-button-tertiary-active-color, #173521);\n}\na.dso-tertiary[disabled], a.dso-tertiary[disabled]:hover,\nbutton.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled]:hover,\nlabel.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled]:hover {\n background-color: var(--_dso-button-tertiary-disabled-background-color, );\n border-color: var(--_dso-button-tertiary-disabled-border-color, );\n color: var(--_dso-button-tertiary-disabled-color, #afcf9d);\n}\na.dso-tertiary.dso-small,\nbutton.dso-tertiary.dso-small,\nlabel.dso-tertiary.dso-small {\n line-height: 1rem;\n}\na.dso-tertiary.dso-small dso-icon, a.dso-tertiary.dso-small.extern::after, a.dso-tertiary.dso-small.download::after, a.dso-tertiary.dso-small.dso-spinner::before,\nbutton.dso-tertiary.dso-small dso-icon,\nbutton.dso-tertiary.dso-small.extern::after,\nbutton.dso-tertiary.dso-small.download::after,\nbutton.dso-tertiary.dso-small.dso-spinner::before,\nlabel.dso-tertiary.dso-small dso-icon,\nlabel.dso-tertiary.dso-small.extern::after,\nlabel.dso-tertiary.dso-small.download::after,\nlabel.dso-tertiary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-tertiary.dso-small.dso-spinner-left::before,\nbutton.dso-tertiary.dso-small.dso-spinner-left::before,\nlabel.dso-tertiary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-tertiary.dso-small.dso-spinner-right::after,\nbutton.dso-tertiary.dso-small.dso-spinner-right::after,\nlabel.dso-tertiary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-tertiary.dso-extra-small,\nbutton.dso-tertiary.dso-extra-small,\nlabel.dso-tertiary.dso-extra-small {\n line-height: 1rem;\n}\na.dso-tertiary.dso-extra-small dso-icon, a.dso-tertiary.dso-extra-small.extern::after, a.dso-tertiary.dso-extra-small.download::after, a.dso-tertiary.dso-extra-small.dso-spinner::before,\nbutton.dso-tertiary.dso-extra-small dso-icon,\nbutton.dso-tertiary.dso-extra-small.extern::after,\nbutton.dso-tertiary.dso-extra-small.download::after,\nbutton.dso-tertiary.dso-extra-small.dso-spinner::before,\nlabel.dso-tertiary.dso-extra-small dso-icon,\nlabel.dso-tertiary.dso-extra-small.extern::after,\nlabel.dso-tertiary.dso-extra-small.download::after,\nlabel.dso-tertiary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-tertiary.dso-extra-small.dso-spinner-left::before,\nbutton.dso-tertiary.dso-extra-small.dso-spinner-left::before,\nlabel.dso-tertiary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-tertiary.dso-extra-small.dso-spinner-right::after,\nbutton.dso-tertiary.dso-extra-small.dso-spinner-right::after,\nlabel.dso-tertiary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-tertiary.dso-extra-small,\nbutton.dso-tertiary.dso-extra-small,\nlabel.dso-tertiary.dso-extra-small {\n padding-block: 9px;\n}\na.dso-tertiary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-tertiary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\na.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n border: 0;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n text-decoration: underline;\n text-underline-position: under;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary span {\n vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n position: relative;\n inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n background: url("./di.svg#download") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-grasgroen-40"));\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#download-bosgroen"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n background: url("./di.svg#external-link") no-repeat center;\n background-size: cover;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-grasgroen-40"));\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n background-image: var(--_dso-di-background-image, url("./di.svg#external-link-bosgroen"));\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n outline-offset: 2px;\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n outline: 0;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n background-color: var(--_dso-button-secondary-background-color, #fff);\n border-color: var(--_dso-button-secondary-border-color, #39870c);\n color: var(--_dso-button-secondary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\na.dso-map:hover,\nbutton.dso-map:hover,\nlabel.dso-map:hover {\n background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n border-color: var(--_dso-button-secondary-hover-border-color, #275937);\n color: var(--_dso-button-secondary-hover-color, #275937);\n}\na.dso-map:active,\nbutton.dso-map:active,\nlabel.dso-map:active {\n background-color: var(--_dso-button-secondary-active-background-color, #275937);\n border-color: var(--_dso-button-secondary-active-border-color, #275937);\n color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-map[disabled], a.dso-map[disabled]:hover,\nbutton.dso-map[disabled],\nbutton.dso-map[disabled]:hover,\nlabel.dso-map[disabled],\nlabel.dso-map[disabled]:hover {\n background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\na.dso-map.dso-small,\nbutton.dso-map.dso-small,\nlabel.dso-map.dso-small {\n line-height: 1rem;\n}\na.dso-map.dso-small dso-icon, a.dso-map.dso-small.extern::after, a.dso-map.dso-small.download::after, a.dso-map.dso-small.dso-spinner::before,\nbutton.dso-map.dso-small dso-icon,\nbutton.dso-map.dso-small.extern::after,\nbutton.dso-map.dso-small.download::after,\nbutton.dso-map.dso-small.dso-spinner::before,\nlabel.dso-map.dso-small dso-icon,\nlabel.dso-map.dso-small.extern::after,\nlabel.dso-map.dso-small.download::after,\nlabel.dso-map.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-map.dso-small.dso-spinner-left::before,\nbutton.dso-map.dso-small.dso-spinner-left::before,\nlabel.dso-map.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-small.dso-spinner-right::after,\nbutton.dso-map.dso-small.dso-spinner-right::after,\nlabel.dso-map.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n line-height: 1rem;\n}\na.dso-map.dso-extra-small dso-icon, a.dso-map.dso-extra-small.extern::after, a.dso-map.dso-extra-small.download::after, a.dso-map.dso-extra-small.dso-spinner::before,\nbutton.dso-map.dso-extra-small dso-icon,\nbutton.dso-map.dso-extra-small.extern::after,\nbutton.dso-map.dso-extra-small.download::after,\nbutton.dso-map.dso-extra-small.dso-spinner::before,\nlabel.dso-map.dso-extra-small dso-icon,\nlabel.dso-map.dso-extra-small.extern::after,\nlabel.dso-map.dso-extra-small.download::after,\nlabel.dso-map.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\na.dso-map.dso-extra-small.dso-spinner-left::before,\nbutton.dso-map.dso-extra-small.dso-spinner-left::before,\nlabel.dso-map.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-extra-small.dso-spinner-right::after,\nbutton.dso-map.dso-extra-small.dso-spinner-right::after,\nlabel.dso-map.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-extra-small,\nbutton.dso-map.dso-extra-small,\nlabel.dso-map.dso-extra-small {\n padding-block: 9px;\n}\na.dso-map dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-map dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-map dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\na.dso-map span:not(.sr-only) + dso-icon,\nbutton.dso-map span:not(.sr-only) + dso-icon,\nlabel.dso-map span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\na.dso-map dso-icon + span:not(.sr-only),\nbutton.dso-map dso-icon + span:not(.sr-only),\nlabel.dso-map dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-left[disabled], a.dso-map.dso-spinner-right[disabled],\nbutton.dso-map.dso-spinner-left[disabled],\nbutton.dso-map.dso-spinner-right[disabled],\nlabel.dso-map.dso-spinner-left[disabled],\nlabel.dso-map.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\na.dso-map.dso-spinner-left::before,\nbutton.dso-map.dso-spinner-left::before,\nlabel.dso-map.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-map.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]):hover::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\na.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-map.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map.dso-spinner-right::after,\nbutton.dso-map.dso-spinner-right::after,\nlabel.dso-map.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]):hover::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\na.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-map.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\na.dso-map,\nbutton.dso-map,\nlabel.dso-map {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n border: 0;\n font-weight: 600;\n margin-inline-end: 16px;\n padding-block: 8px;\n padding-inline: 16px;\n white-space: nowrap;\n}\na.dso-map:focus, a.dso-map:focus-visible,\nbutton.dso-map:focus,\nbutton.dso-map:focus-visible,\nlabel.dso-map:focus,\nlabel.dso-map:focus-visible {\n outline-offset: -1px;\n}\na.dso-map:has(span.sr-only):has(dso-icon),\nbutton.dso-map:has(span.sr-only):has(dso-icon),\nlabel.dso-map:has(span.sr-only):has(dso-icon) {\n padding: 8px;\n min-inline-size: auto;\n block-size: 40px;\n inline-size: 40px;\n}\n\na.dso-primary {\n text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n color: #fff;\n}\na.dso-secondary {\n text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n color: #275937;\n}\na.dso-tertiary {\n text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n margin-inline-start: 16px;\n}\n\n:host {\n background-color: #fff;\n border: 1px solid #ccc;\n inset-block-end: 0;\n display: block;\n font-family: Asap, sans-serif;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n transition: transform 300ms ease;\n inline-size: 300px;\n}\n\n*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host([open]) {\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button,\n:host([open]) .toggle-visibility-icon-button {\n display: none;\n}\n:host([open]) .zoom-buttons {\n inset-block-start: 16px;\n}\n\n.toggle-visibility-icon-button {\n display: none;\n}\n\n.toggle-visibility-button {\n position: absolute;\n inset-inline-end: calc(100% + 56px);\n inset-block-start: 16px;\n}\n\n.zoom-buttons {\n position: absolute;\n inset-inline-end: calc(100% + 16px);\n inset-block-start: 16px;\n}\n\n.close-button {\n padding: 0;\n position: absolute;\n inset-inline-end: 16px;\n inset-block-start: 16px;\n}\n\nsection:not([hidden]) {\n display: flex;\n flex-direction: column;\n block-size: 100%;\n}\n\nheader,\n.content {\n padding: 16px;\n}\n\nheader {\n border-block-end: 1px solid #ccc;\n flex-grow: 0;\n position: relative;\n}\nheader h2 {\n color: #275937;\n font-family: "Asap", sans-serif;\n line-height: 1;\n margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n button.toggle-visibility-button {\n display: none;\n }\n .toggle-visibility-icon-button {\n display: inline-block;\n position: absolute;\n inset-block-start: 16px;\n inset-inline-end: calc(100% + 16px);\n }\n .zoom-buttons {\n inset-block-start: 72px;\n }\n}`;var i=undefined&&undefined.__classPrivateFieldGet||function(n,o,e,r){if(e==="a"&&!r)throw new TypeError("Private accessor was defined without a getter");if(typeof o==="function"?n!==o||!r:!o.has(n))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?r:e==="a"?r.call(n):r?r.value:o.get(n)};var l=undefined&&undefined.__classPrivateFieldSet||function(n,o,e,r,a){if(r==="m")throw new TypeError("Private method is not writable");if(r==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof o==="function"?n!==o||!a:!o.has(n))throw new TypeError("Cannot write private member to an object whose class did not declare it");return r==="a"?a.call(n,e):a?a.value=e:o.set(n,e),e};var c,b,p;const f=300;const m=class{constructor(e){n(this,e);this.dsoZoomIn=o(this,"dsoZoomIn",7);this.dsoZoomOut=o(this,"dsoZoomOut",7);this.dsoToggle=o(this,"dsoToggle",7);this.open=false;this.hideContent=!this.open;this.text=s((()=>this.host),t);c.set(this,void 0);b.set(this,void 0);p.set(this,void 0)}watchOpen(n){if(n){this.hideContent=false;setTimeout((()=>{var n;return(n=i(this,c,"f"))===null||n===void 0?void 0:n.focus()}),f)}else{setTimeout((()=>{var n,o,e;this.hideContent=true;if((n=i(this,b,"f"))===null||n===void 0?void 0:n.checkVisibility()){(o=i(this,b,"f"))===null||o===void 0?void 0:o.focus()}if((e=i(this,p,"f"))===null||e===void 0?void 0:e.checkVisibility()){i(this,p,"f").focus()}}),f)}}async toggleVisibility(n){this.open=!this.open;this.dsoToggle.emit({originalEvent:n,open:this.open})}render(){return e(r,{key:"31c5d89ecdc3151ae2fc526ff0dede8dcac86cc7"},e("dso-icon-button",{key:"48ef2aed7c06164db5b7e7970e58e89bb6542c41",label:this.text("layersButton"),icon:"layers",variant:"map",tooltipPlacement:"left",class:"toggle-visibility-icon-button",onDsoClick:n=>this.toggleVisibility(n.detail.originalEvent),ref:n=>l(this,p,n,"f")}),e("button",{key:"1d14943fa858477fb01370095a1d9ee61da45be5",type:"button",class:"dso-map toggle-visibility-button",onClick:n=>this.toggleVisibility(n),ref:n=>l(this,b,n,"f")},e("dso-icon",{key:"4d854ab110c6a91008d08452764ee4bfe2e92cc1",icon:"layers"}),e("span",{key:"0aa99415bf2944299a319215e6d667323a03e9f2"},this.text("layersButton"))),e("dso-button-group",{key:"cc499e10742bac282222a550a389191680b3d7c5",class:"zoom-buttons",direction:"column"},e("dso-icon-button",{key:"dfa5283d7dd8f9ec0cc4718613eb1d265dc6fb19",label:this.text("zoomIn"),icon:"plus",variant:"map",tooltipPlacement:"left",onDsoClick:n=>this.dsoZoomIn.emit(n.detail.originalEvent),disabled:this.disableZoom==="in"||this.disableZoom==="both"}),e("dso-icon-button",{key:"92636c6fa991095c9615901f54bfac09a92543f0",label:this.text("zoomOut"),icon:"minus",variant:"map",tooltipPlacement:"left",onDsoClick:n=>this.dsoZoomOut.emit(n.detail.originalEvent),disabled:this.disableZoom==="out"||this.disableZoom==="both"})),e("section",{key:"3acd93f44a44be85490fd118210a8f60672ec444",hidden:this.hideContent},e("header",{key:"20f02fdc7d4393e830fef60aeebd459a363b1b40"},e("h2",{key:"3b64e4c12246cd89bdceceaa05f1868d1e242477"},this.text("title")),e("dso-icon-button",{key:"003abb86c99a583639090443690125f2b5c512f9",class:"close-button",label:this.text("hidePanel",{title:this.text("title")}),icon:"times",variant:"tertiary",onDsoClick:n=>this.toggleVisibility(n.detail.originalEvent),ref:n=>l(this,c,n,"f")})),e("dso-scrollable",{key:"7c2aa131fdefbc6adde5b736b8469272d50519c6"},e("div",{key:"62958c695eb80b1f838c714989da69771c557f3f",class:"content"},e("slot",{key:"86ee6e7002cffbae46a9db1df9e9d574a59a9f50"})))))}get host(){return a(this)}static get watchers(){return{open:["watchOpen"]}}};c=new WeakMap,b=new WeakMap,p=new WeakMap;m.style=d();export{m as dso_map_controls};
2
+ //# sourceMappingURL=p-5e8291ba.entry.js.map
package/dist/dso-toolkit/{p-96728e50.entry.js → p-7fc764a4.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as n,d as o,f as t,h as e,F as r,g as i}from"./p-Dx5skKSq.js";import{c as s}from"./p-ChV9xqsO.js";const a=()=>`*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n border: 0;\n overflow: hidden;\n clip-path: rect(0 0 0 0);\n}\n\n.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.dso-tertiary:active {\n outline: 0;\n}\n.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.dso-tertiary:active {\n outline: 0;\n}\n.dso-tertiary {\n background-color: var(--_dso-button-tertiary-background-color, );\n border-color: var(--_dso-button-tertiary-border-color, );\n color: var(--_dso-button-tertiary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: 56px;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.dso-tertiary:hover {\n background-color: var(--_dso-button-tertiary-hover-background-color, );\n border-color: var(--_dso-button-tertiary-hover-border-color, );\n color: var(--_dso-button-tertiary-hover-color, #275937);\n}\n.dso-tertiary:active {\n background-color: var(--_dso-button-tertiary-active-background-color, );\n border-color: var(--_dso-button-tertiary-active-border-color, );\n color: var(--_dso-button-tertiary-active-color, #173521);\n}\n.dso-tertiary[disabled], .dso-tertiary[disabled]:hover {\n background-color: var(--_dso-button-tertiary-disabled-background-color, );\n border-color: var(--_dso-button-tertiary-disabled-border-color, );\n color: var(--_dso-button-tertiary-disabled-color, #afcf9d);\n}\n.dso-tertiary.dso-small {\n line-height: 1rem;\n}\n.dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.dso-tertiary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.dso-tertiary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.dso-tertiary.dso-extra-small {\n line-height: 1rem;\n}\n.dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.dso-tertiary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.dso-tertiary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.dso-tertiary.dso-extra-small {\n padding-block: 9px;\n}\n.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\n.dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\n.dso-tertiary {\n border: 0;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n text-decoration: underline;\n text-underline-position: under;\n}\n.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary span {\n vertical-align: middle;\n}\n.dso-tertiary {\n cursor: pointer;\n}\n\n.dso-input-number {\n align-items: center;\n display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n text-align: center;\n inline-size: 1.5rem;\n font-size: 14px;\n}\n\n.dso-button-group {\n display: flex;\n flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n background-color: #fff;\n border-color: #e5e5e5;\n color: #666;\n pointer-events: none;\n}\n.dso-button-group > * {\n border-radius: 0;\n}\n.dso-button-group > *:first-child {\n border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n border-style: solid;\n border-width: 1px;\n flex-wrap: nowrap;\n padding-block: 0;\n padding-inline: 16px;\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n}\n@media screen and (max-width: 767px) {\n .dso-button-group > .dso-input-number {\n justify-content: center;\n }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n opacity: 1;\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n}\n.dso-button-group .dso-list-button {\n padding-inline-end: 15px;\n}\n\n.dso-list-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n outline-offset: 2px;\n}\n.dso-list-button:active {\n outline: 0;\n}\n.dso-list-button {\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n font-weight: 600;\n padding-block: 15px;\n padding-inline: 15px 47px;\n position: relative;\n text-align: start;\n white-space: normal;\n inline-size: 100%;\n cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n opacity: 1;\n}\n.dso-list-button dso-selectable:not(:last-child) {\n margin-block-end: 0;\n}\n.dso-list-button .dso-selectable-container label {\n font-weight: 700;\n}\n.dso-list-button.dso-selected {\n border-color: #39870c;\n border-width: 1px;\n box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n .dso-list-button.dso-selected.dso-single-count {\n border-inline-end: 0;\n box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n }\n}\n.dso-list-button label {\n cursor: inherit;\n}\n.dso-list-button > span {\n display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n font-weight: 400;\n inline-size: 100%;\n padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n block-size: 24px;\n color: #39870c;\n inset-block-start: 15px;\n inset-inline-end: 15px;\n inline-size: 24px;\n break-before: page;\n position: absolute;\n}\n@media screen and (max-width: 767px) {\n .dso-list-button.dso-selected.dso-single-count::after {\n inline-size: 0;\n }\n}`;const d=class{constructor(t){n(this,t);this.dsoCountChange=o(this,"dsoCountChange",7);this.dsoSelectedChange=o(this,"dsoSelectedChange",7);this.checked=false;this.disabled=false}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n,o;if(!((n=this.subcontentSlot)===null||n===void 0?void 0:n.hasAttribute("aria-hidden"))){(o=this.subcontentSlot)===null||o===void 0?void 0:o.setAttribute("aria-hidden","true")}}disconnectedCallback(){var n;(n=this.mutationObserver)===null||n===void 0?void 0:n.disconnect();delete this.mutationObserver}stepValue(n,o){if(typeof this.count==="number"){const t=o==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(t)){return}this.dsoCountChange.emit({originalEvent:n,count:t})}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}isNewCountValid(n){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max)))}render(){const n=this.checked||this.count!==undefined&&this.count>0;return e("div",{key:"a155334345712bda3dd58924d60ccd467923f6fc",class:s(["dso-button-group",{"dso-disabled":this.disabled}])},e("div",{key:"1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee",class:s(["dso-list-button",{"dso-selected":n,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},e("dso-selectable",{key:"5f1430413821bc31c793b2ccaed2a00509a3cfc6",type:"checkbox",value:"list-button",name:"naam",checked:n,disabled:this.disabled},this.label,this.sublabel&&e("span",{key:"97302b35983f8659e51b7993619c5d007b9eadc5",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&e("span",{key:"8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",e("span",{key:"6e0fe1caffbfdfa878b904f558b695def1c18f6f",innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&e("span",{key:"9bfec93907458641755c109304a453ebf728b4ad",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&e("div",{key:"e3feb6e6f3aa1f42efa2e632180459b61a22a7a0",class:"subcontent"},e("slot",{key:"2971bc8037dabb734ecaf3faf1c338a3537fcac6",name:"subcontent"}))),this.count!==undefined&&this.count>0&&e("div",{key:"46543874c528b6db91fed7dd19249dc7547bb86b",class:"dso-input-number"},this.count>1&&e(r,{key:"cf2305047c3bf6f8384829c694ef57642bdd9bbf"},e("dso-icon-button",{key:"6170297a6ce2a60762ba4bf96e59f49097e80d38",label:"Aantal verlagen",variant:"tertiary",icon:"minus-circle",disabled:this.count===Number(this.min)||this.disabled,onDsoClick:n=>this.stepValue(n,"decrement")}),e("span",{key:"e5c419497219f628e34bfdb997fe3b357a9331bd",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),e("dso-icon-button",{key:"225eed4514828a7f1afa06f2c6de8af19ada8b8d",label:"Aantal verhogen",variant:"tertiary",icon:"plus-circle",disabled:this.count===Number(this.max)||this.disabled,onDsoClick:n=>this.stepValue(n,"increment")})))}get host(){return i(this)}};d.style=a();export{d as dso_list_button};
2
- //# sourceMappingURL=p-96728e50.entry.js.map
1
+ import{r as n,d as o,f as t,h as e,F as r,g as i}from"./p-Dx5skKSq.js";import{c as s}from"./p-ChV9xqsO.js";const a=()=>`*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n border: 0;\n overflow: hidden;\n clip-path: rect(0 0 0 0);\n}\n\n.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.dso-tertiary:active {\n outline: 0;\n}\n.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.dso-tertiary:active {\n outline: 0;\n}\n.dso-tertiary {\n background-color: var(--_dso-button-tertiary-background-color, );\n border-color: var(--_dso-button-tertiary-border-color, );\n color: var(--_dso-button-tertiary-color, #39870c);\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-inline-size: auto;\n padding-block: 11px;\n padding-inline: 15px;\n}\n.dso-tertiary:hover {\n background-color: var(--_dso-button-tertiary-hover-background-color, );\n border-color: var(--_dso-button-tertiary-hover-border-color, );\n color: var(--_dso-button-tertiary-hover-color, #275937);\n}\n.dso-tertiary:active {\n background-color: var(--_dso-button-tertiary-active-background-color, );\n border-color: var(--_dso-button-tertiary-active-border-color, );\n color: var(--_dso-button-tertiary-active-color, #173521);\n}\n.dso-tertiary[disabled], .dso-tertiary[disabled]:hover {\n background-color: var(--_dso-button-tertiary-disabled-background-color, );\n border-color: var(--_dso-button-tertiary-disabled-border-color, );\n color: var(--_dso-button-tertiary-disabled-color, #afcf9d);\n}\n.dso-tertiary.dso-small {\n line-height: 1rem;\n}\n.dso-tertiary.dso-small dso-icon, .dso-tertiary.dso-small.extern::after, .dso-tertiary.dso-small.download::after, .dso-tertiary.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.dso-tertiary.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.dso-tertiary.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.dso-tertiary.dso-extra-small {\n line-height: 1rem;\n}\n.dso-tertiary.dso-extra-small dso-icon, .dso-tertiary.dso-extra-small.extern::after, .dso-tertiary.dso-extra-small.download::after, .dso-tertiary.dso-extra-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.dso-tertiary.dso-extra-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.dso-tertiary.dso-extra-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.dso-tertiary.dso-extra-small {\n padding-block: 9px;\n}\n.dso-tertiary dso-icon:has(+ span:not(.sr-only)) {\n margin-inline-start: -8px;\n}\n.dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only) {\n margin-inline-start: 8px;\n}\n.dso-tertiary {\n border: 0;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n text-decoration: underline;\n text-underline-position: under;\n}\n.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");\n background-repeat: no-repeat;\n content: "";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon {\n margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary span {\n vertical-align: middle;\n}\n.dso-tertiary {\n cursor: pointer;\n}\n\n.dso-input-number {\n align-items: center;\n display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n text-align: center;\n inline-size: 1.5rem;\n font-size: 14px;\n}\n\n.dso-button-group {\n display: flex;\n flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n background-color: #fff;\n border-color: #e5e5e5;\n color: #666;\n pointer-events: none;\n}\n.dso-button-group > * {\n border-radius: 0;\n}\n.dso-button-group > *:first-child {\n border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n border-style: solid;\n border-width: 1px;\n flex-wrap: nowrap;\n padding-block: 0;\n padding-inline: 16px;\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n}\n@media screen and (max-width: 767px) {\n .dso-button-group > .dso-input-number {\n justify-content: center;\n }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n opacity: 1;\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n}\n.dso-button-group .dso-list-button {\n padding-inline-end: 15px;\n}\n\n.dso-list-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n background-clip: padding-box;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n outline-offset: 2px;\n}\n.dso-list-button:active {\n outline: 0;\n}\n.dso-list-button {\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n border-radius: 4px;\n border-width: 1px;\n border-style: solid;\n font-weight: 600;\n padding-block: 15px;\n padding-inline: 15px 47px;\n position: relative;\n text-align: start;\n white-space: normal;\n inline-size: 100%;\n cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n opacity: 1;\n}\n.dso-list-button dso-selectable:not(:last-child) {\n margin-block-end: 0;\n}\n.dso-list-button .dso-selectable-container label {\n font-weight: 700;\n}\n.dso-list-button.dso-selected {\n border-color: #39870c;\n border-width: 1px;\n box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n .dso-list-button.dso-selected.dso-single-count {\n border-inline-end: 0;\n box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n }\n}\n.dso-list-button label {\n cursor: inherit;\n}\n.dso-list-button > span {\n display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n font-weight: 400;\n inline-size: 100%;\n padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n block-size: 24px;\n color: #39870c;\n inset-block-start: 15px;\n inset-inline-end: 15px;\n inline-size: 24px;\n break-before: page;\n position: absolute;\n}\n@media screen and (max-width: 767px) {\n .dso-list-button.dso-selected.dso-single-count::after {\n inline-size: 0;\n }\n}`;const d=class{constructor(t){n(this,t);this.dsoCountChange=o(this,"dsoCountChange",7);this.dsoSelectedChange=o(this,"dsoSelectedChange",7);this.checked=false;this.disabled=false}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}connectedCallback(){this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n,o;if(!((n=this.subcontentSlot)===null||n===void 0?void 0:n.hasAttribute("aria-hidden"))){(o=this.subcontentSlot)===null||o===void 0?void 0:o.setAttribute("aria-hidden","true")}}disconnectedCallback(){var n;(n=this.mutationObserver)===null||n===void 0?void 0:n.disconnect();delete this.mutationObserver}stepValue(n,o){if(typeof this.count==="number"){const t=o==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(t)){return}this.dsoCountChange.emit({originalEvent:n,count:t})}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}isNewCountValid(n){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max)))}render(){const n=this.checked||this.count!==undefined&&this.count>0;return e("div",{key:"a155334345712bda3dd58924d60ccd467923f6fc",class:s(["dso-button-group",{"dso-disabled":this.disabled}])},e("div",{key:"1ac7dbc69f1e7b00fa8cd71b03ae0bbc7c3f98ee",class:s(["dso-list-button",{"dso-selected":n,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},e("dso-selectable",{key:"5f1430413821bc31c793b2ccaed2a00509a3cfc6",type:"checkbox",value:"list-button",name:"naam",checked:n,disabled:this.disabled},this.label,this.sublabel&&e("span",{key:"97302b35983f8659e51b7993619c5d007b9eadc5",class:"sr-only"}," ",this.sublabel),this.subcontentSlot&&e("span",{key:"8324e5ebf88187d5042e4074a7b5a12cd8eb1fb5",class:"sr-only"},this.subcontentPrefix&&this.subcontentPrefix+":"," ",e("span",{key:"6e0fe1caffbfdfa878b904f558b695def1c18f6f",innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&e("span",{key:"9bfec93907458641755c109304a453ebf728b4ad",class:"dso-sublabel"},this.sublabel),this.subcontentSlot&&e("div",{key:"e3feb6e6f3aa1f42efa2e632180459b61a22a7a0",class:"subcontent"},e("slot",{key:"2971bc8037dabb734ecaf3faf1c338a3537fcac6",name:"subcontent"}))),this.count!==undefined&&this.count>0&&e("div",{key:"46543874c528b6db91fed7dd19249dc7547bb86b",class:"dso-input-number"},this.count>1&&e(r,{key:"cf2305047c3bf6f8384829c694ef57642bdd9bbf"},e("dso-icon-button",{key:"6170297a6ce2a60762ba4bf96e59f49097e80d38",label:"Aantal verlagen",variant:"tertiary",icon:"minus-circle",disabled:this.count===Number(this.min)||this.disabled,onDsoClick:n=>this.stepValue(n,"decrement")}),e("span",{key:"e5c419497219f628e34bfdb997fe3b357a9331bd",class:"dso-input-step-counter","aria-label":"Aantal","aria-live":"polite"},this.count)),e("dso-icon-button",{key:"225eed4514828a7f1afa06f2c6de8af19ada8b8d",label:"Aantal verhogen",variant:"tertiary",icon:"plus-circle",disabled:this.count===Number(this.max)||this.disabled,onDsoClick:n=>this.stepValue(n,"increment")})))}get host(){return i(this)}};d.style=a();export{d as dso_list_button};
2
+ //# sourceMappingURL=p-7fc764a4.entry.js.map