@dso-toolkit/core 54.0.1 → 54.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/dist/cjs/dso-accordion.cjs.entry.js +4 -1
  2. package/dist/cjs/dso-annotation-output.cjs.entry.js +5 -1
  3. package/dist/cjs/dso-autosuggest.cjs.entry.js +3 -3
  4. package/dist/cjs/dso-date-picker.cjs.entry.js +16 -2
  5. package/dist/cjs/dso-dropdown-menu.cjs.entry.js +2 -1
  6. package/dist/cjs/dso-expandable-heading.cjs.entry.js +1 -1
  7. package/dist/cjs/dso-expandable.cjs.entry.js +3 -0
  8. package/dist/cjs/dso-info_2.cjs.entry.js +1 -1
  9. package/dist/cjs/dso-map-controls.cjs.entry.js +2 -2
  10. package/dist/cjs/dso-pagination.cjs.entry.js +17 -4
  11. package/dist/cjs/dso-responsive-element.cjs.entry.js +3 -0
  12. package/dist/cjs/dso-scrollable.cjs.entry.js +101 -0
  13. package/dist/cjs/dso-table.cjs.entry.js +3 -0
  14. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  15. package/dist/cjs/dso-tooltip.cjs.entry.js +8 -2
  16. package/dist/cjs/dso-tree-view.cjs.entry.js +8 -1
  17. package/dist/cjs/dso-viewer-grid.cjs.entry.js +1 -1
  18. package/dist/cjs/loader.cjs.js +1 -1
  19. package/dist/collection/collection-manifest.json +1 -0
  20. package/dist/collection/components/accordion/accordion.js +4 -1
  21. package/dist/collection/components/annotation-output/annotation-output.js +5 -1
  22. package/dist/collection/components/autosuggest/autosuggest.js +3 -3
  23. package/dist/collection/components/date-picker/date-picker-month.js +5 -1
  24. package/dist/collection/components/date-picker/date-picker.js +6 -0
  25. package/dist/collection/components/date-picker/date-utils.js +5 -1
  26. package/dist/collection/components/dropdown-menu/dropdown-menu.js +2 -1
  27. package/dist/collection/components/expandable/expandable.js +8 -1
  28. package/dist/collection/components/expandable-heading/expandable-heading.css +4 -4
  29. package/dist/collection/components/map-controls/map-controls.css +0 -5
  30. package/dist/collection/components/map-controls/map-controls.js +1 -1
  31. package/dist/collection/components/pagination/pagination.js +17 -4
  32. package/dist/collection/components/responsive-element/responsive-element.js +3 -0
  33. package/dist/collection/components/scrollable/scrollable.css +50 -0
  34. package/dist/collection/components/scrollable/scrollable.interfaces.js +1 -0
  35. package/dist/collection/components/scrollable/scrollable.js +149 -0
  36. package/dist/collection/components/selectable/selectable.css +1 -1
  37. package/dist/collection/components/table/table.js +3 -0
  38. package/dist/collection/components/tooltip/tooltip.js +8 -2
  39. package/dist/collection/components/tree-view/tree-view.js +8 -1
  40. package/dist/collection/components/viewer-grid/viewer-grid.css +2 -2
  41. package/dist/collection/index.js +1 -0
  42. package/dist/components/dropdown-menu.js +2 -1
  43. package/dist/components/dso-accordion.js +4 -1
  44. package/dist/components/dso-annotation-output.js +5 -1
  45. package/dist/components/dso-autosuggest.js +3 -3
  46. package/dist/components/dso-date-picker.js +16 -2
  47. package/dist/components/dso-expandable-heading.js +1 -1
  48. package/dist/components/dso-map-controls.js +10 -4
  49. package/dist/components/dso-pagination.js +17 -4
  50. package/dist/components/dso-scrollable.d.ts +11 -0
  51. package/dist/components/dso-scrollable.js +6 -0
  52. package/dist/components/dso-table.js +3 -0
  53. package/dist/components/dso-tree-view.js +8 -1
  54. package/dist/components/dso-viewer-grid.js +1 -1
  55. package/dist/components/expandable.js +3 -0
  56. package/dist/components/index.d.ts +1 -0
  57. package/dist/components/index.js +1 -0
  58. package/dist/components/responsive-element.js +3 -0
  59. package/dist/components/scrollable.js +115 -0
  60. package/dist/components/selectable.js +1 -1
  61. package/dist/components/tooltip.js +8 -2
  62. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  63. package/dist/dso-toolkit/p-281aa19e.entry.js +1 -0
  64. package/dist/dso-toolkit/p-296657d3.entry.js +1 -0
  65. package/dist/dso-toolkit/{p-5e50b616.entry.js → p-564a5d95.entry.js} +1 -1
  66. package/dist/dso-toolkit/p-5d533423.entry.js +1 -0
  67. package/dist/dso-toolkit/{p-bb90ea4c.entry.js → p-7912940d.entry.js} +1 -1
  68. package/dist/dso-toolkit/p-9361b19e.entry.js +1 -0
  69. package/dist/dso-toolkit/p-ae45e550.entry.js +1 -0
  70. package/dist/dso-toolkit/p-b9777372.entry.js +1 -0
  71. package/dist/dso-toolkit/p-baef3721.entry.js +1 -0
  72. package/dist/dso-toolkit/p-bc975b99.entry.js +1 -0
  73. package/dist/dso-toolkit/p-c2215704.entry.js +1 -0
  74. package/dist/dso-toolkit/{p-fa2f1a1c.entry.js → p-ca4fee8d.entry.js} +1 -1
  75. package/dist/dso-toolkit/p-ccff72e8.entry.js +1 -0
  76. package/dist/dso-toolkit/p-e8c46f70.entry.js +1 -0
  77. package/dist/dso-toolkit/{p-fe7ca25f.entry.js → p-f0c5d1b4.entry.js} +1 -1
  78. package/dist/dso-toolkit/p-f3e38af3.entry.js +1 -0
  79. package/dist/esm/dso-accordion.entry.js +4 -1
  80. package/dist/esm/dso-annotation-output.entry.js +5 -1
  81. package/dist/esm/dso-autosuggest.entry.js +3 -3
  82. package/dist/esm/dso-date-picker.entry.js +16 -2
  83. package/dist/esm/dso-dropdown-menu.entry.js +2 -1
  84. package/dist/esm/dso-expandable-heading.entry.js +1 -1
  85. package/dist/esm/dso-expandable.entry.js +3 -0
  86. package/dist/esm/dso-info_2.entry.js +1 -1
  87. package/dist/esm/dso-map-controls.entry.js +2 -2
  88. package/dist/esm/dso-pagination.entry.js +17 -4
  89. package/dist/esm/dso-responsive-element.entry.js +3 -0
  90. package/dist/esm/dso-scrollable.entry.js +97 -0
  91. package/dist/esm/dso-table.entry.js +3 -0
  92. package/dist/esm/dso-toolkit.js +1 -1
  93. package/dist/esm/dso-tooltip.entry.js +8 -2
  94. package/dist/esm/dso-tree-view.entry.js +8 -1
  95. package/dist/esm/dso-viewer-grid.entry.js +1 -1
  96. package/dist/esm/loader.js +1 -1
  97. package/dist/types/components/expandable/expandable.d.ts +2 -2
  98. package/dist/types/components/expandable/expandable.interfaces.d.ts +2 -2
  99. package/dist/types/components/scrollable/scrollable.d.ts +21 -0
  100. package/dist/types/components/scrollable/scrollable.interfaces.d.ts +4 -0
  101. package/dist/types/components/tooltip/tooltip.d.ts +1 -0
  102. package/dist/types/components.d.ts +28 -1
  103. package/dist/types/index.d.ts +1 -0
  104. package/package.json +2 -2
  105. package/dist/dso-toolkit/p-09424a1d.entry.js +0 -1
  106. package/dist/dso-toolkit/p-36224d6f.entry.js +0 -1
  107. package/dist/dso-toolkit/p-588bc4d7.entry.js +0 -1
  108. package/dist/dso-toolkit/p-5de8b79a.entry.js +0 -1
  109. package/dist/dso-toolkit/p-a1616935.entry.js +0 -1
  110. package/dist/dso-toolkit/p-ad0b38cf.entry.js +0 -1
  111. package/dist/dso-toolkit/p-b7580ce3.entry.js +0 -1
  112. package/dist/dso-toolkit/p-c54ad578.entry.js +0 -1
  113. package/dist/dso-toolkit/p-cf9b79df.entry.js +0 -1
  114. package/dist/dso-toolkit/p-d987ef37.entry.js +0 -1
  115. package/dist/dso-toolkit/p-eaae698e.entry.js +0 -1
package/dist/components/dso-viewer-grid.js CHANGED
@@ -9,7 +9,7 @@ const ViewerGridFilterpanelButtons = ({ onApply, onCancel, }) => (h("div", { cla
9
9
  h("span", null, "Toepassen"),
10
10
  h("dso-icon", { icon: "chevron-right" }))));
11
11
 
12
- const viewerGridCss = "*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: flex;\n height: 100vh;\n overflow: hidden;\n position: relative;\n}\n\n:host([small]) .dso-map-panel {\n flex-basis: 375px;\n min-width: 0;\n max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n :host([small]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 0;\n transition: none;\n }\n}\n\n:host([medium]) .dso-map-panel {\n flex-basis: 624px;\n min-width: 375px;\n max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n :host([medium]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 375px;\n transition: none;\n }\n}\n\n:host([large]) .dso-map-panel {\n flex-basis: 60%;\n min-width: 768px;\n max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n :host([large]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 768px;\n transition: none;\n }\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n color: #173521;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n display: none;\n}\n\n.overlay-close-button {\n position: absolute;\n top: 8px;\n right: 16px;\n}\n\n.dso-map-panel {\n background-color: #fff;\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 8px;\n position: relative;\n transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n font-weight: bold;\n margin: 8px 0;\n}\n.dso-map-panel .main {\n height: 100%;\n overflow-y: scroll;\n padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n left: calc(100% + 1px);\n overflow-x: hidden;\n padding: 0 4px 4px 0;\n position: absolute;\n top: 16px;\n transition: left 200ms ease-in;\n width: 44px;\n z-index: -1;\n}\n.sizing-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.sizing-buttons button:active {\n outline: 0;\n}\n.sizing-buttons button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.sizing-buttons button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n color: #fff;\n}\n\n.map {\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n background-color: #fff;\n height: 100%;\n overflow-y: auto;\n position: absolute;\n z-index: 101;\n}\n\n.filterpanel {\n box-shadow: 2px 0 5px #666;\n padding: 8px 16px;\n left: 0;\n max-width: 896px;\n width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n .filterpanel {\n width: 100vw;\n }\n .filterpanel::before {\n display: none !important;\n }\n}\n.filterpanel h1 {\n color: #275937;\n margin-bottom: 16px;\n margin-top: 24px;\n font-size: 2rem;\n font-weight: 700;\n}\n.filterpanel::before {\n content: \"\";\n display: block;\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 896px;\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n .filterpanel::before {\n left: auto;\n width: 40px;\n }\n}\n\n.overlay {\n box-shadow: -2px 0 5px #666;\n padding: 40px 16px 8px;\n right: 0;\n width: 624px;\n}\n@media screen and (max-width: 624px) {\n .overlay {\n width: 100vw;\n }\n}\n\n.dimscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 624px;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 102;\n}\n\n.filterpanel-buttons {\n text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n background-color: #173521;\n border-color: #173521;\n color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n margin-left: 16px;\n}";
12
+ const viewerGridCss = "*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: flex;\n height: 100vh;\n overflow: hidden;\n position: relative;\n}\n\n:host([small]) .dso-map-panel {\n flex-basis: 375px;\n min-width: 0;\n max-width: 375px;\n}\n@media screen and (max-width: 375px) {\n :host([small]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 0;\n transition: none;\n }\n}\n\n:host([medium]) .dso-map-panel {\n flex-basis: 624px;\n min-width: 375px;\n max-width: 624px;\n}\n@media screen and (max-width: 624px) {\n :host([medium]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 375px;\n transition: none;\n }\n}\n\n:host([large]) .dso-map-panel {\n flex-basis: 60%;\n min-width: 768px;\n max-width: 1024px;\n}\n@media screen and (max-width: 768px) {\n :host([large]) .dso-map-panel {\n flex-basis: 100vw;\n max-width: 100vw;\n min-width: 768px;\n transition: none;\n }\n}\n\nbutton {\n -webkit-appearance: button;\n color: inherit;\n cursor: pointer;\n font: inherit;\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n margin: 0;\n overflow: visible;\n text-transform: none;\n}\nbutton[disabled] {\n cursor: default;\n}\nbutton::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.shrink,\n.expand,\n.overlay-close-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.shrink:focus, .shrink:focus-visible,\n.expand:focus,\n.expand:focus-visible,\n.overlay-close-button:focus,\n.overlay-close-button:focus-visible {\n outline-offset: 2px;\n}\n.shrink:active,\n.expand:active,\n.overlay-close-button:active {\n outline: 0;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n color: #afcf9d;\n}\n.shrink[disabled].dso-spinner-left, .shrink[disabled].dso-spinner-right,\n.expand[disabled].dso-spinner-left,\n.expand[disabled].dso-spinner-right,\n.overlay-close-button[disabled].dso-spinner-left,\n.overlay-close-button[disabled].dso-spinner-right {\n color: #39870c;\n}\n.shrink:not([disabled]):hover,\n.expand:not([disabled]):hover,\n.overlay-close-button:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.shrink:not([disabled]):active,\n.expand:not([disabled]):active,\n.overlay-close-button:not([disabled]):active {\n color: #173521;\n}\n.shrink.btn-align,\n.expand.btn-align,\n.overlay-close-button.btn-align {\n line-height: calc(1.5em - 1px);\n padding: 11px 0;\n position: relative;\n}\n.shrink.dso-spinner-left::before,\n.expand.dso-spinner-left::before,\n.overlay-close-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-right: 8px;\n}\n.shrink.dso-spinner-right::after,\n.expand.dso-spinner-right::after,\n.overlay-close-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: middle;\n width: 24px;\n margin-left: 8px;\n}\n.shrink dso-icon + span:not(.sr-only),\n.shrink svg.di + span:not(.sr-only),\n.shrink span:not(.sr-only) + dso-icon,\n.shrink span:not(.sr-only) + svg.di,\n.expand dso-icon + span:not(.sr-only),\n.expand svg.di + span:not(.sr-only),\n.expand span:not(.sr-only) + dso-icon,\n.expand span:not(.sr-only) + svg.di,\n.overlay-close-button dso-icon + span:not(.sr-only),\n.overlay-close-button svg.di + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + dso-icon,\n.overlay-close-button span:not(.sr-only) + svg.di {\n margin-left: 8px;\n}\n.shrink svg.di.di-chevron-down + span:not(.sr-only),\n.shrink svg.di.di-chevron-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-chevron-down,\n.shrink span:not(.sr-only) + svg.di.di-chevron-up,\n.expand svg.di.di-chevron-down + span:not(.sr-only),\n.expand svg.di.di-chevron-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-chevron-down,\n.expand span:not(.sr-only) + svg.di.di-chevron-up,\n.overlay-close-button svg.di.di-chevron-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-chevron-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-chevron-up {\n margin-left: 4px;\n}\n.shrink dso-icon[icon=chevron-left] + span:not(.sr-only),\n.shrink dso-icon[icon=chevron-right] + span:not(.sr-only),\n.shrink svg.di.di-angle-down + span:not(.sr-only),\n.shrink svg.di.di-angle-up + span:not(.sr-only),\n.shrink span:not(.sr-only) + svg.di.di-angle-down,\n.shrink span:not(.sr-only) + svg.di.di-angle-up,\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-left],\n.shrink span:not(.sr-only) + dso-icon[icon=chevron-right],\n.expand dso-icon[icon=chevron-left] + span:not(.sr-only),\n.expand dso-icon[icon=chevron-right] + span:not(.sr-only),\n.expand svg.di.di-angle-down + span:not(.sr-only),\n.expand svg.di.di-angle-up + span:not(.sr-only),\n.expand span:not(.sr-only) + svg.di.di-angle-down,\n.expand span:not(.sr-only) + svg.di.di-angle-up,\n.expand span:not(.sr-only) + dso-icon[icon=chevron-left],\n.expand span:not(.sr-only) + dso-icon[icon=chevron-right],\n.overlay-close-button dso-icon[icon=chevron-left] + span:not(.sr-only),\n.overlay-close-button dso-icon[icon=chevron-right] + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-down + span:not(.sr-only),\n.overlay-close-button svg.di.di-angle-up + span:not(.sr-only),\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-down,\n.overlay-close-button span:not(.sr-only) + svg.di.di-angle-up,\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-left],\n.overlay-close-button span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-left: 0;\n}\n.shrink dso-icon,\n.shrink svg.di,\n.shrink span,\n.expand dso-icon,\n.expand svg.di,\n.expand span,\n.overlay-close-button dso-icon,\n.overlay-close-button svg.di,\n.overlay-close-button span {\n vertical-align: middle;\n}\n.shrink:hover,\n.expand:hover,\n.overlay-close-button:hover {\n cursor: pointer;\n}\n.shrink[disabled],\n.expand[disabled],\n.overlay-close-button[disabled] {\n display: none;\n}\n\n.overlay-close-button {\n position: absolute;\n top: 8px;\n right: 16px;\n}\n\n.dso-map-panel {\n background-color: #fff;\n box-shadow: 2px 0 8px 0 rgba(0, 0, 0, 0.4);\n flex-shrink: 0;\n flex-grow: 0;\n padding-right: 8px;\n position: relative;\n transition: flex-basis 200ms ease-in, max-width 200ms ease-in, min-width 200ms ease-in;\n z-index: 100;\n}\n.dso-map-panel .dso-filterblok-address {\n font-weight: bold;\n margin: 8px 0;\n}\n.dso-map-panel .main {\n height: 100%;\n overflow-y: scroll;\n padding: 0 16px 8px;\n}\n\n.sizing-buttons {\n left: calc(100% + 1px);\n overflow-x: hidden;\n padding: 0 4px 4px 0;\n position: absolute;\n top: 16px;\n transition: left 200ms ease-in;\n width: 44px;\n z-index: -1;\n}\n.sizing-buttons button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n border: 0;\n padding: 8px;\n border-radius: 0;\n border-bottom-right-radius: 4px;\n border-top-right-radius: 4px;\n box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);\n flex: 0 0 100%;\n height: 40px;\n min-width: auto;\n width: 40px;\n}\n.sizing-buttons button:focus, .sizing-buttons button:focus-visible {\n outline-offset: 2px;\n}\n.sizing-buttons button:active {\n outline: 0;\n}\n.sizing-buttons button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.sizing-buttons button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.sizing-buttons button[disabled], .sizing-buttons button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.sizing-buttons button.btn-sm {\n line-height: 1rem;\n}\n.sizing-buttons button.btn-sm dso-icon,\n.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button > span {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n.sizing-buttons button.dso-spinner-left[disabled], .sizing-buttons button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.sizing-buttons button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.sizing-buttons button:focus-visible {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n outline: none;\n}\n.sizing-buttons button:hover dso-icon {\n color: #fff;\n}\n\n.map {\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n.filterpanel,\n.overlay {\n background-color: #fff;\n height: 100%;\n overflow-y: auto;\n position: absolute;\n z-index: 101;\n}\n\n.filterpanel {\n box-shadow: 2px 0 5px #666;\n padding: 8px 16px;\n left: 0;\n max-width: 896px;\n width: calc(100vw - 40px);\n}\n@media screen and (max-width: 768px) {\n .filterpanel {\n width: 100vw;\n }\n .filterpanel::before {\n display: none !important;\n }\n}\n.filterpanel h1 {\n color: #275937;\n margin-block-end: 16px;\n margin-block-start: 24px;\n font-size: 2rem;\n font-weight: 700;\n}\n.filterpanel::before {\n content: \"\";\n display: block;\n position: fixed;\n top: 0;\n bottom: 0;\n right: 0;\n left: 896px;\n background-color: rgba(0, 0, 0, 0.5);\n}\n@media screen and (max-width: 936px) {\n .filterpanel::before {\n left: auto;\n width: 40px;\n }\n}\n\n.overlay {\n box-shadow: -2px 0 5px #666;\n padding: 40px 16px 8px;\n right: 0;\n width: 624px;\n}\n@media screen and (max-width: 624px) {\n .overlay {\n width: 100vw;\n }\n}\n\n.dimscreen {\n position: fixed;\n top: 0;\n bottom: 0;\n left: 0;\n right: 624px;\n background-color: rgba(0, 0, 0, 0.5);\n z-index: 102;\n}\n\n.filterpanel-buttons {\n text-align: right;\n}\n.filterpanel-buttons .cancel-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button:focus, .filterpanel-buttons .cancel-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .cancel-button:active {\n outline: 0;\n}\n.filterpanel-buttons .cancel-button:hover {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button:active {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .cancel-button[disabled], .filterpanel-buttons .cancel-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.filterpanel-buttons .cancel-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .cancel-button.btn-sm dso-icon,\n.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button span + dso-icon,\n.filterpanel-buttons .cancel-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left[disabled], .filterpanel-buttons .cancel-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]):hover::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]):hover::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button dso-icon,\n.filterpanel-buttons .cancel-button svg.di, .filterpanel-buttons .cancel-button.extern::after, .filterpanel-buttons .cancel-button.download::after, .filterpanel-buttons .cancel-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-bottom: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: left;\n user-select: none;\n vertical-align: middle;\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n line-height: 1.5;\n min-width: 56px;\n padding: 11px 15px;\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button:focus, .filterpanel-buttons .apply-button:focus-visible {\n outline-offset: 2px;\n}\n.filterpanel-buttons .apply-button:active {\n outline: 0;\n}\n.filterpanel-buttons .apply-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.filterpanel-buttons .apply-button:active {\n background-color: #173521;\n border-color: #173521;\n color: #fff;\n}\n.filterpanel-buttons .apply-button[disabled], .filterpanel-buttons .apply-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.btn-sm {\n line-height: 1rem;\n}\n.filterpanel-buttons .apply-button.btn-sm dso-icon,\n.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di {\n margin-left: -8px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button span + dso-icon,\n.filterpanel-buttons .apply-button span + svg.di {\n margin-left: 8px;\n margin-right: -8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left[disabled], .filterpanel-buttons .apply-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-right: 8px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n height: 24px;\n vertical-align: top;\n width: 24px;\n margin-left: 8px;\n}\n.filterpanel-buttons .apply-button dso-icon,\n.filterpanel-buttons .apply-button svg.di, .filterpanel-buttons .apply-button.extern::after, .filterpanel-buttons .apply-button.download::after, .filterpanel-buttons .apply-button.dso-spinner::before {\n margin-bottom: -4px;\n margin-top: -4px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-left::before {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .apply-button.dso-spinner-right::after {\n height: 16px;\n width: 16px;\n}\n.filterpanel-buttons .cancel-button + .apply-button {\n margin-left: 16px;\n}";
13
13
 
14
14
  const ViewerGrid = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
15
15
  constructor() {
package/dist/components/expandable.js CHANGED
@@ -1374,6 +1374,9 @@ const Expandable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
1374
1374
  }
1375
1375
  prepareAnimationResizeObserver() {
1376
1376
  this.resizeObserver = new ResizeObserver(debounce_1(([entry]) => {
1377
+ if (!entry) {
1378
+ throw new Error("No entry found");
1379
+ }
1377
1380
  // entry.contentRect does not include padding, so we use getBoundingClientRect.
1378
1381
  const height = entry.target.getBoundingClientRect().height;
1379
1382
  if (this.bodyHeight !== height) {
package/dist/components/index.d.ts CHANGED
@@ -34,6 +34,7 @@ export { Pagination as DsoPagination } from '../types/components/pagination/pagi
34
34
  export { ProgressBar as DsoProgressBar } from '../types/components/progress-bar/progress-bar';
35
35
  export { Progressindicator as DsoProgressIndicator } from '../types/components/progress-indicator/progress-indicator';
36
36
  export { ResponsiveElement as DsoResponsiveElement } from '../types/components/responsive-element/responsive-element';
37
+ export { Scrollable as DsoScrollable } from '../types/components/scrollable/scrollable';
37
38
  export { Selectable as DsoSelectable } from '../types/components/selectable/selectable';
38
39
  export { SlideToggle as DsoSlideToggle } from '../types/components/slide-toggle/slide-toggle';
39
40
  export { Table as DsoTable } from '../types/components/table/table';
package/dist/components/index.js CHANGED
@@ -34,6 +34,7 @@ export { DsoPagination, defineCustomElement as defineCustomElementDsoPagination
34
34
  export { DsoProgressBar, defineCustomElement as defineCustomElementDsoProgressBar } from './dso-progress-bar.js';
35
35
  export { DsoProgressIndicator, defineCustomElement as defineCustomElementDsoProgressIndicator } from './dso-progress-indicator.js';
36
36
  export { DsoResponsiveElement, defineCustomElement as defineCustomElementDsoResponsiveElement } from './dso-responsive-element.js';
37
+ export { DsoScrollable, defineCustomElement as defineCustomElementDsoScrollable } from './dso-scrollable.js';
37
38
  export { DsoSelectable, defineCustomElement as defineCustomElementDsoSelectable } from './dso-selectable.js';
38
39
  export { DsoSlideToggle, defineCustomElement as defineCustomElementDsoSlideToggle } from './dso-slide-toggle.js';
39
40
  export { DsoTable, defineCustomElement as defineCustomElementDsoTable } from './dso-table.js';
package/dist/components/responsive-element.js CHANGED
@@ -24,6 +24,9 @@ const ResponsiveElement = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
24
24
  this.dsoSizeChange = createEvent(this, "dsoSizeChange", 7);
25
25
  this.observer = new ResizeObserver(([entry]) => {
26
26
  var _a, _b;
27
+ if (!entry) {
28
+ throw new Error("No entry found");
29
+ }
27
30
  const size = (_b = (_a = elementSizes.find((s) => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
28
31
  this.sizeAlias = size;
29
32
  this.dsoSizeChange.emit(size);
package/dist/components/scrollable.js ADDED
@@ -0,0 +1,115 @@
1
+ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
2
+ import { c as clsx } from './clsx.m.js';
3
+ import { d as debounce_1 } from './index3.js';
4
+
5
+ const scrollableCss = ":host{display:block;height:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{height:100%;position:relative}.dso-shadow-container .dso-scroll-container{height:100%;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;height:24px;left:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;width:100%}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));top:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));bottom:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
6
+
7
+ const resizeObserver = new ResizeObserver(debounce_1((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
8
+ function getScrollableComponentFromResizeObserverEntry({ target, }) {
9
+ if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {
10
+ return target.parentNode.host;
11
+ }
12
+ if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {
13
+ return target.parentElement;
14
+ }
15
+ return undefined;
16
+ }
17
+ function isDsoScrollableComponent(element) {
18
+ return element.tagName === "DSO-SCROLLABLE" && "_setScrollState" in element;
19
+ }
20
+ const Scrollable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
21
+ constructor() {
22
+ super();
23
+ this.__registerHost();
24
+ this.__attachShadow();
25
+ this.dsoScrollEnd = createEvent(this, "dsoScrollEnd", 7);
26
+ // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126
27
+ this.mutationObserver = new MutationObserver((entries) => entries.forEach(({ target }) => {
28
+ var _a;
29
+ const element = (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.closest("dso-scrollable");
30
+ if (element !== this.host) {
31
+ return;
32
+ }
33
+ this._setScrollState();
34
+ }));
35
+ this.scrollPosition = "noScroll";
36
+ }
37
+ /**
38
+ * Internal method. Do not use.
39
+ */
40
+ async _setScrollState() {
41
+ const scrollPosition = this.getScrollPosition();
42
+ if (this.scrollPosition !== scrollPosition) {
43
+ this.scrollPosition = scrollPosition;
44
+ if (this.scrollPosition === "top" || this.scrollPosition === "bottom") {
45
+ this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });
46
+ }
47
+ }
48
+ }
49
+ get slottedElements() {
50
+ return Array.from(this.host.children);
51
+ }
52
+ getScrollPosition() {
53
+ if (!this.scrollContainerDiv) {
54
+ return "noScroll";
55
+ }
56
+ const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;
57
+ if (scrollHeight <= clientHeight) {
58
+ return "noScroll";
59
+ }
60
+ if (scrollTop === 0) {
61
+ return "top";
62
+ }
63
+ if (scrollHeight - scrollTop - clientHeight < 1) {
64
+ return "bottom";
65
+ }
66
+ if (scrollTop > 0) {
67
+ return "middle";
68
+ }
69
+ return "noScroll";
70
+ }
71
+ componentDidLoad() {
72
+ this.mutationObserver.observe(this.host, {
73
+ characterData: true,
74
+ attributes: false,
75
+ childList: false,
76
+ subtree: true,
77
+ });
78
+ if (this.scrollContainerDiv instanceof HTMLDivElement) {
79
+ resizeObserver.observe(this.scrollContainerDiv);
80
+ }
81
+ this.slottedElements.forEach((element) => resizeObserver.observe(element));
82
+ }
83
+ disconnectedCallback() {
84
+ if (this.scrollContainerDiv instanceof HTMLDivElement) {
85
+ resizeObserver.unobserve(this.scrollContainerDiv);
86
+ }
87
+ this.mutationObserver.disconnect();
88
+ this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
89
+ }
90
+ render() {
91
+ return (h("div", { class: "dso-shadow-container" }, h("div", { ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
92
+ [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
93
+ }), onScroll: () => this._setScrollState() }, h("slot", null))));
94
+ }
95
+ get host() { return this; }
96
+ static get style() { return scrollableCss; }
97
+ }, [1, "dso-scrollable", {
98
+ "scrollPosition": [32],
99
+ "_setScrollState": [64]
100
+ }]);
101
+ function defineCustomElement() {
102
+ if (typeof customElements === "undefined") {
103
+ return;
104
+ }
105
+ const components = ["dso-scrollable"];
106
+ components.forEach(tagName => { switch (tagName) {
107
+ case "dso-scrollable":
108
+ if (!customElements.get(tagName)) {
109
+ customElements.define(tagName, Scrollable);
110
+ }
111
+ break;
112
+ } });
113
+ }
114
+
115
+ export { Scrollable as S, defineCustomElement as d };
package/dist/components/selectable.js CHANGED
@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './icon.js';
5
5
  import { d as defineCustomElement$2 } from './info.js';
6
6
  import { d as defineCustomElement$1 } from './info-button.js';
7
7
 
8
- const selectableCss = ".sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h{--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline;margin-inline:-32px;min-height:24px;padding-inline:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}";
8
+ const selectableCss = ".sc-dso-selectable-h{display:block;position:relative}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-top:8px;padding-left:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-top:8px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{height:24px;left:0;margin:0;opacity:0;position:absolute;top:0;width:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-left:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";height:20px;left:2px;position:absolute;top:2px;width:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);height:18px;left:3px;top:3px;width:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;height:22px;left:1px;top:1px;width:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";left:6px;opacity:0;position:absolute;top:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-top-color:transparent;border-width:0 0 3px 3px;height:8px;transform:rotate(-45deg);width:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);height:12px;width:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";height:12px;left:6px;opacity:0;position:absolute;top:6px;width:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin:8px 16px 0 0;width:100%}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-bottom:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block;position:relative;padding-inline-start:32px}.dso-selectable-container.has-info-button.sc-dso-selectable{padding-inline-end:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline;margin-inline:-32px;min-height:24px;padding-inline:32px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within{border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);height:20px;left:2px;top:2px;width:20px}dso-info-button.sc-dso-selectable{position:absolute;right:0;top:0}";
9
9
 
10
10
  const Selectable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
11
11
  constructor() {
package/dist/components/tooltip.js CHANGED
@@ -80,6 +80,12 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
80
80
  activate: () => (this.active = true),
81
81
  deactivate: () => (this.active = false),
82
82
  };
83
+ this.onMouseLeave = () => {
84
+ var _a;
85
+ if (!this.element.matches(":hover") && !((_a = this.target) === null || _a === void 0 ? void 0 : _a.matches(":hover"))) {
86
+ this.callbacks.deactivate();
87
+ }
88
+ };
83
89
  this.keyDownListener = (event) => {
84
90
  if (event.key === "Escape") {
85
91
  this.deactivate();
@@ -177,7 +183,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
177
183
  }
178
184
  if (!this.stateless && this.target) {
179
185
  this.target.addEventListener("mouseenter", this.callbacks.activate);
180
- this.target.addEventListener("mouseleave", this.callbacks.deactivate);
186
+ [this.element, this.target].forEach((element) => element.addEventListener("mouseleave", this.onMouseLeave));
181
187
  this.target.addEventListener("focus", this.callbacks.activate);
182
188
  this.target.addEventListener("blur", this.callbacks.deactivate);
183
189
  }
@@ -187,7 +193,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
187
193
  (_a = this.popper) === null || _a === void 0 ? void 0 : _a.destroy();
188
194
  if (!this.stateless && this.target) {
189
195
  this.target.removeEventListener("mouseenter", this.callbacks.activate);
190
- this.target.removeEventListener("mouseleave", this.callbacks.deactivate);
196
+ [this.element, this.target].forEach((element) => element.removeEventListener("mouseleave", this.onMouseLeave));
191
197
  this.target.removeEventListener("focus", this.callbacks.activate);
192
198
  this.target.removeEventListener("blur", this.callbacks.deactivate);
193
199
  }
package/dist/dso-toolkit/dso-toolkit.esm.js CHANGED
@@ -1 +1 @@
1
- import{p as e,b as o}from"./p-98fd1658.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-efdf5c91",[[1,"dso-icon",{icon:[1]}]]],["p-0fce0861",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-f8a08ba1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-36224d6f",[[4,"dso-annotation-output",{identifier:[1],annotationPrefix:[1,"annotation-prefix"],toggleAnnotation:[64]}]]],["p-d4772fb0",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-96f44d35",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],state:[1],attachmentCount:[2,"attachment-count"],icon:[1],status:[1],open:[1540],hasNestedSection:[32],hover:[32],toggleSection:[64],scrollSectionIntoView:[64]}]]],["p-eaae698e",[[1,"dso-expandable-heading",{open:[4],heading:[1],color:[1],editAction:[1,"edit-action"]}]]],["p-975c172a",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]}]]],["p-8a77030b",[[1,"dso-label",{compact:[4],removable:[4],status:[1],truncate:[4],removeHover:[32],removeFocus:[32],textHover:[32],textFocus:[32],isTruncated:[32],labelText:[32],truncateLabel:[64],syncLabelText:[64]}]]],["p-09424a1d",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-588bc4d7",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-6a99d7f8",[[1,"dso-action-list-item",{step:[2],itemTitle:[1,"item-title"],flowLine:[4,"flow-line"],warning:[4],divider:[4]}]]],["p-5082d823",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-ee1acb32",[[0,"dso-annotation-button",{identifier:[1]}]]],["p-d6ea8670",[[1,"dso-attachments-counter",{count:[2]}]]],["p-c54ad578",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],loadingDelayed:[2,"loading-delayed"],notFoundLabel:[1,"not-found-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32],notFound:[32],showLoading:[32]},[[4,"click","onDocumentClick"]]]]],["p-cf9b79df",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],invalid:[516],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-d10ec2b3",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-398a8e0b",[[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-e04d87e0",[[1,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],manual:[4],manualInputWrapperElement:[32],manualCount:[32]}]]],["p-b7580ce3",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]}]]],["p-3238f7ee",[[1,"dso-modal",{modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],initialFocus:[1,"initial-focus"],returnFocus:[16],ariaId:[32],hasFooter:[32]}]]],["p-a1616935",[[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-bb90ea4c",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-ad0b38cf",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],allowMultipleOpen:[516,"allow-multiple-open"],getState:[64],toggleSection:[64],animationEnd:[64],closeOpenSections:[64]}]]],["p-e8a6ccf5",[[1,"dso-action-list",{listTitle:[1,"list-title"]}]]],["p-07952ece",[[1,"dso-badge",{status:[1]}]]],["p-1cb94d7d",[[1,"dso-banner",{status:[513]}]]],["p-61ac8d40",[[1,"dso-card",{isSelectable:[516,"is-selectable"],hasImage:[516,"has-image"],clickable:[4],imageShape:[513,"image-shape"]}]]],["p-69f37ab3",[[1,"dso-card-container",{mode:[513]}]]],["p-c1226b66",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-3b91c3e9",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[520],state:[32]}]]],["p-494fe8e5",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-82465cdc",[[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]],["p-5e50b616",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],dropdownOptionsOffset:[2,"dropdown-options-offset"],checkable:[4],boundary:[1],strategy:[1]}]]],["p-0af9bfb1",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-d987ef37",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-5de8b79a",[[1,"dso-tooltip",{descriptive:[516],position:[1],strategy:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-fe7ca25f",[[1,"dso-expandable",{open:[516],enableAnimation:[4,"enable-animation"],minimumHeight:[2,"minimum-height"],animationReady:[32],getAnimeInstance:[64],getBodyHeight:[64]}]]],["p-3914ad70",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-fa2f1a1c",[[6,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],labelledById:[1,"labelled-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],toggleInfo:[64]}],[1,"dso-info",{fixed:[516],active:[516]}]]]],e)));
1
+ import{p as e,b as o}from"./p-98fd1658.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-efdf5c91",[[1,"dso-icon",{icon:[1]}]]],["p-0fce0861",[[1,"dso-map-base-layers",{group:[1],baseLayers:[16]}]]],["p-f8a08ba1",[[1,"dso-map-overlays",{group:[1],overlays:[16]}]]],["p-5d533423",[[4,"dso-annotation-output",{identifier:[1],annotationPrefix:[1,"annotation-prefix"],toggleAnnotation:[64]}]]],["p-d4772fb0",[[1,"dso-toggletip",{label:[1],position:[1],small:[4],secondary:[4],active:[32]}]]],["p-96f44d35",[[1,"dso-accordion-section",{handleTitle:[1,"handle-title"],heading:[1],handleUrl:[1,"handle-url"],state:[1],attachmentCount:[2,"attachment-count"],icon:[1],status:[1],open:[1540],hasNestedSection:[32],hover:[32],toggleSection:[64],scrollSectionIntoView:[64]}]]],["p-ccff72e8",[[1,"dso-expandable-heading",{open:[4],heading:[1],color:[1],editAction:[1,"edit-action"]}]]],["p-975c172a",[[6,"dso-header",{mainMenu:[16],useDropDownMenu:[1,"use-drop-down-menu"],authStatus:[1,"auth-status"],loginUrl:[1,"login-url"],logoutUrl:[1,"logout-url"],userProfileName:[1,"user-profile-name"],userProfileUrl:[1,"user-profile-url"],userHomeUrl:[1,"user-home-url"],showDropDown:[32],hasSubLogo:[32],overflowMenuItems:[32],dropdownOptionsOffset:[32]}]]],["p-8a77030b",[[1,"dso-label",{compact:[4],removable:[4],status:[1],truncate:[4],removeHover:[32],removeFocus:[32],textHover:[32],textFocus:[32],isTruncated:[32],labelText:[32],truncateLabel:[64],syncLabelText:[64]}]]],["p-b9777372",[[1,"dso-map-controls",{open:[1540],disableZoom:[1,"disable-zoom"],hideContent:[32],toggleVisibility:[64]}]]],["p-e8c46f70",[[1,"dso-pagination",{totalPages:[2,"total-pages"],currentPage:[2,"current-page"],formatHref:[16],availablePositions:[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-281aa19e",[[1,"dso-tree-view",{collection:[16],focusItem:[64]}]]],["p-6a99d7f8",[[1,"dso-action-list-item",{step:[2],itemTitle:[1,"item-title"],flowLine:[4,"flow-line"],warning:[4],divider:[4]}]]],["p-5082d823",[[1,"dso-alert",{status:[1],roleAlert:[4,"role-alert"]}]]],["p-ee1acb32",[[0,"dso-annotation-button",{identifier:[1]}]]],["p-d6ea8670",[[1,"dso-attachments-counter",{count:[2]}]]],["p-296657d3",[[6,"dso-autosuggest",{suggestions:[16],loading:[4],loadingLabel:[1,"loading-label"],loadingDelayed:[2,"loading-delayed"],notFoundLabel:[1,"not-found-label"],suggestOnFocus:[4,"suggest-on-focus"],showSuggestions:[32],selectedSuggestion:[32],notFound:[32],showLoading:[32]},[[4,"click","onDocumentClick"]]]]],["p-c2215704",[[2,"dso-date-picker",{name:[1],identifier:[1],disabled:[516],role:[1],direction:[1],required:[4],invalid:[516],dsoAutofocus:[4,"dso-autofocus"],value:[1537],min:[1],max:[1],activeFocus:[32],focusedDay:[32],open:[32],visible:[32],setFocus:[64],show:[64],hide:[64]},[[6,"click","handleDocumentClick"]]]]],["p-d10ec2b3",[[1,"dso-helpcenter-panel",{label:[1],url:[1],visibility:[32],isOpen:[32],slideState:[32],loadIframe:[32]},[[8,"keydown","keyDownListener"]]]]],["p-398a8e0b",[[1,"dso-image-overlay",{active:[32],zoomable:[32]},[[2,"load","loadListener"]]]]],["p-e04d87e0",[[1,"dso-list-button",{label:[1],sublabel:[1],count:[2],min:[8],max:[8],checked:[516],disabled:[516],manual:[4],manualInputWrapperElement:[32],manualCount:[32]}]]],["p-3238f7ee",[[1,"dso-modal",{modalTitle:[1,"modal-title"],role:[1],showCloseButton:[4,"show-close-button"],initialFocus:[1,"initial-focus"],returnFocus:[16],ariaId:[32],hasFooter:[32]}]]],["p-f3e38af3",[[1,"dso-table",{noModal:[516,"no-modal"],isResponsive:[516,"is-responsive"],modalActive:[32],placeholderHeight:[32]}]]],["p-7912940d",[[1,"dso-viewer-grid",{filterpanelOpen:[516,"filterpanel-open"],overlayOpen:[516,"overlay-open"],initialMainSize:[1,"initial-main-size"],mainSize:[32]}]]],["p-9361b19e",[[1,"dso-accordion",{variant:[513],reverseAlign:[516,"reverse-align"],allowMultipleOpen:[516,"allow-multiple-open"],getState:[64],toggleSection:[64],animationEnd:[64],closeOpenSections:[64]}]]],["p-e8a6ccf5",[[1,"dso-action-list",{listTitle:[1,"list-title"]}]]],["p-07952ece",[[1,"dso-badge",{status:[1]}]]],["p-1cb94d7d",[[1,"dso-banner",{status:[513]}]]],["p-61ac8d40",[[1,"dso-card",{isSelectable:[516,"is-selectable"],hasImage:[516,"has-image"],clickable:[4],imageShape:[513,"image-shape"]}]]],["p-69f37ab3",[[1,"dso-card-container",{mode:[513]}]]],["p-c1226b66",[[1,"dso-highlight-box",{yellow:[4],border:[4],white:[4],dropShadow:[4,"drop-shadow"],step:[2]}]]],["p-3b91c3e9",[[6,"dso-ozon-content",{content:[1],inline:[516],deleted:[516],interactive:[520],state:[32]}]]],["p-494fe8e5",[[1,"dso-progress-bar",{progress:[2],min:[2],max:[2]}]]],["p-82465cdc",[[4,"dso-slide-toggle",{checked:[4],disabled:[4],accessibleLabel:[1,"accessible-label"],labelledbyId:[1,"labelledby-id"],identifier:[1],hasVisibleLabel:[32]}]]],["p-564a5d95",[[1,"dso-dropdown-menu",{open:[1540],dropdownAlign:[1,"dropdown-align"],dropdownOptionsOffset:[2,"dropdown-options-offset"],checkable:[4],boundary:[1],strategy:[1]}]]],["p-ae45e550",[[1,"dso-scrollable",{scrollPosition:[32],_setScrollState:[64]}]]],["p-0af9bfb1",[[1,"dso-progress-indicator",{label:[1],size:[513],block:[4]}]]],["p-baef3721",[[1,"dso-responsive-element",{sizeAlias:[32],sizeWidth:[32],getSize:[64]}]]],["p-bc975b99",[[1,"dso-tooltip",{descriptive:[516],position:[1],strategy:[1],noArrow:[4,"no-arrow"],stateless:[4],small:[4],active:[1540],hidden:[32],activate:[64],deactivate:[64]},[[0,"click","listenClick"]]]]],["p-f0c5d1b4",[[1,"dso-expandable",{open:[516],enableAnimation:[4,"enable-animation"],minimumHeight:[2,"minimum-height"],animationReady:[32],getAnimeInstance:[64],getBodyHeight:[64]}]]],["p-3914ad70",[[1,"dso-info-button",{active:[1540],secondary:[4],label:[1],hover:[32],setFocus:[64]}]]],["p-ca4fee8d",[[6,"dso-selectable",{type:[1],identifier:[1],name:[1],value:[1],invalid:[4],describedById:[1,"described-by-id"],labelledById:[1,"labelled-by-id"],disabled:[4],required:[4],checked:[4],indeterminate:[4],infoFixed:[4,"info-fixed"],infoActive:[32],toggleInfo:[64]}],[1,"dso-info",{fixed:[516],active:[516]}]]]],e)));
package/dist/dso-toolkit/p-281aa19e.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{h as e,F as t,r as o,c as i}from"./p-98fd1658.js";import{c as n}from"./p-6a1980b4.js";const r=({owner:o,ancestors:i,item:s,index:a,level:l,setSize:c})=>{var d,h,p,u;return e("li",{key:s.id,class:n("tree-item",{"has-child":s.hasItems,"is-expanded":!!s.open&&!!(null===(d=s.items)||void 0===d?void 0:d.length)}),role:"none"},e("div",{class:"tree-branch-control"},s.hasItems?e("div",{onClick:e=>o.itemClick(e,i,s)},e("dso-icon",{icon:s.open?"minus-square":"plus-square"})):e("dso-icon",null)),e("p",{class:n("tree-content",{active:s.active},{selected:s.selected}),tabindex:1===l&&0===a?0:-1,role:"treeitem","aria-expanded":s.hasItems?""+(!!s.open&&!!(null===(h=s.items)||void 0===h?void 0:h.length)):void 0,"aria-current":s.active?"true":void 0,"aria-level":l,"aria-setsize":c,"aria-posinset":a+1,"aria-busy":s.loading?"true":void 0,"data-item-id":s.id,onClick:e=>o.itemClick(e,i,s)},s.selected&&e("span",{class:"sr-only"},"Resultaat: "),s.href?e("a",{href:s.href,tabindex:"-1"},s.label):e("span",null,s.label),null===(p=s.icons)||void 0===p?void 0:p.map((t=>e("dso-icon",{icon:t.icon,title:t.label})))),s.open&&e(t,null,s.hasItems&&!s.items&&s.loading?e("dso-progress-indicator",{size:"small",label:"Resultaten laden: een moment geduld alstublieft."}):e("ul",{role:"group"},null===(u=s.items)||void 0===u?void 0:u.map(((t,n,a)=>e(r,{owner:o,ancestors:[...i,s],item:t,index:n,level:l+1,setSize:a.length}))))))},s=class{constructor(e){o(this,e),this.dsoOpenItem=i(this,"dsoOpenItem",7),this.dsoCloseItem=i(this,"dsoCloseItem",7),this.dsoClickItem=i(this,"dsoClickItem",7),this.keyDownListener=e=>{if(e.defaultPrevented)return;const t=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(e.target instanceof HTMLParagraphElement&&t instanceof HTMLElement){switch(e.key){case"ArrowDown":s.moveFocus(t,e.target,"next");break;case"ArrowUp":s.moveFocus(t,e.target,"previous");break;case"ArrowRight":s.expandItemOrFocusChild(t,e.target);break;case"ArrowLeft":s.collapseItemOrFocusParent(t,e.target);break;case"End":s.moveFocus(t,e.target,"last");break;case"Home":s.moveFocus(t,e.target,"first");break;case"Enter":case" ":e.target.click();break;default:if(1===(o=e.key).length&&o.match(/\S/)&&s.setFocusByFirstCharacter(t,e.target,e.key,e.shiftKey))break;return}var o;e.preventDefault()}},this.itemClick=(e,t,o)=>{if(!(e.target instanceof HTMLElement))return;const i=e.target.closest(".tree-content");if(i){const n=e.composedPath().find((e=>e instanceof HTMLElement&&"dso-tree"===e.className));if(!(i instanceof HTMLParagraphElement&&n instanceof HTMLElement))return;return s.setFocus(n,i),void this.dsoClickItem.emit({path:[...t,o],originalEvent:e})}o.open?this.dsoCloseItem.emit([...t,o]):this.dsoOpenItem.emit([...t,o])},this.collection=void 0}async focusItem(e){var t;const o=this.tree;if(!o||0===e.length)return!1;const i=e[e.length-1];if(!i)throw new Error("No itemToFocus found");const n=Array.from(null!==(t=o.querySelectorAll("p"))&&void 0!==t?t:[]).filter((e=>e.offsetWidth>0&&e.offsetHeight>0)).find((e=>e.dataset.itemId===i.id));return!!n&&(s.setFocus(o,n),!0)}static setFocus(e,t){t&&(Array.from(e.querySelectorAll("p")).filter((e=>0===e.tabIndex)).forEach((e=>e.tabIndex=-1)),t.tabIndex=0,t.focus())}static moveFocus(e,t,o){const i=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));let n=0;switch(o){case"first":n=0;break;case"previous":n=i.indexOf(t)-1;break;case"next":n=i.indexOf(t)+1;break;case"last":n=i.length-1}const r=i[n];if(!r)throw new Error("No focusableItem found");s.setFocus(e,r)}static expandItemOrFocusChild(e,t){var o;if("true"===(null==t?void 0:t.getAttribute("aria-expanded")))s.moveFocus(e,t,"next");else{const e=null===(o=t.previousElementSibling)||void 0===o?void 0:o.firstElementChild;e instanceof HTMLElement&&e.click()}}static collapseItemOrFocusParent(e,t){var o,i,n;if("true"===(null==t?void 0:t.getAttribute("aria-expanded"))){const e=null===(o=t.previousElementSibling)||void 0===o?void 0:o.firstElementChild;e instanceof HTMLElement&&e.click()}else{const o=null===(n=null===(i=null==t?void 0:t.parentElement)||void 0===i?void 0:i.parentElement)||void 0===n?void 0:n.previousElementSibling;o instanceof HTMLElement&&s.setFocus(e,o)}}static setFocusByFirstCharacter(e,t,o,i){const n=Array.from(e.querySelectorAll("p")).filter((e=>e.offsetWidth>0&&e.offsetHeight>0));i&&n.reverse();const r=n.indexOf(t);o=o.toLowerCase();let a=n.find(((e,t)=>{var i;return t>r&&(null===(i=e.textContent)||void 0===i?void 0:i.toLowerCase().startsWith(o))}));return a||(a=n.find(((e,t)=>{var i;return t<r&&(null===(i=e.textContent)||void 0===i?void 0:i.toLowerCase().startsWith(o))}))),!!a&&(s.setFocus(e,a),!0)}render(){var t;return e("div",{id:"tree",class:"dso-tree",onKeyDown:e=>this.keyDownListener(e),ref:e=>this.tree=e},e("ul",{role:"tree","aria-label":"Objectenboom"},null===(t=this.collection)||void 0===t?void 0:t.map(((t,o)=>e(r,{owner:this,ancestors:[],item:t,index:o,level:1,setSize:this.collection.length})))))}};s.style=':host ul{list-style-type:none;padding-inline-start:32px;position:relative}:host li{position:relative}:host ul[role=tree]{padding-left:0}:host ul[role=group]::before{border-left:1px solid #275937;content:"";height:8px;left:44px;position:absolute;top:0;width:0}:host li:not(.has-child)::before{border-top:1px solid #275937;content:"";height:0;left:12px;position:absolute;top:20px;width:16px}:host li:not(.has-child)::after{border-left:1px solid #275937;content:"";height:100%;left:12px;position:absolute;top:8px;width:0}:host li:not(.has-child):last-child::after{height:20px;top:0}:host li.has-child::before{border-top:1px solid #275937;content:"";height:0;left:24px;position:absolute;top:20px;width:4px}:host li.has-child:not(:last-child)::after{border-left:1px solid #275937;content:"";height:calc(100% - 24px);left:12px;position:absolute;top:32px;width:0}:host li.has-child.is-expanded:last-child::after{border-left:1px solid #275937;content:"";height:calc(100% - 32px);left:12px;position:absolute;top:32px;width:0}:host .tree-branch-control{color:#39870c;display:inline-block;font-size:16px;margin:8px 8px 8px 0;vertical-align:top}:host .tree-branch-control>div{cursor:pointer}:host .tree-content{cursor:pointer;display:inline-block;margin:8px 0;max-width:calc(100% - 40px)}:host .tree-content a{color:#191919;text-decoration:underline}:host .tree-content a:hover,:host .tree-content a:focus{color:#191919;text-decoration:none}:host .tree-content a:active{text-decoration:none}:host .tree-content.selected{color:#191919;font-weight:700;text-decoration:underline}:host .tree-content.selected:hover,:host .tree-content.selected:focus{text-decoration:none}:host .tree-content.active{color:#8b4a6a;font-style:italic;font-weight:700;text-decoration:underline}:host .tree-content.active:hover,:host .tree-content.active:focus{text-decoration:none}:host .tree-content.active a{color:#8b4a6a}:host .tree-content.active a:hover,:host .tree-content.active a:focus{text-decoration:none}:host .tree-content dso-icon{color:#39870c;font-size:0.75em;margin-left:0.5em;vertical-align:text-bottom}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}';export{s as dso_tree_view}
package/dist/dso-toolkit/p-296657d3.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as t,c as s,h as i,F as e,g as h}from"./p-98fd1658.js";import{d as o}from"./p-1805f5b0.js";import{v as a}from"./p-5d7f4ff2.js";const n=class{constructor(i){t(this,i),this.dsoSelect=s(this,"dsoSelect",7),this.dsoChange=s(this,"dsoChange",7),this.dsoSearch=s(this,"dsoSearch",7),this.listboxId=a(),this.inputId=a(),this.labelId=a(),this.debouncedEmitValue=o((t=>{this.dsoChange.emit(t),this.debouncedShowLoading()}),200),this.debouncedShowLoading=o((()=>{this.inputValue&&(this.showLoading=!0)}),this.loadingDelayed),this.inputValue="",this.onInput=t=>{if(!(t.target instanceof HTMLInputElement))throw new Error("event.target is not instanceof HTMLInputElement");this.showLoading=!this.loadingDelayed,this.inputValue=t.target.value,this.debouncedEmitValue(t.target.value.match(/(\S+)/g)?t.target.value:"")},this.onFocusIn=()=>{this.suggestOnFocus&&this.openSuggestions()},this.onKeyDown=t=>{if(!t.defaultPrevented&&!this.loading){switch(t.key){case"ArrowDown":this.showSuggestions?this.selectNextSuggestion():this.openSuggestions("first");break;case"ArrowUp":this.showSuggestions?this.selectPreviousSuggestion():this.openSuggestions("last");break;case"Tab":return void this.closeSuggestions();case"Escape":this.closeSuggestions();break;case"Enter":this.pickSelectedValue();break;default:return}t.preventDefault()}},this.suggestions=null,this.loading=!1,this.loadingLabel="Een moment geduld.",this.loadingDelayed=void 0,this.notFoundLabel=void 0,this.suggestOnFocus=!1,this.showSuggestions=!1,this.selectedSuggestion=void 0,this.notFound=!1,this.showLoading=!1}suggestionsWatcher(){this.resetSelectedSuggestion(),this.showSuggestions&&this.notFound||!this.inputValue?!this.showSuggestions&&!this.notFound||this.inputValue||this.closeSuggestions():this.openSuggestions()}onDocumentClick(t){(this.showSuggestions||this.notFound)&&this.listbox&&t.target instanceof Node&&!this.listbox.contains(t.target)&&this.input!==t.target&&this.closeSuggestions()}connectedCallback(){setTimeout((()=>{const t=this.host.querySelector('input[type="text"]');if(!(t instanceof HTMLInputElement))throw new ReferenceError("Mandatory text input not found");if(this.input=t,t.id?this.inputId=t.id:t.id=this.inputId,!this.input.labels||this.input.labels.length<1)throw new ReferenceError("Mandatory label for text input not found");const s=this.input.labels[0];(null==s?void 0:s.id)?this.labelId=s.id:s&&(s.id=this.labelId),this.input.setAttribute("role","combobox"),this.input.setAttribute("aria-haspopup","listbox"),this.input.setAttribute("aria-controls",this.listboxId),this.input.setAttribute("aria-expanded","false"),this.input.setAttribute("autocomplete","off"),this.input.setAttribute("aria-autocomplete","list"),this.input.setAttribute("aria-activedescendant",""),this.input.addEventListener("input",this.onInput),this.input.addEventListener("keydown",this.onKeyDown),this.input.addEventListener("focusin",this.onFocusIn)}))}disconnectedCallback(){var t,s,i;null===(t=this.input)||void 0===t||t.removeEventListener("input",this.onInput),null===(s=this.input)||void 0===s||s.removeEventListener("keydown",this.onKeyDown),null===(i=this.input)||void 0===i||i.removeEventListener("focusin",this.onFocusIn)}markTerms(t,s){if(!t||!s||0===s.length||void 0===s[0])return[""];const e=new RegExp(`(${function(t){if("string"!=typeof t)throw new TypeError("Expected a string");return t.replace(/[|\\{}()[\]^$+*?.]/g,"\\$&").replace(/-/g,"\\x2d")}(s[0])})`,"gi");return t.split(e).map((t=>t?e.test(t)?i("mark",null,t):1===s.length?i("span",null,t):this.markTerms(t,s.slice(1)):""))}selectSuggestion(t){var s;this.selectedSuggestion=t,null===(s=this.input)||void 0===s||s.setAttribute("aria-activedescendant",this.listboxItemId(t))}selectFirstSuggestion(){var t;this.suggestions&&(this.selectedSuggestion=this.suggestions[0],this.selectedSuggestion&&(null===(t=this.input)||void 0===t||t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))))}selectLastSuggestion(){var t;this.suggestions&&(this.selectedSuggestion=this.suggestions[this.suggestions.length-1],this.selectedSuggestion&&(null===(t=this.input)||void 0===t||t.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion))))}selectNextSuggestion(){var t,s;if(!this.suggestions)return;const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):-1;this.selectedSuggestion=null!==(t=this.suggestions[i+1])&&void 0!==t?t:this.suggestions[0],this.selectedSuggestion&&(null===(s=this.input)||void 0===s||s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion)))}selectPreviousSuggestion(){var t,s;if(!this.suggestions)return;const i=this.selectedSuggestion?this.suggestions.indexOf(this.selectedSuggestion):0;this.selectedSuggestion=null!==(t=this.suggestions[i-1])&&void 0!==t?t:this.suggestions[this.suggestions.length-1],this.selectedSuggestion&&(null===(s=this.input)||void 0===s||s.setAttribute("aria-activedescendant",this.listboxItemId(this.selectedSuggestion)))}resetSelectedSuggestion(){var t;this.showLoading=!this.loadingDelayed,this.notFound=!1,this.selectedSuggestion=void 0,null===(t=this.input)||void 0===t||t.setAttribute("aria-activedescendant","")}openSuggestions(t){var s,i,e,h;this.showSuggestions=null!==(s=this.suggestions&&this.suggestions.length>0)&&void 0!==s&&s,this.notFound=null!==(e=0===(null===(i=this.suggestions)||void 0===i?void 0:i.length))&&void 0!==e&&e,null===(h=this.input)||void 0===h||h.setAttribute("aria-expanded",(this.showSuggestions||this.notFound).toString()),this.showSuggestions&&"first"===t?this.selectFirstSuggestion():this.showSuggestions&&"last"===t&&this.selectLastSuggestion()}closeSuggestions(){var t;this.showSuggestions=!1,this.notFound=!1,null===(t=this.input)||void 0===t||t.setAttribute("aria-expanded","false"),this.selectFirstSuggestion()}pickSelectedValue(){var t;this.selectedSuggestion&&this.showSuggestions?this.dsoSelect.emit(this.selectedSuggestion):this.dsoSearch.emit(null===(t=this.input)||void 0===t?void 0:t.value),this.closeSuggestions()}listboxItemId(t){return this.suggestions?`${this.inputId}-${this.suggestions.indexOf(t)+1}`:""}render(){var t,s;const h=null!==(s=null===(t=this.input)||void 0===t?void 0:t.value.split(" ").filter((t=>t)))&&void 0!==s?s:[];return i(e,null,i("slot",null),this.loading&&this.showLoading?i("div",{class:"autosuggest-progress-box"},i("dso-progress-indicator",{label:this.loadingLabel})):i("ul",{role:"listbox",id:this.listboxId,"aria-labelledby":this.labelId,ref:t=>this.listbox=t,hidden:!this.showSuggestions&&!this.notFound},this.showSuggestions&&this.suggestions?this.suggestions.map((t=>i("li",{role:"option",id:this.listboxItemId(t),key:t.value,onMouseEnter:()=>this.selectSuggestion(t),onMouseLeave:()=>this.resetSelectedSuggestion(),onClick:()=>this.pickSelectedValue(),"aria-selected":(t===this.selectedSuggestion).toString(),"aria-label":t.value},i("span",{class:"value"},this.markTerms(t.value,h)),t.type?i("span",{class:"type"},t.type):void 0))):this.notFound?i("li",null,i("span",{class:"value"},this.notFoundLabel?i("span",null,this.notFoundLabel):this.markTerms(`${this.inputValue} is niet gevonden.`,h))):void 0))}get host(){return h(this)}static get watchers(){return{suggestions:["suggestionsWatcher"]}}};n.style=".sc-dso-autosuggest-h{display:block;position:relative}ul.sc-dso-autosuggest,.autosuggest-progress-box.sc-dso-autosuggest{background-clip:padding-box;background-color:#fff;border:1px solid rgba(0, 0, 0, 0.15);border-radius:4px;box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);list-style-type:none;margin-top:2px;padding:4px 0;position:absolute;left:0;right:0;top:100%;z-index:200}.autosuggest-progress-box.sc-dso-autosuggest{padding:12px 8px}ul.sc-dso-autosuggest{padding:8px 0}ul.sc-dso-autosuggest li.sc-dso-autosuggest{display:flex;justify-content:space-between;padding:4px 16px}li[aria-selected=true].sc-dso-autosuggest{cursor:pointer;background-color:#39870c}li[aria-selected=true].sc-dso-autosuggest,li[aria-selected=true].sc-dso-autosuggest .type.sc-dso-autosuggest{color:#fff}mark.sc-dso-autosuggest{font-weight:700;background-color:inherit;color:inherit;padding:0}.type.sc-dso-autosuggest{color:#666}";export{n as dso_autosuggest}
package/dist/dso-toolkit/{p-5e50b616.entry.js → p-564a5d95.entry.js} RENAMED
@@ -1 +1 @@
1
- import{r as t,h as s,H as o,g as i}from"./p-98fd1658.js";import{t as e}from"./p-5950644a.js";import{h as n,c as r}from"./p-452b1234.js";import{v as h}from"./p-5d7f4ff2.js";const a=class{constructor(s){t(this,s),this.focusOutListener=t=>{this.tabbables.includes(t.relatedTarget)||(this.open=!1)},this.keyDownListener=t=>{if(!t.defaultPrevented){switch(t.key){case"ArrowDown":this.tabInPopup(1);break;case"ArrowUp":this.tabInPopup(-1);break;case"Escape":this.escape();break;case" ":t.target instanceof HTMLElement&&t.target.click();break;default:return}t.preventDefault()}},this.escape=()=>{this.button.focus(),this.open=!1},this.open=!1,this.dropdownAlign="left",this.dropdownOptionsOffset=2,this.checkable=!1,this.boundary=void 0,this.strategy="auto"}watchPosition(){this.popper&&this.popper.setOptions({placement:"right"===this.dropdownAlign?"bottom-end":"bottom-start"})}watchOptionsOffset(){var t;null===(t=this.popper)||void 0===t||t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper)return;if("absolute"===this.strategy||"fixed"===this.strategy)return void this.popper.setOptions({strategy:this.strategy});let t=this.host;const s=this.boundary||document;for(;t&&t.parentNode!==s;)if(t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement,null!==t&&n(t))return void this.popper.setOptions({strategy:"fixed"});this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement))throw new ReferenceError("Mandatory toggle button not found");return t}get tabbables(){return e(this.host).filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu"),this.button.setAttribute("aria-expanded","false"),this.button.id||(this.button.id=h()),this.button.addEventListener("click",(()=>{this.open=!this.open}));const t=this.host.querySelector(".dso-dropdown-options");if(!t)throw new ReferenceError("Dropdown options not found");t.setAttribute("role","menu"),t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li")))s.setAttribute("role","none")}if(this.popper)return;const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement))throw new Error("dropdown options element is not instanceof HTMLElement");this.popper=r(this.button,s,{placement:"right"===this.dropdownAlign?"bottom-end":"bottom-start",modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:void 0!==this.boundary}]})}componentDidRender(){var t;this.setStrategy(),this.open&&(null===(t=this.popper)||void 0===t||t.update());for(const t of Array.from(this.host.getElementsByTagName("li")))for(const s of e(t))s.setAttribute("role",this.checkable?"menuitemradio":"menuitem"),this.checkable&&s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString());this.host.removeEventListener("keydown",this.keyDownListener),this.button.setAttribute("aria-expanded",this.open?"true":"false"),this.open&&this.host.addEventListener("keydown",this.keyDownListener),this.tabbables.forEach((t=>{t.removeEventListener("click",this.escape),this.open&&t.addEventListener("click",this.escape)}))}disconnectedCallback(){var t;null===(t=this.popper)||void 0===t||t.destroy()}getActiveElement(t=document){const s=t.activeElement;return s?s.shadowRoot?this.getActiveElement(s.shadowRoot):s:null}tabInPopup(t){const s=this.tabbables;let o=s.findIndex((t=>t===this.getActiveElement()))+t;o>=s.length?o=0:o<0&&(o=s.length-1),s[o].focus()}render(){return s(o,{onFocusout:this.focusOutListener,tabindex:this.open?"-1":void 0},s("slot",{name:"toggle"}),s("div",{hidden:!this.open},s("slot",null)))}get host(){return i(this)}static get watchers(){return{dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};a.style=":host(:focus){outline:none}:host{display:inline-block}";export{a as dso_dropdown_menu}
1
+ import{r as t,h as s,H as o,g as i}from"./p-98fd1658.js";import{t as e}from"./p-5950644a.js";import{h as n,c as r}from"./p-452b1234.js";import{v as h}from"./p-5d7f4ff2.js";const a=class{constructor(s){t(this,s),this.focusOutListener=t=>{this.tabbables.includes(t.relatedTarget)||(this.open=!1)},this.keyDownListener=t=>{if(!t.defaultPrevented){switch(t.key){case"ArrowDown":this.tabInPopup(1);break;case"ArrowUp":this.tabInPopup(-1);break;case"Escape":this.escape();break;case" ":t.target instanceof HTMLElement&&t.target.click();break;default:return}t.preventDefault()}},this.escape=()=>{this.button.focus(),this.open=!1},this.open=!1,this.dropdownAlign="left",this.dropdownOptionsOffset=2,this.checkable=!1,this.boundary=void 0,this.strategy="auto"}watchPosition(){this.popper&&this.popper.setOptions({placement:"right"===this.dropdownAlign?"bottom-end":"bottom-start"})}watchOptionsOffset(){var t;null===(t=this.popper)||void 0===t||t.setOptions({modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}}]})}watchStrategy(){this.setStrategy()}setStrategy(){if(!this.popper)return;if("absolute"===this.strategy||"fixed"===this.strategy)return void this.popper.setOptions({strategy:this.strategy});let t=this.host;const s=this.boundary||document;for(;t&&t.parentNode!==s;)if(t=t.parentNode instanceof ShadowRoot?t.parentNode.host:t.parentElement,null!==t&&n(t))return void this.popper.setOptions({strategy:"fixed"});this.popper.setOptions({strategy:"absolute"})}get button(){const t=this.host.querySelector('button[slot="toggle"]');if(!(t instanceof HTMLButtonElement))throw new ReferenceError("Mandatory toggle button not found");return t}get tabbables(){return e(this.host).filter((t=>t!==this.button))}componentDidLoad(){this.button.setAttribute("aria-haspopup","menu"),this.button.setAttribute("aria-expanded","false"),this.button.id||(this.button.id=h()),this.button.addEventListener("click",(()=>{this.open=!this.open}));const t=this.host.querySelector(".dso-dropdown-options");if(!t)throw new ReferenceError("Dropdown options not found");t.setAttribute("role","menu"),t.setAttribute("aria-labelledby",this.button.id);for(const t of Array.from(this.host.getElementsByTagName("ul"))){t.setAttribute("role","group");for(const s of Array.from(t.getElementsByTagName("li")))s.setAttribute("role","none")}if(this.popper)return;const s=this.host.querySelector(".dso-dropdown-options");if(!(s instanceof HTMLElement))throw new Error("dropdown options element is not instanceof HTMLElement");this.popper=r(this.button,s,{placement:"right"===this.dropdownAlign?"bottom-end":"bottom-start",modifiers:[{name:"offset",options:{offset:[0,this.dropdownOptionsOffset]}},{name:"preventOverflow",options:{boundary:this.boundary?document.querySelector(this.boundary):null},enabled:void 0!==this.boundary}]})}componentDidRender(){var t;this.setStrategy(),this.open&&(null===(t=this.popper)||void 0===t||t.update());for(const t of Array.from(this.host.getElementsByTagName("li")))for(const s of e(t))s.setAttribute("role",this.checkable?"menuitemradio":"menuitem"),this.checkable&&s.setAttribute("aria-checked",t.classList.contains("dso-checked").toString());this.host.removeEventListener("keydown",this.keyDownListener),this.button.setAttribute("aria-expanded",this.open?"true":"false"),this.open&&this.host.addEventListener("keydown",this.keyDownListener),this.tabbables.forEach((t=>{t.removeEventListener("click",this.escape),this.open&&t.addEventListener("click",this.escape)}))}disconnectedCallback(){var t;null===(t=this.popper)||void 0===t||t.destroy()}getActiveElement(t=document){const s=t.activeElement;return s?s.shadowRoot?this.getActiveElement(s.shadowRoot):s:null}tabInPopup(t){var s;const o=this.tabbables;let i=o.findIndex((t=>t===this.getActiveElement()))+t;i>=o.length?i=0:i<0&&(i=o.length-1),null===(s=o[i])||void 0===s||s.focus()}render(){return s(o,{onFocusout:this.focusOutListener,tabindex:this.open?"-1":void 0},s("slot",{name:"toggle"}),s("div",{hidden:!this.open},s("slot",null)))}get host(){return i(this)}static get watchers(){return{dropdownAlign:["watchPosition"],dropdownOptionsOffset:["watchOptionsOffset"],strategy:["watchStrategy"]}}};a.style=":host(:focus){outline:none}:host{display:inline-block}";export{a as dso_dropdown_menu}
package/dist/dso-toolkit/p-5d533423.entry.js ADDED
@@ -0,0 +1 @@
1
+ import{r as o,c as t,h as n}from"./p-98fd1658.js";import{A as e}from"./p-89b97fce.js";import"./p-4b8535b7.js";const s=class{constructor(n){o(this,n),this.dsoToggle=t(this,"dsoToggle",7),this.identifier=void 0,this.annotationPrefix=void 0}async toggleAnnotation(o,t){e.toggle(t);const n=e.state[this.identifier];if(void 0===n)throw new Error(`No state found for ${this.identifier}`);this.dsoToggle.emit({originalEvent:o,open:n})}toggleHandler(o){this.toggleAnnotation(o,this.identifier)}render(){return n("dso-responsive-element",null,n("dso-expandable",Object.assign({id:this.identifier},e.state[this.identifier]?{open:!0}:{}),n("div",{slot:"expandable-content"},this.annotationPrefix&&n("span",{class:"dso-annotation-prefix"},this.annotationPrefix),n("div",{class:"dso-annotation-header"},n("slot",{name:"title"}),n("slot",{name:"addons"}),n("button",{type:"button",class:"dso-tertiary dso-annotation-close-button",onClick:o=>this.toggleHandler(o)},n("dso-icon",{icon:"times"}),n("span",{class:"sr-only"},"Toelichting sluiten"))),n("div",{class:"dso-annotation-content"},n("slot",null)))))}};s.style="*,*::after,*::before{box-sizing:border-box}dso-annotation-output{display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-annotation-header{align-items:center;background-color:#f2f2f2;clear:both;display:flex;margin-bottom:2px;margin-top:8px;padding-left:16px;padding-right:8px;padding-top:8px;padding-bottom:8px}.dso-annotation-header>*[slot=title]{color:#000;font-size:1.25rem;margin-bottom:0;margin-top:0}.dso-annotation-header>*:nth-child(2){margin-left:auto}dso-responsive-element[small] .dso-annotation-header,dso-responsive-element[medium] .dso-annotation-header{display:grid;row-gap:8px}dso-responsive-element[small] .dso-annotation-header *[slot=title],dso-responsive-element[medium] .dso-annotation-header *[slot=title]{grid-row:1;grid-column:1}dso-responsive-element[small] .dso-annotation-header *[slot=addons],dso-responsive-element[medium] .dso-annotation-header *[slot=addons]{grid-row:2;grid-column:1;margin-left:initial}dso-responsive-element[small] .dso-annotation-header .dso-annotation-close-button,dso-responsive-element[medium] .dso-annotation-header .dso-annotation-close-button{grid-row:1;grid-column:2;margin-left:8px;text-align:end}.dso-annotation-content{background-color:#f2f2f2;padding-left:16px;padding-right:8px;padding-top:8px;padding-bottom:8px}.dso-annotation-close-button{margin-left:32px}.dso-annotation-prefix{font-style:italic}";export{s as dso_annotation_output}